Предлагаю Вашему вниманию информер фотографий для сайтов uCoz. Этот информер для тех, кому нужно сделать акцент именно на фотографии из статей модуля Каталог статей. Что такое информер и как его создать читайте в статье Информер материалов.
Особенности:
- Изображение берется из первого загруженного изображения при добавлении новой статьи.
- Все изображения абсолютно одинаковые по размеру. Если изображение иное, чем указано в параметрах рамки, оно выравнивается по ширине и обрезается по высоте.
- При нажатии на изображение, его можно увидеть полностью, не обрезанным, так что пользователь ничего не теряет.
- Если у Вашего материала нет пока еще комментариев это поле не выводится вовсе.
Установка информера фотографий
inf_mat.rar
— Скачать файловый архив ☝
— Создать в корне Вашего сайта папку inf_mat.
— Скачать файлы из файлового архива(нажмите на кнопку слева), разархивировать и загрузить в папку inf_mat.
— В папку нужно загружать только картинки, исходники — просто для Вас.
HTML
Перейти: Панель управления — Информеры и создать новый Информер с любым названием:
- Раздел: Каталог статей
- Тип данных: Материалы
- Способ сортировки: Количество просмотров A
- Количество материалов: 16 (или на Ваше усмотрение)
- Количество колонки: 4 (или на Ваше усмотрение)
Далее нажать на ссылку Шаблон информера, стереть полностью код в нем, и вставить следующий:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="informer opacity"> <a href="$ENTRY_URL$"><div class="informer_title"><b><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?>$TITLE$<?endif?></b></div> <div class="informer_img"> <span><img align="left" title="$TITLE$" src="$IMG_URL1$"></span> </div> </a> <div class="informer_bottom"> <ul class="informer_statistics"> <li><span>$RATING$ ($RATED$)</span><img src="/inf_mat/ico_like.png" alt="рейтинг"></li> <li><span>$READS$</span><img src="/inf_mat/ico_Eye.png" alt="просмотров"></li> <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="/inf_mat/ico_comment.png" alt="комментарий"></li> <?endif?> </ul> </div> </div> |
CSS
Для работы информера нужно добавить стили CSS.
Перейти: Панель управления — Дизайн — Управление дизайном (CSS)
В самом конце всех стилей ставим следующие:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/*--Информер--*/ .informer { width:160px; margin: 5px; overflow:hidden; background: #fff; border: 2px solid #ACACAC; font:11px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #fff; color: #0A2526; border-radius:5px; } .informer a { color: #737272; } .informer a:hover { color: #c9c4c4; } .informer_title { height: 30px; float:left; width:160px; background:#f4f4f4; padding: 4px 4px; font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700; font-color: #737272; border-bottom: 1px solid #d1d1d1; } .informer_img span {display: inline-block; height: 120px; width: 160px; overflow: hidden;} .informer_img span img {width: 160px;} .informer_bottom { float:left; width:100%; background:#f4f4f4; border-top: 1px solid #d1d1d1; } .informer_category{ float:left; } .informer_statistics{ float:right; margin:0; padding: 0; margin-right: -2px; list-style:none; border-left: 1px solid #d1d1d1; } .informer_statistics li { float:left; height:20px; padding: 3px 3px 2px 3px; border-right: 1px solid #d1d1d1; border-left: 1px solid #fff; } .informer_statistics span{ float:left; margin: 0px 5px 0px 0px; } .opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);} /*--END-Информер--*/ |
Теперь вам осталось расположить информер на странице, где Вы хотите чтобы он функционировал.
Скажите, пожалуйста, как адаптировать ваш информер под мобильные устройства? Когда смотришь с мобильного или планшета информер наезжает на меню сайта.
Вот скрин http://i.piccy.info/i9/d03c2471206bd882bcf26073c0474407/1466760267/218143/1046125/2016_06_24_115758.jpg
Последний код, как раз то, что нужно по размерам! Спасибо огромное! Подскажите, как мне убрать количество комментариев и рейтинг, и оставить только количество просмотров, а то сильно наляписто смотрится из-за своего размера нынешнего?
Скажите, пожалуйста, какой стандартный размер картинок в этом информере?
Екатерина, в информере этой статьи размер картинок 160 х 120 пикселей.
Дело в том, что у меня изображения очень маленькие, размер 70 на 70 пикселей, а в этом информере они увеличиваются и растягиваются, из-за чего смотрятся просто ужасно.
Поэтому мне надо изменить параметры рамки по высоте и ширине, но в CSS, увы, я не разбираюсь.
Екатерина Дело в том, что информер сделан именно под эти размеры картинки, так как при маленьком размере картинки он получается некрасивым. Тогда нужно придумывать просто новый дизайн. Судите сами:
Картинки стали нормальными, но вместе с ними и размер надписей уменьшился и все остальное. Плохо дело 🙁
Так в том то и дело! Чтобы все было красиво, надо просто создавать новый дизайн!
Жаль, такой информер классный и на сайте смотрится красиво. Я думала, что можно в стилях подправить размер и чтобы картинка маленькая была, но только по центру информера размещалась, а сам размер информера был прежней. Но такое сделать нельзя, да?
Тогда так, но мне, если честно, так не нравится)))
Здравствуйте! Подскажите, пожалуйста, как в данном информере уменьшить вид выводимых изображений?
Добрый вечер.
У вас в инструкции написано, что при создании информера нужно выбрать «Способ сортировки: Количество просмотров A». Скажите, а если мне нужно, чтобы было количество просмотров D и я укажу именно это, то в самом коде, вернее, шаблоне информера ничего менять не нужно будет?
Екатерина, в шаблоне менять ничего не нужно.
Добрый вечер, спасибо за полезную информацию, пояснения и коды! Подскажите, пожалуйста, причины и возможности их устранения, сделала все по плану «Информер материалов в виде фотографий» в Opera — все отлично, а Мазилье» нет фото?! За ранее, спасибо
Уважаемая Iren! Я доработала CSS стили и изменила их в статье. Теперь в Мазиле все фото показываются!
Здравствуйте, это все конечно интересно, но вот какая проблема, сделал все как тут написано, информер есть а картинок в нем нет, почему?, или их надо самому в код прописывать.
Здравствуйте! За картинку отвечает условный оператор $IMG_URL1$. Информер создается из уже ранее созданных материалов. В каждом таком материале в режиме «добавления и редактирования материала» должна быть загружена картинка в поле Изображения». При чем будет видна в информере именно та картинка, которая самая первая. Также почитайте статью Информеры