Персональное изображение для темы

Как сделать вот так для каждой темы:


Я честно говорю - сначала искала в гугле) Но нашла только некоторые сайты, где описывалось как так сделать... Вот даю ссылки, может вам они помогут в решении моего вопроса:
Ссылка 1
Ссылка 2

Ещё очень хотелось бы, чтобы только на определённые разделы, хотя если такого не сделать... я и на это согласна)

BB2

Там решение через php — для нас это не вариант, к сожалению.

Я делала через CSS:

Dana Domirani, безумно буду рада и такому варианту
А как так сделать?

Извините, не успела дописать. Есть несколько минусов, о них предупрежу сразу:
- все картинки придется добавлять Вам, админу, вручную (но это даст возможность контролировать качество и размер иконок)
- если рецептов будет много, то CSS в конце концов закончится, и придется подключать внешнюю (т.е. искать сторонний сайт для хранения файла .css
- список тем будет существенно притормаживать, если не ограничить вывод по 10 тем на страницу

Если подождете, я сегодня проверю еще один способ реализации (хочу попробовать скриптом извлекать ссылку на картинку из описания темы и превращать в иконку). Если не получится — распишу предыдущий громоздкий способ.

Получилось. Инструкция такова:

1) Ставить персональную иконку каждой теме будем через функцию описания темы. Предварительно ее надо включить в ПА > Общие > Сообщения и E-mail — Конфигурация > Показывать описание тем : Да
Внимание: добавлять туда какой-либо текст описания будет нельзя! Только прямую ссылку на фото!

2) Чтобы не было путаницы при создании тем, переименуем поле "Описание" в "Фото темы". Для этого в разделе Шаблоны > Запостить & Личные сообщения > шаблоне posting_body (Страница отправки сообщений) находим фрагмент

Код:

      <!-- BEGIN switch_description -->
      <tr>
      <td class="row1" width="22%"><span class="gen"><b>{L_DESCRIPTION}</b></span></td>
      <td class="row2" width="78%">
         <span class="gen">
            <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
         </span>
      </td>
      </tr>
      <!-- END switch_description -->

и меняем его на

Код:

      <!-- BEGIN switch_description -->
      <tr class="addtopimg">
      <td class="row1" width="22%"><span class="gen"><b>Мини-фото к теме</b></span></td>
      <td class="row2" width="78%">
         <span class="gen">
            <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="1000" onkeypress="if (event.keyCode==13){return false}" />
                  </span><br /><span class="gen">Внимание! Ставьте только прямую ссылку на файл!</span>
      </td>
      </tr>
      <!-- END switch_description -->

Сохраняем, публикуем (!).
Результат:


3) В разделе Шаблоны > Общие > topics_list_box (Показ тем) находим фрагмент

Код:

<td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

и меняем на

Код:

<td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
                  <table border="0" class="temtab"><tr>
                    <td><!-- BEGIN switch_description --><img src={topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} class="temico" alt="Иллюстрация к рецепту" /><!-- END switch_description --></td>
                    <td><div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
<h2 class="topic-title">
 <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
</div>
<br /><span class="gensmall">{topics_list_box.row.TOPIC_TYPE}</span><br />                    
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span></td>
                   </tr></table>
      </td>

Сохраняем, публикуем.

4) В CSS ставим настройки для выравнивания содержимого ячеек и оформления мини-фото тем:

Код:

.temico {
width: 90px;
height: auto;
border: 2px solid #fff;
margin: 1px 2px 2px 1px;
-moz-box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
-webkit-box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
}

.temtab td {
vertical-align: top;
text-align: left;
}

Сохраняем.
width: 90px — максимальная ширина изображения
height: auto — автоматически подбираемая высота изображения

5) По желанию: можно скрыть поле добавления картинки темы от простых пользователей.
Для этого создайте виджет с правами доступа для всех, кроме админа, и вставьте в него код:

Код:

<style type="text/css">
tr.addtopimg {display: none;}
</style>

Сохраните, добавьте в активированную колонку на форуме.


Все. Можно попробовать создать/отредактировать тему и добавить в соответствующее поле ссылку на фото — а потом посмотреть результат в списке тем:

Dana Domirani, ооооо спасибо огромадное, шикарно просто!!! Сейчас буду устанавливать!!!)) Очень нравится!!!!

Dana Domirani, Безумно нравится!!! Уже установила и опробовала, нравится что у тех тем, у которых нет изображения - нету незаполненного пространства!!! Короче я радуюсь что теперь можно будет отшлифовать все выложенные уроки фотошопа и многие другие темы форума!

Спасибо вам огромаднейшее

Очень рада, что понравилось!