Здравствуйте, может кто подскажит как осуществить или поскажет статейку с мануалом как сделать информер картинку, вернее что бы было 3 картники и распологались они горизонтально, статей. Что бы картинка была кликабельна и вела на статью, а при наведении на картинку появлялось название статьи и краткое описание, или картинка и под картинкой описание и кнопка читать или далее, не важно.
Типо такого:
Я искал в инте но не незнаю как правильно выразиться. Как создать сам информер, сколько статей, колонок, и т.д. я знаю, мне надо именно сам стиль отоброжения. Как сделать что бы информер отображался именно так.
Методом проб и ошибок удалось сделать красивый, современный, стильный информер. Я расположил под шапкой смотрится привлекательно, посмотреть можно на сайте, кому интересно вот код:
<div align="center">
<a href="$ENTRY_URL$" class="readmore"><span>Подробнее</span></a><br>
<img src="$IMG_URL1$" title="$TITLE$" width="250" height="150"></a>
<br><h3>$TITLE$</h3><?substr($AUTHOR_SITE$,0,69)?>...
</div>
Этот код выше, вписываем в готовый информер предворительно удалив код созданного, надеюсь как создать информер вы знаете, если нет, без труда найдете в инете или здесь, а может админы вставят в мое сообщение ссылку как создать информер. Код выше подойдет для чего угодно, картинок, статей, новостей, файлов. Единственное на что следует обратить пристальное внимание. При создании информера что бы информер распологался горизонтально, а не вертикально небходимо в настройках при создании информера выбрать количество колонок больше одной, 2 или 3. Я очень долго искал решения как расположить информер горизонтально и даже здесь спрашивал, но так и не получил ответа. Случайно сам методом тыка получилось выбрав 3 колонки. С одной колонкой картинки в информере распологаються вертикально и информер получаеться вертикальный а не горизонтальный.
Далее в CSS вписываем такое:
/*-- Закругление краев у картинки --*/
.normal-img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
/*-- Для информера --*/.info {
color: #000000; /*-- цвет шрифта --*/
background-color: #ffffff; /*-- цвет фона --*/
}
Все, информер как у меня готов, за исключением некоторых моментов на которые следует так же обратить вниманние и поправить под себя.
За место моего класса readmore ставите свой придусмотренный шаблоном и отвечающий за вывод "Далее", "Подробно", "Читать" и так далее... Ну ли просто устанавливаете кнопку "Скачать", "Читать", "Смотреть" думаю как сделать кнопку у вас труда не составит.
$TITLE$ - название статьи, можно поставить $ENTRY_TITLE$
<?substr($AUTHOR_SITE$,0,69)?> - цифра 69 отвечает за количество символов выводимых в описании статьи, новости под картинкой. Можно просто $AUTHOR_SITE$, но тогда из за разного количества символов в описании (например в одном случаи под картинкой описании 2 предложения, а во втором 1 предложение) информер может коробить, а так получаеться четко фиксированные колонки, Одинаковые по высоте и ширине.
$AUTHOR_SITE$ я взял именно этот код так как он у меня отвечает за description, то есть описания статьи, так как у меня дополнительное поле под описание сделано это, вы можете вставить свой или просто вписать категорию, например: $CAT_NAME$ или $BRIEF$ (если у вас оно работает у меня поставить его не получилось). В случаи если вставить $CAT_NAME$ то вместо этого кода <?substr($AUTHOR_SITE$,0,69)?> можно вписать просто этот $AUTHOR_SITE$
Если есть необходимость что бы кртинки и название так же были кликабельны, перед $TITLE$ и $IMG_URL1$ вставте код <a href="$ENTRY_URL$">
Вроде все если в чем ошибся думаю проверяющие поправят.
Результат:
Можно конечно еще сам информер заключить в какую нибудь рамку с закругленными углами, и каким нибудь цветом, но к сожелению я не смог допетрить или устал :)
Вроде ни чего не забыл, у меня все работает. Желаю что бы и у вас работало. Надеюсь кому то пригодиться.
Контент-модули
Продвижение сайта
Управление сайтом