Categories: uCoz

Информер материалов в виде фотографий для сайтов uCoz

Предлагаю Вашему вниманию информер фотографий для сайтов uCoz. Этот информер для тех, кому нужно сделать акцент именно на фотографии из статей модуля Каталог статей. Что такое информер и как его создать читайте в статье Информер материалов.

✪ DEMO⇊ СКАЧАТЬ

Особенности:
  • Изображение берется из первого загруженного изображения при добавлении новой статьи.
  • Все изображения абсолютно одинаковые по размеру. Если изображение иное, чем указано в параметрах рамки, оно выравнивается по ширине и обрезается по высоте.
  • При нажатии на изображение, его можно увидеть полностью, не обрезанным, так что пользователь ничего не теряет.
  • Если у Вашего материала нет пока еще комментариев это поле не выводится вовсе.

Установка информера фотографий

inf_mat.rar

1 file(s) 4.33 KB
Download

– Скачать файловый архив ☝
– Создать в корне Вашего сайта папку inf_mat.
– Скачать файлы из файлового архива(нажмите на кнопку слева), разархивировать и загрузить в папку inf_mat.
– В папку нужно загружать только картинки, исходники – просто для Вас.

HTML

Перейти: Панель управления – Информеры и создать новый Информер с любым названием:

  • Раздел: Каталог статей
  • Тип данных: Материалы
  • Способ сортировки: Количество просмотров A
  • Количество материалов: 16 (или на Ваше усмотрение)
  • Количество колонки: 4 (или на Ваше усмотрение)

Далее нажать на ссылку Шаблон информера, стереть полностью код в нем, и вставить следующий:

<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)
В самом конце всех стилей ставим следующие:

/*--Информер--*/ 

  .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-Информер--*/

Теперь вам осталось расположить информер на странице, где Вы хотите чтобы он функционировал.

Больше статей: Переключатель radio со скрытыми полями на сайтах uCoz

View Comments

  • Последний код, как раз то, что нужно по размерам! Спасибо огромное! Подскажите, как мне убрать количество комментариев и рейтинг, и оставить только количество просмотров, а то сильно наляписто смотрится из-за своего размера нынешнего?

  • Скажите, пожалуйста, какой стандартный размер картинок в этом информере?

    • Екатерина, в информере этой статьи размер картинок 160 х 120 пикселей.

  • Дело в том, что у меня изображения очень маленькие, размер 70 на 70 пикселей, а в этом информере они увеличиваются и растягиваются, из-за чего смотрятся просто ужасно.
    Поэтому мне надо изменить параметры рамки по высоте и ширине, но в CSS, увы, я не разбираюсь.

    • Екатерина Дело в том, что информер сделан именно под эти размеры картинки, так как при маленьком размере картинки он получается некрасивым. Тогда нужно придумывать просто новый дизайн. Судите сами:

       .informer { 
 width:70px; 
 margin: 5px; 
 overflow:hidden;
 background: #fff; 
 border: 2px solid #ACACAC; 
 font:10px 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: 20px;
 float:left; 
 width:70px; 
 background:#f4f4f4; 
 padding: 2px 2px; 
 font: 100% Verdana,Arial,Helvetica, sans-serif; font-weight: 600;
 font-color: #737272;
 border-bottom: 1px solid #d1d1d1; 
} 

.informer_img span
{display: block;
 height: 70px;
width: 70px;
overflow: hidden;}

.informer_img span img
{width: 70px;}

 
.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; 
}

      • Картинки стали нормальными, но вместе с ними и размер надписей уменьшился и все остальное. Плохо дело :(

        • Так в том то и дело! Чтобы все было красиво, надо просто создавать новый дизайн!

          • Жаль, такой информер классный и на сайте смотрится красиво. Я думала, что можно в стилях подправить размер и чтобы картинка маленькая была, но только по центру информера размещалась, а сам размер информера был прежней. Но такое сделать нельзя, да?

          • Тогда так, но мне, если честно, так не нравится)))

            /*--Информер на главной странице--*/
 .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: block;
 height: 70px;
width: 70px;
padding-left: 45px;
overflow: hidden;}

.informer_img span img
{width: 70px;}

 
.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; 
}

  • Здравствуйте! Подскажите, пожалуйста, как в данном информере уменьшить вид выводимых изображений?

  • Добрый вечер.
    У вас в инструкции написано, что при создании информера нужно выбрать "Способ сортировки: Количество просмотров A". Скажите, а если мне нужно, чтобы было количество просмотров D и я укажу именно это, то в самом коде, вернее, шаблоне информера ничего менять не нужно будет?

    • Екатерина, в шаблоне менять ничего не нужно.

  • Добрый вечер, спасибо за полезную информацию, пояснения и коды! Подскажите, пожалуйста, причины и возможности их устранения, сделала все по плану "Информер материалов в виде фотографий" в Opera - все отлично, а Мазилье" нет фото?! За ранее, спасибо

    • Уважаемая Iren! Я доработала CSS стили и изменила их в статье. Теперь в Мазиле все фото показываются!

  • Здравствуйте, это все конечно интересно, но вот какая проблема, сделал все как тут написано, информер есть а картинок в нем нет, почему?, или их надо самому в код прописывать.

    • Здравствуйте! За картинку отвечает условный оператор $IMG_URL1$. Информер создается из уже ранее созданных материалов. В каждом таком материале в режиме "добавления и редактирования материала" должна быть загружена картинка в поле Изображения". При чем будет видна в информере именно та картинка, которая самая первая. Также почитайте статью Информеры

Leave a Comment
Share
Tags: uCoz виде информер материалов фотографий
% дней назад

Recent Posts

  • Excel

Как правильно открыть CSV с многострочными ячейками в Excel

Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More

% дней назад
  • Python

Загрузка проекта на Github и Автодеплой на сервер

Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More

% дней назад
  • Python
  • Полезная минутка

Миграция базы данных в проектах Python

Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More

% дней назад
  • Python

Команды Git – Шпаргалка по основным командам Git

Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More

% дней назад
  • Python

Установка PostgreSQL на сервер Ubuntu и подключение через pgAdmin

Установка PostgreSQL на сервер Read More

% дней назад
  • Полезная минутка

Как создать PrimaryKey для таблицы в PostgreSQL

Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More

% дней назад