Question

Доброй ночи.
Скажите как мне это исправить?
В каталоге файлов хочу чтоб отображалась небольшая обложка каждого файла типа 50х50,чтоб люди видели ее до того как кликнуть на саму новость.
И еще чтоб при загрузке обложки к материалу в "файлах" бил заданный размер типа 300х300обложки а не на вес экран.
Спасибо

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

 

Answer 1

Проверили ваш сайт. Проблема связана с некорректно составленным HTML-кодом для вывода изображения. Для скриншота в модуле «Каталог файлов» используется системная переменная $SCREEN_URL$.

Чтобы в списке материалов отображалась небольшая обложка размером 50×50 px, перейдите:

Дизайн → Редактор → Каталог файлов → Вид материалов

и используйте, например, такой код:

 <?if($SCREEN_URL$)?><a href="$ENTRY_URL$"><img src="$SCREEN_URL$" alt="$TITLE$" style="width:50px;height:50px;object-fit:cover;"></a><?endif?> 

Для страницы самого материала перейдите:

Дизайн → Редактор → Каталог файлов → Страница материала и комментариев к нему

и для отображения обложки размером 300×300 px используйте:

 <?if($SCREEN_URL$)?><img src="$SCREEN_URL$" alt="$TITLE$" style="width:300px;height:300px;object-fit:cover;"><?endif?> 

Параметр object-fit:cover сохраняет пропорции изображения и заполняет заданную область. Если исходная картинка имеет другие пропорции, лишняя часть изображения при этом будет обрезана.

Обратите внимание: размер изображения в шаблоне регулируется средствами HTML/CSS. В вашем текущем варианте атрибуты width и height размещены некорректно относительно тега <img>, поэтому код и выводится на странице неправильно.

Comments

Спасибо огромное!

---

Ещё,не могли бы подсказать в какие строчки вставлять это? Ато я что то потерялся

---

Вот мой код Каталог файлов-Вид материалов

 

 

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">

<?if($MODER_PANEL$)?><div style="float:inline-end">$MODER_PANEL$</div><?endif?>

<div class="eTitle" style="text-align:start;"><a href="$ENTRY_URL$">$TITLE$</a></div>

<?if($MESSAGE$)?><div class="eMessage" style="text-align:start;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?>

<div class="eDetails" style="clear:both;">

<?if($RATING$)?><div class="rate-stars-wrapper" style="float:inline-end"><?$RSTARS$('16','/.s/t/1816/rating_16.png','0','float')?></div><?endif?>

<?if($CATEGORY_NAME$)?><a class="e-category" href="$CATEGORY_URL$">$CATEGORY_NAME$</a><span class="ed-sep"> | </span><?endif?>

<span class="e-reads"><span class="ed-title">Просмотров:</span> <span class="ed-value">$READS$</span></span><span class="ed-sep"> | </span>

<span class="e-loads"><span class="ed-title">Загрузок:</span> <span class="ed-value">$LOADS$</span></span><span class="ed-sep"> | </span>

<?if($USERNAME$)?><span class="e-author"><span class="ed-title">Добавил:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USERNAME$</a></span></span><span class="ed-sep"> | </span><?endif?>

<span class="e-date"><span class="ed-title">Дата:</span> <span class="ed-value" title="$TIME$">$DATE$</span></span>

<?if($COMMENTS_URL$)?><span class="ed-sep"> | </span><a class="e-comments" href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>

</div>

</td></tr></table><br />

 

 

---

Paul Bychik,

В вашем шаблоне «Каталог файлов → Вид материалов» код обложки необходимо вставить сразу после строки с названием материала:

 <div class="eTitle" style="text-align:start;"><a href="$ENTRY_URL$">$TITLE$</a></div> 

То есть этот участок шаблона должен выглядеть так:

 <div class="eTitle" style="text-align:start;"><a href="$ENTRY_URL$">$TITLE$</a></div>  <?if($SCREEN_URL$)?> <div style="margin:6px 0 8px 0;">     <a href="$ENTRY_URL$">         <img src="$SCREEN_URL$" alt="$TITLE$" style="width:50px;height:50px;object-fit:cover;display:block;">     </a> </div> <?endif?>  <?if($MESSAGE$)?><div class="eMessage" style="text-align:start;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?> 

То есть в вашем полном шаблоне начало будет таким:

 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">  <?if($MODER_PANEL$)?><div style="float:inline-end">$MODER_PANEL$</div><?endif?>  <div class="eTitle" style="text-align:start;"><a href="$ENTRY_URL$">$TITLE$</a></div>  <?if($SCREEN_URL$)?> <div style="margin:6px 0 8px 0;">     <a href="$ENTRY_URL$">         <img src="$SCREEN_URL$" alt="$TITLE$" style="width:50px;height:50px;object-fit:cover;display:block;">     </a> </div> <?endif?>  <?if($MESSAGE$)?><div class="eMessage" style="text-align:start;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?>  <div class="eDetails" style="clear:both;"> 

Остальную часть вашего шаблона изменять не нужно.

Для самой страницы материала откройте:

Дизайн → Редактор → Каталог файлов → Страница материала и комментариев к нему

Найдите там вывод $SCREEN_URL$ и вместо текущего вывода изображения используйте:

 <?if($SCREEN_URL$)?> <a href="$SCREEN_URL$" target="_blank">     <img src="$SCREEN_URL$" alt="$TITLE$" style="width:300px;height:300px;object-fit:cover;"> </a> <?endif?> 

В результате:

• в списке материалов будет обложка 50×50 px;

• на странице самого материала — 300×300 px;

• при нажатии на маленькую обложку пользователь перейдёт к самому материалу;

• при нажатии на большую обложку откроется оригинальное изображение.

Если исходная картинка не квадратная, object-fit:cover аккуратно обрежет лишнее, чтобы она не растягивалась.

---

Вставил в Каталог файлов - вид материала ,как вы написали. ничего не изменилось

 

 

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
 <?if($MODER_PANEL$)?><div style="float:inline-end">$MODER_PANEL$</div><?endif?>
  <div class="eTitle" style="text-align:start;"><a href="$ENTRY_URL$">$TITLE$</a></div>  <?if($SCREEN_URL$)?> <div style="margin:6px 0 8px 0;">
   <a href="$ENTRY_URL$"><img src="$SCREEN_URL$" alt="$TITLE$" style="width:50px;height:50px;object-fit:cover;display:block;"></a> 
 </div> <?endif?>  <?if($MESSAGE$)?>
  <div class="eMessage" style="text-align:start;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?> 
 <div class="eDetails" style="clear:both;">
 <?if($RATING$)?><div class="rate-stars-wrapper" style="float:inline-end"><?$RSTARS$('16','/.s/t/1816/rating_16.png','0','float')?></div><?endif?>
 <?if($CATEGORY_NAME$)?><a class="e-category" href="$CATEGORY_URL$">$CATEGORY_NAME$</a><span class="ed-sep"> | </span><?endif?>
</span> <?if($FILE_URL$)?><span class="entry-download-item entry-download-site"><a href="$FILE_URL$"><!--<s5223>-->Слушать/Скачать с сервера<!--</s>--></a><br><span class="e-reads"><span class="ed-title">Просмотров:</span> <span class="ed-value">$READS$</span></span><span class="ed-sep"> |<?endif?> </span>
<span class="e-loads"><span class="ed-title">Загрузок:</span> <span class="ed-value">$LOADS$</span></span><span class="ed-sep"> | </span>
 <?if($USERNAME$)?><span class="e-author"><span class="ed-title">Добавил:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USERNAME$</a></span></span><span class="ed-sep"> | </span><?endif?>
 <span class="e-date"><span class="ed-title">Дата:</span> <span class="ed-value" title="$TIME$">$DATE$</span></span>
 <?if($COMMENTS_URL$)?><span class="ed-sep"> | </span><a class="e-comments" href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>
 </div>
 </td></tr></table><br />

 

ТА же история и в КАталоге файлов-страница материала и коментариев к нему.
А в стилях css,не нужно ничего менять

---

Paul Bychik,

В каталоге файлов вам добавили в вид материалов:

<?if($COVER_IMAGE$)?><a href="$COVER_URL$" class="ulightbox"><img src="$COVER_SMALL_URL$" alt="$TITLE$" /></a><?endif?>

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