> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/media/image-field/render-options.md).

# Image field render options

By default, Advanced Views [displays the Image field](/advanced-views/field-types/media/image-field.md) using an `<img>` tag. You can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) 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:

{% code overflow="wrap" %}

```twig
<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>
```

{% endcode %}

## 2.  Image background

You can turn an image into the background of any element by defining the [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) property inline, like this:

```twig
<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*:

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

Another approach is to use an `<img>` tag within the target element and [position it absolutely](https://developer.mozilla.org/en-US/docs/Web/CSS/position). 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:**

{% code overflow="wrap" %}

```twig
<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 }}">
```

{% endcode %}

J**S code:**

<pre class="language-javascript"><code class="lang-javascript">this.querySelectorAll('.image').forEach((image) => {
<strong>  image.addEventListener('click', () => {
</strong>   image.classList.toggle('image--zoomed');
  });
 });
</code></pre>

**CSS code:**

```css
#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)

<figure><img src="/files/rCloenSRMIcDkZ664ORt" alt=""><figcaption><p>Lightbox shows a zoom icon on image hover and allows readers to click and open an image in full-screen mode.</p></figcaption></figure>

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.

{% hint style="warning" %}
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.
{% endhint %}

**Publish** or update your *Layout*.

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

The default instance settings:

```javascript
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,
	});
}
```