Модератор форума: JonMagon |
Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Как вставить описание картинки для тэга $IMAGE1$ (Как вставить описание картинки для тэга $IMAGE1$) |
Как вставить описание картинки для тэга $IMAGE1$ |
|
Попробую предложить свое нестандартное решение
Цитата Чего в итоге добъемся? В итоге при добавлении материала, мы сможем пользоваться стандартной формой добавления картинок, вставлять в тело материала переменные $IMAGE1$ и при этом они будут с прописанными альтами (в том числе при желании их можно прописывать вручную). Решение будет замечательным в плане СЕО и удобства в работе. 1. Вставляем картинки на страницу материала и комментариев. Выводится они будут только, если они действительно были закачаны. Вот так: Код <?if($IMG_URL2$)?><img id="addimgfast" src="$IMG_URL3$" alt="$ENTRY_TITLE$"><?endif?> В примере атрибут alt="" заполняется названием материала. Тут вы можете подставить все, что захотите. В том числе и подставлять значение атрибута через доп.поле. Для СЕО важно правильно их разместить. Я думаю, одну картинку можно расположить после заголовка статьи, а другие сразу после статьи. Когда робот зайдет, он так и увидит эти картинки. Они все с прописанными альтами! То есть все валидно и замечательно. 2. Пишем скрипт, который при добавлении материала, заменит переменную $IMAGE1$ на $-I-M-A-G-E-1-$. При этом делаем так. - скрываем стилями стандартную кнопку "опубликовать". Ставим свою собственную кнопку и пишем сценарий для нее: - при нажати на кнопку - .replace (заменить) $IMAGE1$ на $-I-M-A-G-E-1-$ - программно нажать на скрытую кнопку "опубликовать". Замену мы даже не успеем увидеть, так как все это очень быстро случится. Также пишем скрипт обратного преобразования. При загрузке материала (на редактирование) .replace (заменить) $-I-M-A-G-E-1-$ на $IMAGE1$. В итоге, это ничем не отличается от использования стандартной формы. (данный скрипт нужно еще "допилить") 3. На странице материала и комментариев ставим в самый конец это: Код <script> var el = $('div'); el.html(el.html().replace(/I-M-A-G-E-2, "<div id='foo'></div>")); $(document).ready(function(){ $('#imgstats2').insertBefore('#foo'); };); </script> Данный скрипт: - сначала заменяет все вхождения I-M-A-G-E-2 на <div id='foo'></div> - затем переносит картинку <img id="addimgfast" src="$IMG_URL3$" alt="$ENTRY_TITLE$"> в этот блок <div id='foo'></div> Этот скрипт проверен и работает отлично. В итоге, картинки корректно отображаются в теле статьи там, где мы ставим $IMAGE1$. Разница лишь в том, что эти картинки с прописанными альтами. Прим.1.Также не вопрос добавить условие, чтобы при игнорировании всех переменных (то есть мы не делаем вообще никаких телодвижений) все картинки ставились так, как ниже в этой теме предлагает Rad_van_Cor (как ВКонтакте). А при желании - есть гибкость) А ведь это крайне важно, так как отсутствие альта считается грубой ошибкой. К тому же альт дает информацию роботам, которые изучают и ранжируют картинки. Думаю, все хотят иметь хороший трафик в том числе и оттуда тоже =) Сообщение отредактировал Solaris(Olga) - Понедельник, 25 Ноя 2013, 21:58:55
|
|
Да, конечно. Разница в отображении пользователю и роботу только в том, как размещаются картинки. Пример
Что видит робот: Заголовок статьи Картинка 1 Краткое описание статьи Картинка 2 Тело статьи Картинка 3 Картинка 4 Картинка 5 Картинка 6 Что видит посетитель: Заголовок статьи Картинка 1 Краткое описание статьи Картинка 2 Часть текста статьи Картинка 3 Часть текста статьи Картинка 4 Часть текста статьи Картинка 5 Часть текста статьи Картинка 6 В том и другом случае картинки будут с прописанными атрибутами Альт. Большое удобство) Если делаете для клиентов сайты, особенно полезно может оказаться. + поставить новую форму - //forum.ucoz.ru/forum/2-58647-1.... Сообщение отредактировал Solaris(Olga) - Понедельник, 25 Ноя 2013, 21:24:46
|
Интересное заявление)) А покажи-ка мне способ, как сделать, допустим репортаж, так чтоб в статье были вставлены фотографии, без $IMAGE1$ и не прибегая к скриптам на стороне клиента и без php... Очень интересно, видимо и я нуб.... Ну не обязательно же так делать, сейчас модно делать типа как в ВК)))) Тоесть идёт с начала текст, а после него все изображения к статье) Вот в страницу материала и комментариев к нему после $MESAGE$ ставишь $IMG_URL1-10$ красиво оформляешь, в 1-3 ряда. Тоже задаёшь условием, типа если одна картинка, то она на всю страницу, если две, то они чуть меньше и в две колонки, если три, то ещё меньше и в три колонки. Ну короче как в ВК. И всё) Они и красиво, и современно, и не нужно голову ломать) |
Вот на сайте fileburg.ru при добавлении новости код $IMAGE1$ совсем вставлять ненужно, картинка появляется автоматом сверху, с уже прописанным alt-ом. В поном описании это видно в свойствах картинки. Может кто знает как это сделать?
http://serseysoft.my1.ru/
|
Знаем)) На странице материала и комментариев к нему, после заголовка $TITLE$ ставьте этот код:
Код <?if($IMG_URL1$)?><img src="$IMG_URL1$" alt="$ENTRY_TITLE$"><?endif?> По аналогии, вторую картинку можно ставить автоматом после статьи. Ставим после $MESSAGE$ Код <?if($IMG_URL2$)?><img src="$IMG_URL2$" alt="$ENTRY_TITLE$2"><?endif?> Просто вы получается ошиблись разделом. Тут более или менее сложные вопросы обсуждают, которые нельзя стандартными способами реализовать. А так... нужно было в разделе новичков спрашивать))) Сообщение отредактировал Solaris(Olga) - Понедельник, 25 Ноя 2013, 22:59:38
|
|
Собственно вопрос изначала и был нестандартный, нужно подписывать картинки при добавлении новости на любом сайте где разрешены коды html, при добавлении есть доступ только к стандартному окну добавления новостей. Если вставлять ссылку на сторонний фотохостинг, все работает как надо название прописывается и сайту плюс и мне. А вот как быть с сайтами на которые картинку надо добавлять именно на сайт через обзор? Возможно при добавлении выполнить какойто скрипт. У меня собственная программа рассылки и в шаблон я могу вставить все что угодно.
http://serseysoft.my1.ru/
|
b7pp,
А что вам мешает воспользоваться вышеприведенным кодом? Один раз поставили в шаблон и все... Будет вам автоматом все ставиться и прописываться. Попробуйте. |
b7pp, ничего не понимаю, как вы этого добились?)))
Поставьте это в шаблон. Зайдите в панель управления, выбирайте свой модуль (каталог файлов или что у вас?), затем идите в "управление дизайном" - "страница материала и комментариев к нему". Там ставьте этот код: Код <?if($IMG_URL1$)?><img src="$IMG_URL1$" alt="$ENTRY_TITLE$"><?endif?> Затем, чтобы добавить фотку, при добавлении материала закачайте ее стандартной формой и все. Ничего никуда не вставляйте. Не нужно в текст ничего ставить. Или я ничего не понимаю? ![]() Сообщение отредактировал Solaris(Olga) - Вторник, 26 Ноя 2013, 00:03:34
|
|
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!