​PageObject: Image

​Defining the maximal image width

For each of the four device types S, M, L and XL you can define the width of the generated images. Unless you define you own values in the slot options, these default values will be used:

  • S (smartphones): 500 px
  • M (tablets): 900 px
  • L (large tablets, notebooks): 1,000 px
  • XL (large desktop monitors): 1,200 px

We highly recommend to define your own values!

The maximum possible edge length for images is 1,500 px (which results in an edge length of 4,500 px for images with @3x density).

The values are used for images for which the editor chooses 100 % width. If the editor chooses 25, 50 or 75 % width, the width of the generated image will be calculated accordingly.

Configuration example

"media_slot_width": {"s": 400, "m": 750, "l": 850, "xl": 1100}

​Full slot configuration example

{{ fx_page.slot("mySlotName", _context, {"media_slot_width": {"s": 400, "m": 750, "l": 850, "xl": 1100}, "other_config": ["foo", "bar"] }) }}

​Restricting the aspect ratio

If needed you can restrict the allowed aspect ratio of the image. For example, you could restrict a dynamic slot which is intended to show television stills to an aspect ratio of 16:9.

This is done with the configuration key “media_aspect_ratio”. It's value contains an array with two keys: “width” and “height”. You can use integers or floating point numbers als values of them.

Configuration example 1

"media_aspect_ratio": {"width": 16, "height": 9}

​Configuration example 2 (with the same result as example 1)

"media_aspect_ratio": {"width": 1.78, "height": 1}

​Restricting the available width options

You can define which width options are available to insert images to a specific dynamic slot.

​CSS configuration

The image is generated in various formats to maximize the performance on different screen sizes and display densities. Additionally editors can choose between different width settings when including images to their content. For a proper handling of all these combinations of formats, your template require some CSS code—which should be included in every template.

It is important that the CSS breakpoints for M, L and XL screens have the same pixel width as the values defined in your template settings.

img.fx_po_image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
img.fx_po_image_s_25 {
    width: 25%;
}
img.fx_po_image_s_50 {
    width: 50%;
}
img.fx_po_image_s_75 {
    width: 75%;
}
@media screen and (min-width:YOUR-M-BREAKPOINT) {
    img.fx_po_image_m_25 {
        width: 25%;
    }
    img.fx_po_image_m_50 {
        width: 50%;
    }
    img.fx_po_image_m_75 {
        width: 75%;
    }
}
@media screen and (min-width:YOUR-L-BREAKPOINT) {
    img.fx_po_image_l_25 {
        width: 25%;
    }
    img.fx_po_image_l_50 {
        width: 50%;
    }
    img.fx_po_image_l_75 {
        width: 75%;
    }
}
@media screen and (min-width:YOUR-XL-BREAKPOINT) {
    img.fx_po_image_xl_25 {
        width: 25%;
    }
    img.fx_po_image_xl_50 {
        width: 50%;
    }
    img.fx_po_image_xl_75 {
        width: 75%;
    }
}
​This PageObject renders as block element.

​Demo content

Demo content is served as SVG wireframe image.

Available parameters:

  • width: [int] Width of demo image in pixel; required if not using url.
  • height: [int] Height of demo image in pixel; required if not using url.
  • shape: [string] Determines whether a rectangle, a circle or an icon is rendered. Possible values are: “rectangle”, “circle” and “icon”. Default ist “rectangle”; optional.
  • url: [string]  URL of the image to use as demo content. Can only be used in custom-flow. At export this property gets stripped and the images dimensions are used to set width and height
  • caption: [string] The image description shown as image caption; optional

For circles and icons width and height should be the same value. If not, the higher value will be used for both.

Example for demo content with shape “rectangle”

Demo content rectangle

Example for demo content with shape “circle”

Demo content circle

Example for demo content with shape “icon”

Demo content icon

Configuration example

{{ fx_page.slot("SLOT_NAME", _context, {"content": [
   {"type": "image", "config": {"width": 1024, "height": 200}}
] }) }}

Using wireframe images in your templates

Shape types:

  • rectangle: 0
  • circe: 1
  • icon: 2
  • video: 3
  • youtube: 4
<img src="{{ url('wireframe_image_type', {'width': 100, 'height': 100, 'type': 0}) }}">
​For more details how to implement demo content please refer to the Demo Content Documentation.