Перейти к основному содержимому

Image

Описание​

Редактируемый элемент Image добавляет заполнитель для изображений из модуля ассетов. Основные преимущества использования этого элемента вместо (например) элемента Relation, заключаются в следующем:

  • Возможность указать свойства сгенерированного миниатюры (включая высокое разрешение)
  • Предварительный просмотр изображения отображается в панели администрирования
  • Можно указать дополнительные атрибуты для сгенерированного тега <img> или <picture>
  • Возможностm обрезать изображение напрямую на месте.
  • Можно добавлять точки доступа и маркеры на само изображение

Конфигурация​

ИмяТипОписание
titlestringВы можете задать заголовок для виджета изображения в режиме редактирования. При новом стиле этот заголовок отображается как подсказка
widthintegerШирина изображения в пикселях
heightintegerВысота изображения в пикселях
thumbnailstringarray
hidetextbooleanСкрывает ввод ALT-текста в режиме редактирования
reloadbooleanУстановите значение true, чтобы перезагрузить страницу в режиме редактирования после обновления изображения
minWidthintegerМинимальная ширина изображения (в пикселях)
minHeightintegerМинимальная высота изображения (в пикселях)
ratioXintegerУстановите ширину в пикселях, чтобы обеспечить выбор фиксированного соотношения сторон в инструменте обрезки. Должен использоваться с ratioY
ratioYintegerУстановите высоту в пикселях, чтобы обеспечить выбор фиксированного соотношения сторон в инструменте обрезки. Должен использоваться с ratioX
uploadPathstringЦелевой путь для (встроенных) загружаемых изображений. Целевая папка будет создана на лету, если она не существует
disableInlineUploadbooleanОтключает встроенную загрузку. Если установлено значение true, функция встроенной загрузки будет отключена
highResolutionfloatКоэффициент, на который следует умножить размеры миниатюры (html атрибуты width и height содержат оригинальные размеры … используется для дисплеев Retina, печати, …)
dropClassstringЭтот параметр можно использовать для добавления нескольких альтернативных drop target и контекстных меню на пользовательских HTML-элементах в вашем коде. Просто добавьте указанный здесь класс также к пользовательским HTML-элементам, и они также получат drop target
deferredboolУстановите в false, чтобы отключить отложенный (по требованию) рендеринг миниатюры
classstringCSS класс, который добавляется к окружающему контейнеру этого элемента в режиме редактирования
predefinedDataTemplatesarrayДобавить предопределенные наборы конфигураций для точек доступа и изображений
cacheBusterbool(по умолчанию: false) Добавить префикс для прерывания кеша с временной меткой modificationDate
requiredbool(по умолчанию: false) Установите значение true, чтобы сделать значение поля обязательным для публикации

Кроме того, вы также можете передать любой допустимый атрибут для Thumbnail::getHtml().

Методы​

ИмяАргументыВозвращаетОписание
getThumbnail($name)(string/array) $namePimcore\Model\Asset\Image\ThumbnailПолучить конкретную миниатюру изображения
getText() / getAlt()-string, текст alt/заголовка изображенияВведенный альтернативный текст в виджете
getSrc()-string, абсолютный путь к изображениюПуть к исходному связанному изображению
getImage()-\Pimcore\Model\Asset\ImageОбъект ассета, на который ссылается изображение (\Pimcore\Model\Asset\Image)
getHotspots()-arrayВозвращает данные о hotspot (см. пример ниже)
getMarker()-arrayВозвращает данные о маркере (см. пример ниже)
isEmpty()-boolУказывает, пуст ли редактируемый элемент или нет

Примеры​

Основное использование​

{{ pimcore_image("myImage") }}

Код выше создает область изображения в бэкенде и отображает изображение на фронтенде.

Пустая область изображения в бэкенде: Empty image area

Заполненная область изображения в бэкенде: Filled image area

Расширенное использование​

В следующем примере можно увидеть, как добавить заголовок и указать размер области изображения. Обратите внимание, что если вы используете аргумент thumbnail, то визуализируемое изображение во внешнем интерфейсе будет использовать указанную миниатюру.

Узнайте больше о миниатюрах здесь: Миниатюры изображений.

{{ pimcore_image("myImage", {  
    "title": "Drag your image here",  
    "width": 200,  
    "height": 200,  
    "thumbnail": "contentimages"  
}) }}

Предпросмотр в бэкенде​

Image with title and specified size - the backend preview

Пример с прямой настройкой миниатюры​

Вы также можете изменять настройки миниатюры:

{{ pimcore_image("myImage", {  
    "title": "Drag your image here",  
    "width": 200,  
    "height": 200,  
    "thumbnail": {  
        "width": 200,  
        "height": 200,  
        "interlace": true,  
        "quality": 90  
    }  
}) }}

И вот как выглядит отрендеренный html-код: <img custom-attr="value" data-role="image" src="/var/tmp/image-thumbnails/0/56/thumb__content/dsc03807.jpeg" />

Другие продвинутые примеры​

{# Получить изображение retina #}  
{{ pimcore_image("myImage", {  
    "thumbnail": {  
        "width": 200,  
        "height": 200  
    },  
    "highResolution": 2  
}) }}  
  
{# Будет выведено<img src="/var/thumb_9999__auto_xxxxxxxx@2x.png" width="200" height="200" /> <!-- но реальный размер изображения равен 400x400 пикселей --> #}  
  
  
{# Пользовательский тег изображения (объекты миниатюр) #}  
{% if editmode %}  
    {{ pimcore_image("myImage", {"thumbnail": "myThumbnail"}) }}  
{% else %}  
    {% set thumbnail = pimcore_image("myImage").getThumbnail("myThumbnail") %}  
    <img src="{{ thumbnail }}" width="{{ thumbnail.width }}" height="{{ thumbnail.height }}" />  
{% endif %}  
  
  
  
  
{# Настраиваемые drop target #}  
<div class="myCustomImageDropTarget anotherClass">My first alternative drop target</div>  
{{ pimcore_image("image", {  
    "thumbnail": "contentfullimage",  
    "dropClass": "myCustomImageDropTarget"  
}) }}  
<div class="myCustomImageDropTarget someClass">My second alternative drop target</div>

Обрезка изображений для документов в зависимости от конкретного поля​

Использование в бэкенде​

Щелкните правой кнопкой мыши на изображении, доступном для редактирования в режиме редактирования, и нажмите Select specific area of image параметры изображения в режиме редактирования

Теперь вы можете выбрать нужную область на изображении: обрезка изображения в режиме редактирования

Таким образом, больше нет необходимости определять конкретные изображения или миниатюры, если необходимо отобразить определенную область изображения. Просто назначьте исходное изображение и задайте обрезку для конкретного поля непосредственно в документе.

Маркеры и точки доступа​

Эта функция доступна для любого редактируемого элемента Image (настройка не требуется).

Установка маркера или точки доступа на изображении напрямую не влияет на результат, назначенное изображение отображается как обычно.

hotspot и маркеры на изображении

Вы можете получить данные с помощью методов getMarker() и getHotspots(). Все размеры указаны в процентах и, следовательно, не зависят от размера изображения, поэтому вы должны изменить их обратно на пиксели в соответствии с размером вашего изображения.

Пример использования кода​

<div>  
    <p>  
        {{ pimcore_image("myImage", {  
            "title": "Drag your image here",  
            "width": 400,  
            "height": 400,  
            "thumbnail": "content"  
        }) }}  
  
        {% if not editmode %}  
            {% set image = pimcore_image("myImage") %}  
            {% if image.getHotspots() %}  
                {{ dump(image.getHotspots()) }}  
            {% endif %}  
            {% if image.getMarker() %}  
                {{ dump(image.getMarker()) }}  
            {% endif %}  
        {% endif %}  
    </p>  
</div>  
  
  
{# Предопределенные шаблоны данных; используйте ключ "hotspot" вместо "marker" для добавления шаблонов для точек доступа #}  
{{ pimcore_image("image", {  
    'thumbnail': 'my-thumbnail',  
    'predefinedDataTemplates': {  
        'marker': [  
            {  
                'menuName': 'Menu Name',  
                'name': 'Config Name',  
                'data': [  
                    {  
                        'name': 'my textfield',  
                        'type': 'textfield',  
                    }  
                ]  
            }  
        ]  
    }  
}) }}

getHotspots output:

array(1) {  
  [0] => array(6) {  
    ["top"] => float(36.8)  
    ["left"] => float(39.5)  
    ["width"] => int(5)  
    ["height"] => float(6.6666666666667)  
    ["data"] => array(2) {  
      [0] => object(Pimcore\Model\Element\Data\MarkerHotspotItem)#171 (3) {  
        ["name"] => string(30) "checkbox_data_added_to_hotspot"  
        ["type"] => string(8) "checkbox"  
        ["value"] => bool(true)  
      }  
      [1] => object(Pimcore\Model\Element\Data\MarkerHotspotItem)#172 (3) {  
        ["name"] => string(28) "object_data_added_to_hotspot"  
        ["type"] => string(6) "object"  
        ["value"] => int(6)  
      }  
    }  
    ["name"] => NULL  
  }  
}

getMarker output:

array(1) {  
  [0] => array(4) {  
    ["top"] => float(35.466666666667)  
    ["left"] => float(69.9)  
    ["data"] => array(1) {  
      [0] => object(Pimcore\Model\Element\Data\MarkerHotspotItem)#173 (3) {  
        ["name"] => string(31) "Textarea data added to the marker"  
        ["type"] => string(8) "textarea"  
        ["value"] => string(38) "Here is a description of marked place."  
      }  
    }  
    ["name"] => NULL  
  }  
}

Вы можете предложить улучшение документации или задать вопрос в комментариях.
Если вам нужна полноценная консультация — вы можете заказать её на нашем сайте.