Image
<sf-image2
id="{{ component_id }}"
description="Image"
width="500"
height="200"
crop="true"
resizable="false"
dimensions="min-max"
></sf-image2>
Parameters
html
width
height
auto-width
- (boolean)dimensions
placeholder-width
crop
- (boolean) Setresizable
tofalse
when using this parameterlinkable
- (boolean)resizable
- (boolean)auto-link-to-file
- (boolean)
html
See how to use this in the examples below. Variables available are:
src
attributes_html
– e.g.alt="" class="classes"
alt
link
auto-width
Automatically set width by parent element.
dimensions
min-max
– Use width and height as min size, resizes larger images to fit in the width height you have defined. (Recommended)max
– Use width and height as max size.min
– Use width and height as min size.
Examples
Use a <div>
with a CSS background instead of an <img>
tag
<sf-image2
id="{{ component_id }}"
description="Image"
width="200"
height="100"
dimensions="min-max"
>
{% if link %}<a href="{{ link }}">{% end_if %}
<div {{ attributes_html | html_decode }} style="background-image:url({{ src }});height: 100px; width: 200px; background: lightblue"></div>
{% if link %}</a>{% end_if %}
</sf-image2>
Crop image
This is great if you want to have multiple square images and maintain the aspect ratio between the images. This will force a larger image to be resized and cropped automatically. The user can change the crop, but it always maintains its aspect ratio (300x300, 1:1) in this example.
<sf-image2
id="{{ component_id }}"
description="Image"
width="300"
height="300"
dimensions="min-max"
crop="true"
resizable="false"
></sf-image2>
Usage on a blog summary page
If you have defined a key named image
on your blog posts image2 component, this is how you show it in com_keys
. Please note that you'll have to apply CSS classes to make sure your image div with the background has the size you want.
{ com_keys (
id:'{{ component_id }}',
description:'Blog posts',
html:'
<article class="posts">
<div class="image">
<div style="background-image:url({{ keys.image | metaToImage: "crop", "200","200" }})"></div>
</div>
<a href="{{ page.url }}">{{ keys.title }}</a>
</article>
'
) }