srcset для PHPBB3 и экранов повышенного разрешения

Полезные скрипты
Ответить
Аватара пользователя
mihas
Администратор
Сообщения: 1368
Зарегистрирован: 18 авг 2004, 16:58
Откуда: Москва
Контактная информация:

srcset для PHPBB3 и экранов повышенного разрешения

Сообщение mihas »

Сделать превьюшки более высокого разрешения для экранов повышенного разрешения не сложно с помощью тега srcset.
Берем файл стиля \template\attachment.html и находим в нем блок <!-- IF _file.S_THUMBNAIL -->. У меня блок целиком выглядит так:

Код: Выделить всё

		<!-- IF _file.S_THUMBNAIL -->
			<a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" class="postimage" alt="[ attachment ]" title="" /></a><br />
			{_file.DOWNLOAD_NAME} [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]
		<!-- ENDIF -->
дописываем немного для тега img дополнительной информации: width="320px" srcset="{_file.U_DOWNLOAD_LINK} 2x"
Теперь весь блок выглядит так:

Код: Выделить всё

		<!-- IF _file.S_THUMBNAIL -->
			<a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" class="postimage" alt="[ attachment ]" title="" width="320px" srcset="{_file.U_DOWNLOAD_LINK} 2x" /></a><br />
			{_file.DOWNLOAD_NAME} [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]
		<!-- ENDIF -->
Изображение
Теперь на продвинутых экранах с супермелким пикселем будет подгружаться на место превью все оригинальное изображение. Для современных мониторов и смартфонов это важно, мыльные превьюшки на современных устройствах выглядят не очень хорошо. Для устаревших экранов низкого разрешения изображение 2х из тега srcset подгружено не будет.
Обращаю внимание, что width="320px" равен у меня тому же значению ширины превьюшек в разделе настроек вложения в админке, я просто не искал пока эту переменную в базе. Можете найти и переменную подставить вместо "320px", будет еще круче. Кстати такую ширину 320 я долго выбирал под максимально удобный просмотр превью на современных айфонах и смартфонах, несколько лет назад эта величина была у меня меньше на форуме, кажется 240px. Как изменить в форуме PHPBB3 заданную высоту на заданную ширину рассказано по ссылке под картинкой.
Ответить

Вернуться в «PHP»