Задать нужные размеры картинкам в полной краткой новости

Сделать красивый вывод новостей с картинками одного размера, опрятным и интересным видом с возможностью автоматического изменения размера как например с размерами: 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 задать нужные размеры картинкам в полной краткой новости скачать

zadat-nuzhnye-razmery-kartinkam-v-polnoy-kratkoy-novosti.zip [16,33 Kb] (cкачиваний: 144)