Just add the class specified here also to custom HTML elements and they will get a drop target too. | | `deferred` | bool | Set to false to disable deferred (on demand) thumbnail rendering | | `class` | string | A CSS class that is added to the surrounding container of this element in editmode | You can also pass every valid `
```php
image("myImage"); ?>
```
```twig
{{ pimcore_image("myImage") }}
```
The code above generates an image area in the backend and displays the image at the frontend.
The empty backend area:
The filled backend area:
### Advanced Usage
In the example below you can see how to add a title and specify size of the image area.
Note that if you use the thumbnail argument, the rendered image on the frontend will use the specified thumbnail.
Learn more about thumbnails here: [Image Thumbnails](../../04_Assets/03_Working_with_Thumbnails/01_Image_Thumbnails.md).
```php
image("myImage", [
"title" => "Drag your image here",
"width" => 200,
"height" => 200,
"thumbnail" => "contentimages"
]); ?>
```
```twig
{{ pimcore_image("myImage", {
"title": "Drag your image here",
"width": 200,
"height": 200,
"thumbnail": "contentimages"
}) }}
```
###### Backend Preview
### An Example with a Direct Thumbnail Configuration
You can also change the thumbnail configuration:
```php
image("myImage", [
"title" => "Drag your image here",
"width" => 200,
"height" => 200,
"thumbnail" => [
"width" => 200,
"height" => 200,
"interlace" => true,
"quality" => 90
]
]); ?>
```
```twig
{{ pimcore_image("myImage", {
"title": "Drag your image here",
"width": 200,
"height": 200,
"thumbnail": {
"width": 200,
"height": 200,
"interlace": true,
"quality": 90
}
}) }}
```
### An Example Using Custom Attributes
```php
image("myImage", [
"thumbnail" => "content",
"attributes" => [
"custom-attr" => "value",
"data-role" => "image"
]
]) ?>
```
```twig
{{ pimcore_image("myImage", {
"thumbnail": "content",
"attributes": {
"custom-attr": "value",
"data-role": "image"
}
}) }}
```
And this is how the rendered html looks: `
`
### Other Advanced Examples
```php
// get retina image
image("myImage", [
"thumbnail" => [
"width" => 200,
"height" => 200
],
"highResolution" => 2
]); ?>
// will output
// custom image tag (thumbnail objects)
editmode): ?>
image("myImage", ["thumbnail" => "myThumbnail"]); ?>
image("myImage")->getThumbnail("myThumbnail"); ?>
// disable automatic width and height attributes
image("myImage", [
"thumbnail" => "exampleScaleWidth",
"disableWidthHeightAttributes" => true
]) ?>
// custom drop targets
#}
{# Custom image tag (thumbnail objects) #}
{% if editmode %}
{{ pimcore_image("myImage",{"thumbnail": "myThumbnail"}) }}
{% else %}
{% set thumbnail = pimcore_image("myImage").getThumbnail("myThumbnail") %}
{% endif %}
{# Disable automatic width and height attributes #}
{{ pimcore_image("myImage", {
"thumbnail": "exampleScaleWidth",
"disableWidthHeightAttributes": true
}) }}
{# Custom drop targets #}
## Field-specific Image Cropping for Documents
### Backend Usage
Right-click on the image editable in editmode and press *Select specific area of image*
Now you're able to select the desired area on the image:
Therefore, there is no need any more to define specific images or thumbnails if a specific region of an image should be displayed.
Just assign the original image and define field specific cropping directly within the document.
## Markers & Hotspots
This functionality is available on every image editable (no configuration necessary).
Setting a marker or a hotspot on an image has no direct effect on the output, the assigned image is displayed as usual.
You as a developer have to get the data out of the image editable to build amazing frontends with it.
You can get the data with the methods `getMarker()` and `getHotspots()`.
All dimensions are in percent and therefore independent from the image size, you have to change them back to pixels according to your image size.
### Code Usage Example
// custom image tag (thumbnail objects)
editmode): ?>
image("myImage", ["thumbnail" => "myThumbnail"]); ?>
image("myImage")->getThumbnail("myThumbnail"); ?>
My first alternative drop target
image("image", [
"thumbnail" => "contentfullimage",
"dropClass" => "myCustomImageDropTarget"
]) ?>
My second alternative drop target
```
```twig
{# Get retina image #}
{{ pimcore_image("myImage", {
"thumbnail": {
"width": 200,
"height": 200
},
"highResolution": 2
}) }}
{# Will output #}
{# Custom image tag (thumbnail objects) #}
{% if editmode %}
{{ pimcore_image("myImage",{"thumbnail": "myThumbnail"}) }}
{% else %}
{% set thumbnail = pimcore_image("myImage").getThumbnail("myThumbnail") %}
My first alternative drop target
{{ pimcore_image("image",{
"thumbnail": "contentfullimage",
"dropClass": "myCustomImageDropTarget"
}) }}
My second alternative drop target
```
```php
```
```twig
```
`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
}
}
```
image("myImage", [ "title" => "Drag your image here", "width" => 400, "height" => 400, "thumbnail" => "content" ]); ?> editmode): ?> image("myImage")->getHotspots()) { \Zend_Debug::dump($this->image("myImage")->getHotspots()); } if($this->image("myImage")->getMarker()) { \Zend_Debug::dump($this->image("myImage")->getMarker()); } ?>
{{ 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 %}