Фильтр по:
  

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как привязать к каждой категории каталога свою картинку? (По меню $CATEG0RIES$)
Как привязать к каждой категории каталога свою картинку?
Дата: Воскресенье, 05.09.2010, 17:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


© Автор: Roland-Hyper, Оригинал поста,

Здравствуйте. Подскажите пожалуйста можно ли привязать к каждой категории каталога свою картинку, так чтобы при вставке кода $CATEGORIES$ над названием каждой категории была соответствующая картинка.
Категорий очень много, вручную всё это делать неудобно. Может есть какой то метод типа Image$CID$.jpg только для $CATEGORIES$. Чтоб залить все картинки пронумерованные по ID категории и они сами подставились...

Upd: Нашёл решение через информеры. Но информеры тоже нужно вставлять хоть конечно и меньше работы.
Можно ли как то сделать тоже самое без участия информеров?

 
Дата: Воскресенье, 05.09.2010, 17:36 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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$ - наверняка есть и более красивые и правильные решения.

Факт, в том, что нет готового решения подходящего кому либо на сто процентов.
И у любого решения есть свои плюсы и минусы.
Какое подойдет вам - решать только вам.


 
Дата: Вторник, 08.01.2013, 22:54 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


likbezz, А можешь прописать для фотоальбома исходник $CATEGORIES$, не просто скопировав исходный код, а оставив там теги $????$, что бы код получился универсальным???

 
Дата: Вторник, 08.01.2013, 23:44 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


levin,
Цитата (levin, Вт, 08.01.2013, 22:54:45)
А можешь ...

..а зачем?..


 
Дата: Среда, 09.01.2013, 21:05 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Вт, 08.01.2013, 23:44:15)
..а зачем?..

я не могу понять. Вышеописанный код подходит если вручную прописывать категории фотоальбома на отдельно созданной странице. Но если на сайте много категорий и альбомов, его невозможно применить для вставки в шаблон "страницы со списком фотографий раздела" или в шаблон страницы со списком фотографий альбома!
Получается что нужно разместить код который будет работать на всех страницах фотоальбома, что бы категории раздела (разделы и альбомы) отображались в виде заглавной фотки и названия под ней.
Может есть какой вариант для реализации, но я до этого додумать не могу. Туп. wacko


 
Дата: Среда, 09.01.2013, 21:35 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


levin,
Цитата (levin, Ср, 09.01.2013, 21:05:16)
я не могу понять. Вышеописанный код подходит если вручную прописывать категории фотоальбома на отдельно созданной

Из чего это следует?

Цитата (levin, Ср, 09.01.2013, 21:05:16)
Может есть какой вариант для реализации, но я до этого додумать не могу. Туп.

Есть - через стили.
О чем и говорится выше:
Цитата (likbezz, Вс, 05.09.2010, 17:36:35)
Вариант три:
Прописать каждой ячейки с ID - фоновую картинку. и поместить соответствующие стили в соответствующий шаблон. А ссылкам - отступ слева назначить.


Вариант 4:
Произвести все нужные изменения скриптом, если это необходимо.
Например добавить картинку или еще что..

Но лично я, пока, не вижу того чего нельзя было сделать стилями ..


 
Дата: Среда, 09.01.2013, 22:32 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Ср, 09.01.2013, 21:35:59)
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$ и т.д. и вставить это в шаблон страницы со списком категорий.
Так вот, какие переменные нужно использовать?

Цитата (likbezz, Ср, 09.01.2013, 21:35:59)
Но лично я, пока, не вижу того чего нельзя было сделать стилями ..

Стилями можно было бы, но есть ведь еще и модуль "статьи" и "блог" и еще всякие, к которым нельзя использовать наши превьюшки, так как в них фоток нет. А в шаблоне мы сможем задать отдельный код вместо $categories$ используя оператор <?if module_name=photo ?> то выводим наш код, в противном случае, оставляем обычный вид $categories$.

Прикрепления: 0025110.jpg (15.8 Kb)

Сообщение отредактировал levin - Среда, 09.01.2013, 22:45
 
Дата: Четверг, 10.01.2013, 00:15 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


levin,
Цитата (levin, Ср, 09.01.2013, 22:32:32)
Так вот, какие переменные нужно использовать?

Таких переменных нет, код генерится автоматически и полностью.

Цитата (levin, Ср, 09.01.2013, 22:32:32)
Стилями можно было бы, но есть ведь еще и модуль "статьи" и "блог" и еще всякие, к которым нельзя использовать наши

- Запакуй $CATEG0RIES$ в блок, через операторы, и пиши стили относительно.
Или вообще - подключай их только в фотоальбомах.
Через операторы решается.
...

Цитата (levin, Ср, 09.01.2013, 22:32:32)
Так, мы пытаемся разобрать исходник $CATEGORIES$, дабы добавить превью фотографии.
В итоге должно получиться так:

- Реально.


 
Дата: Пятница, 11.01.2013, 11:24 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


Цитата (likbezz, Чт, 10.01.2013, 00:15:44)
пиши стили относительно

Так как надо стили прописать то ?
или мы здесь только наполнением форума занимаемся?


 
Дата: Пятница, 11.01.2013, 14:16 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


levin,
Цитата (levin, Пт, 11.01.2013, 11:24:59)
Так как надо стили прописать то ?

Вы ни разу не писали стили относительно элемента?
Рассказываю:
Стили можно писать относительно родительского элемента, например:
Код
div a{color:#F00;}

Все ссылки внутри блоков - элементов 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?>


Из чего примерно получаем (в зависимости от прописанных стилей):


...

Цитата (levin, Пт, 11.01.2013, 11:24:59)
или мы здесь только наполнением форума занимаемся?

Конкретно вы? - заполнением форума вопросами.
Ни на один, никому вы еще не ответили.

А вы, собственно, как хотите? - получить все готовое не пошевелив ни одной извилиной?
Ну так и напишите: Нужен готовый код, думать не хочу и не умею.
Будет хотя бы честно .. и тогда, возможно, получите искомое.
..

Ну что, пишем следующий вопрос?
Подсказать? “Так какие стили прописать то .. я не могу понять?..”

Прикрепления: 1731339.png (90.2 Kb)

 
Дата: Среда, 23.01.2013, 20:38 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


Ок. Извиняюсь за бестактность. Нет возможности посвящать изучению 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
 
Дата: Среда, 23.01.2013, 21:19 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


levin,
Цитата (levin, Ср, 23.01.2013, 20:38:16)
Вот и приходится искать легкие пути.

Легкие пути чаще всего самые длинные )

Цитата (levin, Ср, 23.01.2013, 20:38:16)
Информер не подходит

Конечно не подходит ) их слишком мало что бы так бестолково расходовать.

Цитата (levin, Ср, 23.01.2013, 20:38:16)
Насколько я могу понять, код должен выглядеть примерно так:

Пример же выше.
Вот так:
Код
<?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?>


Цитата (levin, Ср, 23.01.2013, 20:38:16)
background:url('www.имя_сайта.ru/_ph/$SID$/и вот как указать картинку то нужную???' )

А какую надо?
Указывать просто - ссылку на картинку.
можно статичную - любую.
Я взял ссылку на первую из категории.
Руками, а не кодом, и добавил.

Цитата (levin, Ср, 23.01.2013, 20:38:16)
так как нам нужно добраться до файла картинки

А зачем вам, собственно, добираться до картинки?
Обычно, для этих целей, используют статичную тематическую картинку, а не случайную или первую из категории.
Не вижу смысла в этом.

Цитата (levin, Ср, 23.01.2013, 20:38:16)
А вот что делает catDescr, не пойму.

В этот блок выводится описание категории, если есть.
Обычно его скрывают.


 
Дата: Среда, 23.01.2013, 23:16 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


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
 
Дата: Четверг, 24.01.2013, 12:53 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


levin,
Цитата (levin, Ср, 23.01.2013, 23:16:57)
Думаю теперь, как сделать бэкграунд активной ссылкой по адресу что и 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);}



...

Цитата (levin, Ср, 23.01.2013, 23:16:57)
Обажаю интернет эксплорер, он проигнорировал мое указание на размер бэкграунда и поля padding и вывел фоту на всю ширину ячейки!!!

А уменьшить фотку до нужного размера не приходило в голову?
...

Прикрепления: 7367509.png (73.6 Kb)

 
Дата: Понедельник, 28.01.2013, 22:56 |
levin
Рядовой
Группа: Зарегистрированные
Сообщений: 8
Награды: 0
Репутация: 0
Статус: Offline


Я вернулся, не прошло и двух недель :-). Вот об этом я говорил, когда сетовал на нехватку времени :-)
Цитата (likbezz, Чт, 24.01.2013, 12:53:42)
А уменьшить фотку до нужного размера не приходило в голову?

Да, так и сделал, точнее я не уменьшал фотки, а взял ссылку с миниатюры, которая делается Юкозом при загрузке фотографий и помещается в превью.

Цитата (likbezz, Чт, 24.01.2013, 12:53:42)
.. А зачем делать фон ссылкой .. если можно присвоить ссылке фон ..

Не получается присвоить ссылке фон. Точнее получается, но не задаются размеры. Как только вставляем "#cid1 a{...", фон сжимается в a.catName и ограничивается размером текста и отказывается расширяться :-((

[/color]


 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как привязать к каждой категории каталога свою картинку? (По меню $CATEG0RIES$)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия