Сделать красивый вывод новостей с картинками одного размера, опрятным и интересным видом с возможностью автоматического изменения размера как например с размерами: shortstory-150x200; fullstory-300x420; можно с помощью данного dle хака. Вывод картинок будет одного размера, а не маленькая в первой новости, большая во второй, в другой средняя и т.д.
Задать нужные размеры картинкам в полной краткой новости
Установка:
1. Открываем shortstory.tpl выбранного шаблона.
Внимание у шаблона может быть разное название класс стилей , главное что бы класс DIV идет до тега {short-story}
Нам нужны вот эти строки например :
<div class="content clear"><h1 class="title_h">[full-link]{title}[/full-link] {approve}</h1>{short-story}[edit-date]Здесь мы видим, что тег "{short-story}" управляется с помощью класса
<div class="content clear" /> Значит нам нужен css стиль "content". Открываем блокнот и ищем нужный блок настроек стилей.
2. Заходим в css и ищем стили с content.
Вот что нам нужно:
.#shortstory .content { padding-bottom: 1em; }#shortstory .content img {margin-right: 1em;margin-bottom: 0.5em;}Теперь нам надо добавить стиль картинки к этому блоку.
Ниже добавляем:
#shortstory .content img:first-child {display: block !important;float: left;width: 150px; /* здесь размер ширины изображения в краткой новости. */height: 200px; /* Здесь размер высоты изображения в краткой новости. */}У нас должно получиться:
#shortstory .content { padding-bottom: 1em; }#shortstory .content img {margin-right: 1em;margin-bottom: 0.5em;}#shortstory .content img:first-child {display: block !important;float: left;width: 150px; /* здесь размер ширины изображения в краткой новости. */height: 200px; /* Здесь размер высоты изображения в краткой новости. */}3. Смотрим картинки в краткий новостях. Они автоматически уменьшаются до выбранной высоты и ширины в CSS благодаря стиле
#shortstory .content img:first-child. Откроем полную новости, если не чего не изменилось значит там идут другие стили можно добавить этот же стиль и у вас будут картинки одинаковы в краткой и полной новости.
1. Смотрим код полной новости full-story.tpl ключевое слово {full-story}, до него идет класс CSS ( div ) , который нас интересует
<div class="content clear">{full-story}{pages}</div>2. Тег {full-story} заключаем в
<div class="content_full"></div>У нас должно получиться следующие:
<div class="content clear"><div class="content_full">{full-story}</div>{pages}</div>Теперь в CSS ниже нашего #shortstory .content img:first-child добавляем:
#shortstory .content_full img:first-child {display: block !important;float: left;width: 300px; /* здесь размер ширины изображения в краткой новости. */height: 420px; /* Здесь размер высоты изображения в краткой новости. */}У нас должно получиться следующие:
#shortstory .content { padding-bottom: 1em; }#shortstory .content img {margin-right: 1em;margin-bottom: 0.5em;}#shortstory .content img:first-child {display: block !important;float: left;width: 150px; /* здесь размер ширины изображения в краткой новости. */height: 200px; /* Здесь размер высоты изображения в краткой новости. */}#shortstory .content_full img:first-child {display: block !important;float: left;width: 300px; /* здесь размер ширины изображения в краткой новости. */height: 420px; /* Здесь размер высоты изображения в краткой новости. */}Вот собственно и все.
Использовано в хаке.
Идея CSR. Шаблон protube (2 версия). CSS коды.
Написал статью Nimor.
Версия дле 9.2, 9.3, 9.4
Наш https://dle9.com/ веб-портал советуем хак DLE задать нужные размеры картинкам в полной краткой новости скачать
