Image field render options

By default, Advanced Views displays the Image field using an <img> tag. You can customize the Layout template to change how it's rendered:

1. Image link

If you need to wrap an image in a link, add both the Link and Image fields to the same Layout and save it. Then, copy the Default Template and modify it so that the image tag is inside the link tag, like this:

<a href="{{ link.url }}" target="{{ link.target }}">
    <img src="{{ image.value }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" decoding="{{ image.decoding }}" loading="{{ image.loading }}" srcset="{{ image.srcset }}" sizes="{{ image.sizes }}">
</a>

2. Image background

You can turn an image into the background of any element by defining the background-image property inline, like this:

<div class='acf-view__image' style='background-image: url({{ image.value }});'>
{# block content #}
</div>

After that, don't forget to add the following CSS rules to the CSS code field of your Layout:

#layout__image {
background-size: cover; 
background-position: center;
}

Another approach is to use an <img> tag within the target element and position it absolutely. This method allows for more control over the image, such as adding effects or transitions.

3. Scale-on-click Image

Instead of using a lightbox, you can apply a "scale" effect to enlarge images on click, keeping the layout intact. This method provides an easy way to view larger images directly within blog posts or content areas.

Image tag in the template:

<img class='acf-view__image' src="{{ image.value }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" decoding="{{ image.decoding }}" loading="{{ image.loading }}" srcset="{{ image.srcset }}" sizes="{{ image.sizes }}">

JS code:

this.querySelectorAll('.image').forEach((image) => {
  image.addEventListener('click', () => {
   image.classList.toggle('image--zoomed');
  });
 });

CSS code:

#layout__image {
    z-index: 999;
    transition: all .5s ease;
    cursor: zoom-in;
}

#layout__image--zoomed {
    cursor: zoom-out;
    transform: scale(130%);
}

3. Lightbox Image (Pro)

Lightbox shows a zoom icon on image hover and allows readers to click and open an image in full-screen mode.

Follow the guide above to assign an image field to your Layout.

From the Lightbox dropdown, select Simple for a lightbox with no settings, or select LightGallery for a richer looking lightbox, with slider and settings to control the functionality.

Known issue with Smush - Optimize Images is that thumbnails don't load as the image src is modified. Exclude images by adding 'acf-views' to the exclude keywords.

Publish or update your Layout.

Customize the Lightbox in the JS Code field under the CSS & JS tab.

The default instance settings:

var image = this.querySelector('.avf-layout__image');
if (image) {
	/* https://www.lightgalleryjs.com/docs/settings/#lightgallery-core */
	new lightGallery(image, {
		selector: 'this',
		closeOnTap: true,
		counter: false,
		download: false,
		allowMediaOverlap: false,
		enableDrag: false,
	});
}