Как привязать к каждой категории каталога свою картинку?
|
|
[1] likbezz [05.09.2010, 17:34] |
Здравствуйте. Подскажите пожалуйста можно ли привязать к каждой категории каталога свою картинку, так чтобы при вставке кода $CATEGORIES$ над названием каждой категории была соответствующая картинка. Категорий очень много, вручную всё это делать неудобно. Может есть какой то метод типа Image$CID$.jpg только для $CATEGORIES$. Чтоб залить все картинки пронумерованные по ID категории и они сами подставились... Upd: Нашёл решение через информеры. Но информеры тоже нужно вставлять хоть конечно и меньше работы. Можно ли как то сделать тоже самое без участия информеров? |
|
[2] likbezz [05.09.2010, 17:36] |
Roland-Hyper, Цитата (Roland-Hyper) Здравствуйте. Подскажите пожалуйста можно ли привязать к каждой категории каталога свою картинку, так чтобы при вставке кода $CATEG0RIES$ над названием каждой категории была соответствующая картинка.
Как вы себе это представляете ...? ... Напрямую, что бы вот так просто - вставил $CATEG0RIES$ - появились картинки - нет. Варианты есть. Всё меню $CATEG0RIES$ - по сути своей - таблица - с индивидуальными по ID - ячейками. Код <td style="width: 100%;" class="catsTd" id="cid16" valign="top"><a href="http://likbezz.ucoz.ru/load/16" class="catName">Работа с файлами</a> <span class="catNumData" style="unicode-bidi: embed;">[2]</span><div class="catDescr">Работа с файлами</div></td>
- можно отрываться от этого. То есть скриптом - вставлять в ячейку картинку с адресом = ID этой ячейки. Код <img src="/cid16.gif" width="16" height="16" />
Вариант 2 К каждой категории можно прописать описание, при создании - в ПУ - это описание выводится вот здесь: Код <td style="width: 100%;" class="catsTd" id="cid16" valign="top"><a href="http://likbezz.ucoz.ru/load/16" class="catName">Работа с файлами</a> <span class="catNumData" style="unicode-bidi: embed;">[2]</span><div class="catDescr">Работа с файлами</div></td>
Можно и от этого взять старт.
Вариант три: Прописать каждой ячейки с ID - фоновую картинку. и поместить соответствующие стили в соответствующий шаблон. А ссылкам - отступ слева назначить. Код #cid16{background:url('/ico.gif') no-repeat 0 1px;height:16px;padding-left:16px;}
Вариантов много, если подумать - эти я придумал только что - просто посмотрев исходник $CATEG0RIES$ - наверняка есть и более красивые и правильные решения.
Факт, в том, что нет готового решения подходящего кому либо на сто процентов. И у любого решения есть свои плюсы и минусы. Какое подойдет вам - решать только вам. |
|
[3] levin [08.01.2013, 22:54] |
likbezz, А можешь прописать для фотоальбома исходник $CATEGORIES$, не просто скопировав исходный код, а оставив там теги $????$, что бы код получился универсальным??? |
|
[4] likbezz [08.01.2013, 23:44] |
levin, ..а зачем?.. |
|
[5] levin [09.01.2013, 21:05] |
я не могу понять. Вышеописанный код подходит если вручную прописывать категории фотоальбома на отдельно созданной странице. Но если на сайте много категорий и альбомов, его невозможно применить для вставки в шаблон "страницы со списком фотографий раздела" или в шаблон страницы со списком фотографий альбома! Получается что нужно разместить код который будет работать на всех страницах фотоальбома, что бы категории раздела (разделы и альбомы) отображались в виде заглавной фотки и названия под ней. Может есть какой вариант для реализации, но я до этого додумать не могу. Туп. |
|
[6] likbezz [09.01.2013, 21:35] |
levin, я не могу понять. Вышеописанный код подходит если вручную прописывать категории фотоальбома на отдельно созданной Из чего это следует?
Может есть какой вариант для реализации, но я до этого додумать не могу. Туп. Есть - через стили. О чем и говорится выше: Вариант три: Прописать каждой ячейки с ID - фоновую картинку. и поместить соответствующие стили в соответствующий шаблон. А ссылкам - отступ слева назначить.
Вариант 4: Произвести все нужные изменения скриптом, если это необходимо. Например добавить картинку или еще что..
Но лично я, пока, не вижу того чего нельзя было сделать стилями .. |
|
[7] levin [09.01.2013, 22:32] |
levin, Цитата (levin, Ср, 09.01.2013, 21:05:16) я не могу понять. Вышеописанный код подходит если вручную прописывать категории фотоальбома на отдельно созданной
Из чего это следует?
Так, мы пытаемся разобрать исходник $CATEGORIES$, дабы добавить превью фотографии. В итоге должно получиться так:
Код Код <td style="width: 100%;" class="catsTd" id="cid16" valign="top"><a href="http://likbezz.ucoz.ru/load/16" class="catName">Работа с файлами</a> <span class="catNumData" style="unicode-bidi: embed;">[2]</span><div class="catDescr">Работа с файлами</div></td> выдает нам ссылку с текстом "работа с файлами" отправляющую по адресу "http://likbezz.ucoz.ru/load/16".
Это видно, если посмотреть исходный текст выделенного фрагмента из FF.
Для того что бы код подходил ко всем категориям и ко всем альбомам, нужно заменить a href="http://likbezz.ucoz.ru/load/16" на $какой то URL$, "Работа с файлами" на $какой то Name$ и т.д. и вставить это в шаблон страницы со списком категорий. Так вот, какие переменные нужно использовать?
Но лично я, пока, не вижу того чего нельзя было сделать стилями .. Стилями можно было бы, но есть ведь еще и модуль "статьи" и "блог" и еще всякие, к которым нельзя использовать наши превьюшки, так как в них фоток нет. А в шаблоне мы сможем задать отдельный код вместо $categories$ используя оператор <?if module_name=photo ?> то выводим наш код, в противном случае, оставляем обычный вид $categories$.
Сообщение отредактировал levin - Среда, 09.01.2013, 22:45 |
|
[8] likbezz [10.01.2013, 00:15] |
levin, Так вот, какие переменные нужно использовать? Таких переменных нет, код генерится автоматически и полностью.
Стилями можно было бы, но есть ведь еще и модуль "статьи" и "блог" и еще всякие, к которым нельзя использовать наши - Запакуй $CATEG0RIES$ в блок, через операторы, и пиши стили относительно. Или вообще - подключай их только в фотоальбомах. Через операторы решается. ...
Так, мы пытаемся разобрать исходник $CATEGORIES$, дабы добавить превью фотографии. В итоге должно получиться так: - Реально. |
|
[9] levin [11.01.2013, 11:24] |
Так как надо стили прописать то ? или мы здесь только наполнением форума занимаемся? |
|
[10] likbezz [11.01.2013, 14:16] |
levin, Так как надо стили прописать то ? Вы ни разу не писали стили относительно элемента? Рассказываю: Стили можно писать относительно родительского элемента, например: Все ссылки внутри блоков - элементов div - будут красные, остальные - как обычно.
Из этого следует: Код <div id="mod_$MODULE_ID$">$CATEG0RIES$</div> Который, в модуле Фотоальбомы будет иметь уникальный родительский элемент с ID == mod_photo Есть сомнения?
Далее, из это же, следует, что код, выводимый этой конструкцией, будет иметь примерный вид: Код <div id="mod_photo"> <table class="catsTable" border="0" cellpadding="0" cellspacing="1" width="100%"><tbody><tr><td style="width: 100%;" class="catsTd" id="cid3" valign="top"><a href="http://likbezz.ru/photo/not_sorted/3" class="catName">Прочее, не сортировано</a> <span class="catNumData" style="unicode-bidi: embed;">[1]</span></td></tr><tr><td style="width: 100%;" class="catsTd" id="cid5" valign="top"><a href="http://likbezz.ru/photo/video/5" class="catName">Прикольное видео</a> <span class="catNumData" style="unicode-bidi: embed;">[8]</span><div class="catDescr">Прикольное видео</div></td></tr><tr><td style="width: 100%;" class="catsTd" id="cid7" valign="top"><a href="http://likbezz.ru/photo/photo/7" class="catName">Фотки, разные</a> <span class="catNumData" style="unicode-bidi: embed;">[482]</span></td></tr></tbody></table> </div>
А из этого следует, что стили написанные вот так: Код #mod_photo table.catsTable{ /* ваши стили */ } #mod_photo tr{ /* ваши стили */ } #mod_photo td{ /* ваши стили */ } #mod_photo span.catNumData,#mod_photo div.catDescr{ /* ваши стили */ } Будут работать ТОЛЬКО в модуле фотоальбома, так как в остальных модулях НЕТ элемента с ID == mod_photo и только для элементов в этом блоке .. а их там немного..
В Новостях ID блока будет == mod_news, в каталоге файлов: mod_load ...
Кроме того, если уж это вам кажется слишком сложным, можно прописать проще: Код <?if($MODULE_ID$=='photo')?> <style type="text/css"> /* Ваши стили для отображения категорий */ </style> <?endif?>
Из чего примерно получаем (в зависимости от прописанных стилей):
...
или мы здесь только наполнением форума занимаемся? Конкретно вы? - заполнением форума вопросами. Ни на один, никому вы еще не ответили.
А вы, собственно, как хотите? - получить все готовое не пошевелив ни одной извилиной? Ну так и напишите: Нужен готовый код, думать не хочу и не умею. Будет хотя бы честно .. и тогда, возможно, получите искомое. ..
Ну что, пишем следующий вопрос? Подсказать? “Так какие стили прописать то .. я не могу понять?..”
|
|
[11] levin [23.01.2013, 20:38] |
Ок. Извиняюсь за бестактность. Нет возможности посвящать изучению ucoz`а столько времени, сколько хотелось бы. Вот и приходится искать легкие пути. Я понял что нужно прописать отдельные стили для категорий, это самый верный вариант. Информер не подходит, так как в моем случае нужно превью и для разделов и для категорий (не напасешься информеров и условных операторов).
Насколько я могу понять, код должен выглядеть примерно так:
<?if($MODULE_ID$=='photo')?> <style type="text/css"> td#cid$NUMBER$.catsTd /* данная строка как я понял указывает на ячейку в которую вписано название категории */ {width: 100px; height: 100px; background:url('www.имя_сайта.ru/_ph/$SID$/и вот как указать картинку то нужную???' ) /* или как то нужно использовать $CATEGORY_URL$ , но этого кажется будет недостаточно, так как нам нужно добраться до файла картинки. */ } </style> <?endif?>
А вот что делает catDescr, не пойму.
Сообщение отредактировал levin - Среда, 23.01.2013, 20:53 |
|
[12] likbezz [23.01.2013, 21:19] |
levin, Вот и приходится искать легкие пути. Легкие пути чаще всего самые длинные )
Конечно не подходит ) их слишком мало что бы так бестолково расходовать.
Насколько я могу понять, код должен выглядеть примерно так: Пример же выше. Вот так: Код <?if($MODULE_ID$=='photo')?> <style type="text/css"> #mod_photo table.catsTable{display:block;border-collapse:collapse;border-spacing:0;} #mod_photo tr{ /* ваши стили */ } #mod_photo td{background-repeat:no-repeat;background-position:center 5px;text-align:center;} #mod_photo span.catNumData,#mod_photo div.catDescr{ /* ваши стили */ } /* Это общие стили - ширина, отступы и тп */
/* А это стили с картинками, для каждой категории */ #cid1{background-image:url(http://likbezz.ru/_ph/1/1/580887678.jpg);} #cid2{background-image:url(http://likbezz.ru/_ph/2/1/470000414.jpg);} #cid3{background-image:url(http://likbezz.ru/_ph/1/1/998589752.jpg);} #cid4{background-image:url(http://likbezz.ru/_ph/4/1/72476268.jpg);} #cid5{background-image:url(http://likbezz.ru/_ph/1/1/524891120.jpg);} #cid7{background-image:url(http://likbezz.ru/_ph/1/1/529445079.jpg);} </style> <?endif?>
background:url('www.имя_сайта.ru/_ph/$SID$/и вот как указать картинку то нужную???' ) А какую надо? Указывать просто - ссылку на картинку. можно статичную - любую. Я взял ссылку на первую из категории. Руками, а не кодом, и добавил.
так как нам нужно добраться до файла картинки А зачем вам, собственно, добираться до картинки? Обычно, для этих целей, используют статичную тематическую картинку, а не случайную или первую из категории. Не вижу смысла в этом.
А вот что делает catDescr, не пойму. В этот блок выводится описание категории, если есть. Обычно его скрывают. |
|
[13] levin [23.01.2013, 23:16] |
likbezz, Проработал код, получилось!!! Немного подправил юзабилити, а в основном все так и оставил. Честно говоря не совсем понял отдельные элементы, но в целом отлично получилось!!! Поставил так:
Код <?if($MODULE_ID$=='photo')?> <style type="text/css"> #mod_photo table.catsTable{display:block;border-collapse:collapse;border-spacing:0;} #mod_photo tr{ } #mod_photo td{background-repeat:no-repeat;background-position:center 5px;text-align:center;} #mod_photo span.catNumData,#mod_photo div.catDescr{ } .catsTd { height: 150px; padding: 140px 0px 0px 0px; text-align:center; } .catname {font: 16px 'Tahoma','Arial';} /* Это общие стили - ширина, отступы и тп */
/* А это стили с картинками, для каждой категории */ #mod_photo td{} #cid5 {background: url("/_ph/5/2/301115797.jpg") no-repeat scroll 0% 0% / 150px 130px transparent; background-position:top center} </style> <?endif?> Думаю теперь, как сделать бэкграунд активной ссылкой по адресу что и catName, для этого надо его заключить в div, но вот до него добраться видимо не получится. В любом случае спасибо. Очень помог, я потратил почти 4 часа, но все же разобрался!
БЛИН! Обажаю интернет эксплорер, он проигнорировал мое указание на размер бэкграунда и поля padding и вывел фоту на всю ширину ячейки!!!
Сообщение отредактировал levin - Среда, 23.01.2013, 23:36 |
|
[14] likbezz [24.01.2013, 12:53] |
levin, Думаю теперь, как сделать бэкграунд активной ссылкой по адресу что и catName, для этого надо его заключить в div, но вот до него добраться видимо не получится. .. А зачем делать фон ссылкой .. если можно присвоить ссылке фон .. Не ищите сложных путей - они вас сами найдут.
Код #mod_photo a{display:block;background-repeat:no-repeat;background-position:center 7px;padding-top:147px;} #cid1 a{background-image:url(http://likbezz.ru/_ph/1/1/580887678.jpg);}
...
Обажаю интернет эксплорер, он проигнорировал мое указание на размер бэкграунда и поля padding и вывел фоту на всю ширину ячейки!!! А уменьшить фотку до нужного размера не приходило в голову? ...
|
|
[15] levin [28.01.2013, 22:56] |
Я вернулся, не прошло и двух недель :-). Вот об этом я говорил, когда сетовал на нехватку времени :-) А уменьшить фотку до нужного размера не приходило в голову? Да, так и сделал, точнее я не уменьшал фотки, а взял ссылку с миниатюры, которая делается Юкозом при загрузке фотографий и помещается в превью.
.. А зачем делать фон ссылкой .. если можно присвоить ссылке фон .. Не получается присвоить ссылке фон. Точнее получается, но не задаются размеры. Как только вставляем "#cid1 a{...", фон сжимается в a.catName и ограничивается размером текста и отказывается расширяться :-((
[/color] |
|