Image Element
The Image Element places a single image on the page. Beyond the image itself you control its aspect ratio and focus point, loading behaviour, link or lightbox, and a wide range of design options: masks, borders, shadows and hover effects.
It can also show a title and caption, either above or below the image or as an overlay with one of several animated caption styles.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Image Element
Add the Image Element to any column and choose the image in the Image field. Always fill in the Image Alt Text: it describes the image for screen readers and search engines.
Use Image Aspect Ratio to crop the image to a fixed shape, and drag the Image Focus Point to keep the important part visible. Link the image with Image Link URL, or turn on Image Lightbox to open a larger version; images that share a Gallery Lightbox ID open as one gallery.
On the Design tab set an Image Max Width and alignment, then add a mask, border, radius, shadow or hover effect. The Caption tab adds a title and caption with their own typography and colors.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Image. Change them there to style every Image at once.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Image | Upload an image to display. |
| Image Aspect Ratio | Select an aspect ratio for the image. |
| Custom Aspect Ratio | Set a custom aspect ratio for the image. |
| Image Focus Point | Set the image focus point by dragging the blue dot. |
| Fetch Priority | Select the download priority the browser should use for this image. |
| Skip Lazy Loading | Select whether you want to skip lazy loading on this image or not. |
| Image Lightbox | Show image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself. |
| Gallery Lightbox ID | Set a name for the lightbox gallery this image should belong to. |
| Lightbox Image | Upload an image that will show up in the lightbox. |
| Image Alt Text | The alt attribute provides alternative information if an image cannot be viewed. |
| Image Link URL | Add the URL the image will link to, for example http://example.com. |
| Link Target | Controls how the link will open. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
| Attributes | Add custom HTML attributes to the element. |
Design
| Heading | Description |
|---|---|
| Image Max Width | Set the maximum width the image should take up. Enter value including any valid CSS unit, for example 200px. Leave empty to use full image width. |
| Image Sticky Max Width | Set the maximum width the image should take up when its parent container is sticky. Enter value including any valid CSS unit, for example 200px. Leave empty to use full image width. |
| Alignment | Choose how to align the image. |
| Mask | Select an image mask. |
| Custom Mask | Upload a custom mask image. The image should be in SVG or PNG format with transparent background. |
| Mask Size | Select the mask size. |
| Custom Size | Set the size of the image mask. Enter value including any valid CSS unit ex. 60% or 200px. |
| Mask Position | Set image mask position. |
| Custom Mask Position | Set a custom image mask position. Enter value including any valid CSS unit in pair first for X axis second for Y axis ex. 60% 50px. |
| Mask Repeat | Select how the image mask repeats. |
| Style Type | Select the style type. Style type will be disabled when using mask or caption styles other than “Above” or “Below” are chosen. |
| Glow / Drop Shadow Blur | Choose the amount of blur added to glow or drop shadow effect. In pixels. |
| Style Color | Controls the style color for all style types except border. Hex colors will use a subtle auto added alpha level to produce a nice effect. |
| Hover Type | Select the hover effect type. Hover Type will be disabled when caption styles other than Above or Below are chosen. Hover type scroll will not work when style type is set to bottom shadow. |
| Image to Magnify | Upload the full image to magnify. If not added the default image will be used. |
| Magnify Duration | The fade in and fade out speed of the large image. |
| Image Frame Height | The height of the frame in pixels in which the image will be scrolled. |
| Scroll Speed | The scroll speed of the image in seconds. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Border Size | In pixels. |
| Border Color | Controls the border color. |
| Border Radius | Controls the image border radius. In pixels (px), for example 1px, or “round”. |
| Z Index | Value for the z-index CSS property of the image, can be both positive or negative. |
Caption
| Heading | Description |
|---|---|
| Caption | Choose the caption style. |
| Title / Caption Align | Choose how to align the caption. |
| Image Title | Enter title text to be displayed on image. |
| Image Caption | Enter caption text to be displayed on image. |
| Image Title Heading Tag | Choose HTML tag of the image title, either div or the heading tag, h1-h6. |
| Image Title Typography | Controls the typography of the image title. Leave empty for the global font family. |
| Image Caption Background Color | Controls the background color of the caption. |
| Image Caption Typography | Controls the typography of the image caption. Leave empty for the global font family. |
| Caption Border Color | Controls the color of the caption border. |
| Image Overlay Color | Controls the color of the image overlay. |
| Caption Area Margin | In pixels or percentage, for example 10px or 10%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
| Filter Type | Use filters to see specific type of content. |
| Hue | Filter hue. |
| Saturation | Filter saturation. |
| Brightness | Filter brightness. |
| Contrast | Filter contrast. |
| Invert | Filter invert. |
| Sepia | Filter sepia. |
| Opacity | Filter opacity. |
| Blur | Filter blur. |
Tips
- For the main image at the top of a page (the largest element in the first screen), set Fetch Priority to high and turn on Skip Lazy Loading. This improves how quickly the page appears.
- Leave lazy loading on for every image further down the page.
- The Lightbox option needs the lightbox to be enabled in Global Options; otherwise the image opens in the same tab.
- Style types and hover effects are switched off automatically when you use a mask or an overlay caption style, because they cannot be combined.
- Use a custom mask in SVG or PNG format with a transparent background to cut the image into any shape.
