Вставка изображений в материалы (ДСП)

Источники файлов

На момент написания мануала (16.10.2020), контент-менеджерам доступно четыре источника файлов:

  1. files - файл (этот источник используем для прикрепления pdf-файлов или других приложений - не картинок!!!. При добавлении файлов в корень файлы не кладем, а создаём структуру папок удобную для хранения)
  2. hq-gallery - галерея для ресурсов. Для изображений хорошего качества. Из этой галереи можно вставлять картинки с помощью чанков, о которых будет ниже.
  3. images - Изображения, которые не должны быть в галерее (различная нестндартная спецня, например SVG. При добавлении файлов в корень файлы не кладем, а создаём структуру папок удобную для хранения)
  4. MS2Gallery Images - Галерея изображений для товаров (основной источник файлов для товаров магазина.)

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

Использование этого способа требует особой аккуратности и предусмотрительности. Подразумевается что у пользователя есть опыт и он готов нести ответсвенность )


По умолчанию у ресурсов используется источник файлов MS2Gallery Images. Для товаров и всех старых материалов это так и останется. Для новых материалов (или старых, но у которых мы хотим улучшить качество оформления в лучшую сторону) нужно использовать источник файлов hq-gallery.

Важно! Источник файлов правильно нужно указать перед добавлением первого изображения в галерею. Если изменять потом, то все изображения нужно сперва удалить, а после смены источника файлов - залить заново.

Итак, выбрав изначально источник файлов hq-gallery, добавляем изображение размером не менее fullHD (ширина:1920px;) (Если изображение больше 4K, то оно будет уменьшено до 4K).

Например, справа загружено изображение в высоком качестве

У изображения необходимо заполнить поля "Название", "альтернативное имя", "дополнительно", "описание"

Затем можно использовать сниппет

[[$tpl.ms2Image_for_article?&img=`1`]]

где:

Параметры сниппета

  • &img - номер картинки в галерее
  • &hq - грузить более качественное изображение (по дефолту 0)
  • &showText - показывать название картинки под картинкой (по дефолту 1)

Код вставки изображения справа

<div class="picture picture-right">
	[[$tpl.ms2Image_for_article?&img=`1`]]
</div>

Ниже показано соответствие значений полей, выводимой информации на сайте

Далее рассмотрим все варианты вставки изображения из галереи

Вариант: Обтекание текстом справа или слева

Код вставки изображения

<div class="picture picture-right">
	[[$tpl.ms2Image_for_article?&img=`1`]]
</div>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Код вставки изображения

<div class="picture picture-left light-bg">
	[[$tpl.ms2Image_for_article?&img=`2`]]
</div>

Класс light-bg - нужен для картинок со светлым фоном, чтобы название картинки показывалось более гармонично

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Код вставки изображения

<div class="picture picture-left picture-thin light-bg">
	[[$tpl.ms2Image_for_article?&img=`2`&showText=`0`]]
</div>

Класс picture-thin - нужен для узких картинок, чтобы название картинки показывалось более гармонично

Класс light-bg - нужен для картинок со светлым фоном, чтобы название картинки показывалось более гармонично

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Вариант: без обтекания текстом

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Код вставки изображения

<div class="picture">
	[[$tpl.ms2Image_for_article?&img=`1`]]
</div>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Вариант: без обтекания текстом, на всю ширину

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Код вставки изображения

<div class="picture img-fluid" style="height:auto;width:100%;" >
	[[$tpl.ms2Image_for_article?&img=`1`&hq=`1`]]
</div>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Дополнительно

  • [[+ms2g.1.url]] - ссылка на оригинальную картинку (/assets/img/hq-gallery/1937/bekomatshd.jpg)
  • [[+ms2g.1.small]] - ссылка на одно превью (/assets/img/hq-gallery/1937/small/bekomatshd.jpg)
  • [[+ms2g.1.medium]] - ссылка на другое превью (/assets/img/hq-gallery/1937/medium/bekomatshd.jpg)
  • [[+ms2g.1.large]] - ссылка на другое превью (/assets/img/hq-gallery/1937/large/bekomatshd.jpg)
  • [[+ms2g.1.xxs]] - ссылка на другое превью (/assets/img/hq-gallery/1937/xxs/bekomatshd.jpg)
  • [[+ms2g.1.name]] - название картинки (Три бекомата)
  • [[+ms2g.1.alt]] - альтернативный текст (три красивых конденсатоотводчика - 3 бекомата)
  • [[+ms2g.1.add]] - добавочный текст (Фото 1)
  • [[+ms2g.1.description]] - описание картинки (На фотографии изображено три Бекомата )
  • [[+ms2g.1.file]] - имя файла (bekomatshd.jpg)

+ms2g.1.small

xxs

small

medium

large

url - оригинальная картинка

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quos nobis eos expedita dignissimos soluta magnam consectetur temporibus similique nostrum! Omnis asperiores voluptates dolore quaerat perferendis sed facilis natus eveniet, officia inventore sunt dolorum aperiam porro ipsam doloremque non vitae nisi iusto, sapiente voluptatum aspernatur expedita eaque facere. Molestiae minus, autem labore id vitae ab porro animi alias, inventore voluptatum consectetur quaerat hic quod fuga provident. Ratione alias corporis optio, animi saepe aliquid fugit eligendi quas odio minus? Repellat corrupti impedit aliquam voluptates odio magni iure voluptatum sed hic molestiae, accusantium deleniti dolorum, ipsam dolores sunt ex, quisquam distinctio soluta fugiat voluptate dolor possimus maxime? Fugiat eius quis tempore deleniti minima dignissimos, incidunt aliquam alias. Qui sequi perspiciatis, dolores commodi praesentium sunt assumenda voluptatem molestiae hic. Nostrum, nulla facilis ex maxime voluptate enim rem sit, autem, accusamus ipsam modi. Earum dolore repellat unde iste, esse repudiandae delectus non necessitatibus, ullam quidem, illum laborum voluptatum quisquam aliquid. Cumque aliquam molestiae vitae tempora fugit facilis voluptatum placeat, beatae libero maxime! In vero quasi distinctio explicabo ratione fugiat numquam quidem, illo aliquid placeat officiis repellat? Praesentium inventore excepturi veniam cum hic perspiciatis eius corrupti, numquam unde esse eligendi dolore consequuntur expedita mollitia commodi a natus repellendus magni obcaecati totam rem et eaque. Quia exercitationem quis ipsam blanditiis aperiam ea at velit culpa neque voluptatem illo nemo, explicabo provident repellendus perspiciatis, temporibus architecto officiis placeat consequuntur non facere magnam nam eum. Voluptas quae quaerat obcaecati eveniet qui iure, natus, sequi laudantium alias odit repellat corporis assumenda inventore esse officiis ex saepe, facilis dolores tempore. Officiis, fuga eius qui expedita atque quod optio quasi quas sapiente molestiae ullam, ipsa repellendus! Deleniti itaque quia esse dolor laboriosam porro voluptas quisquam, ducimus quibusdam earum magnam quos aspernatur, autem rerum. Deleniti rem ab voluptate id repellendus maiores. Sint, cupiditate temporibus expedita harum, fuga tempore nesciunt quidem quod, quibusdam illum iusto! Fugiat sit explicabo nemo provident in consequatur modi voluptatum magnam sed obcaecati, cupiditate

Вариант: Вставка видео через проигрыватель

Особенность такого способа, что страница загружается быстрее, превьюшка для видео указывается из галереи

placeat reprehenderit enim ducimus, aspernatur labore ipsum eveniet rem possimus sunt dolor quibusdam atque beatae. Qui aperiam cupiditate in eos culpa hic eum, consequuntur odit illum consequatur magni beatae sint dolor accusantium adipisci! Voluptatem at beatae ipsum tenetur aliquid inventore vel harum iure exercitationem repudiandae? Ipsa dolorum perspiciatis deleniti totam velit blanditiis dolor inventore eaque exercitationem excepturi? Molestias delectus autem eos quas? Soluta quas voluptatem, a magnam nisi eaque explicabo? Consequatur blanditiis non fuga facilis, officia voluptas. Aut aliquid dignissimos sapiente mollitia vitae, suscipit quidem sequi id pariatur impedit quia voluptates culpa dolor voluptatem maiores quae error aperiam iusto hic inventore iure dolores minima delectus. Optio, mollitia velit quos delectus voluptatibus quo. Optio quasi omnis ex temporibus quaerat possimus magnam perspiciatis veniam eius sapiente qui numquam eligendi obcaecati voluptatum veritatis, architecto culpa cupiditate, neque dignissimos quae ea nisi deleniti a? Provident ab voluptatibus ipsam aut dolorum. Exercitationem, tempora blanditiis autem excepturi odio, deserunt corrupti asperiores adipisci quos ratione nam, illum quas rerum? Molestiae dicta ex ipsa rerum porro error enim, qui odit iusto fugit quibusdam fugiat rem cumque molestias animi? Ut illo quidem nihil numquam minus unde, asperiores iure eum doloremque libero, quae sed aliquam odio dolor magnam ab quos voluptate. Natus modi officia quisquam deserunt veritatis ea, iusto magni nesciunt impedit ab velit? Minima pariatur modi molestias rem cumque doloremque dolores fugit itaque impedit eos quo odit nam consectetur, ipsam officiis eaque labore vel quasi sunt tempora quis ratione? Culpa porro veniam eveniet possimus eligendi, rerum adipisci tempora iste ex voluptatum? Incidunt dolor unde maiores vero adipisci hic mollitia saepe assumenda, cumque nam provident laboriosam! Itaque excepturi explicabo possimus consequuntur obcaecati voluptas! Deserunt, repellendus?

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto recusandae vero voluptatum exercitationem ullam, earum illum quaerat ad voluptate molestiae, officia tempore ipsam suscipit dignissimos sapiente, delectus porro accusantium non!