# Image

Display image meta fields (like [ACF Image field](https://wplake.org/blog/acf-image-field/)) and Post featured images.

In Advanced Views, if you add an Image field to your *Layout* you'll have the option to the select Image Size. In **Pro** you can enable the image **Lightbox** and **Slider** option.

## 1. Crop images

Default crop sizes are available for selection when assigning an image field in your *Layout*. 

{% hint style="success" %}
Note: Professional themes often come with additional crop sizes, these will also be available in the list for selection.
{% endhint %}

### How to use it

Visit the **Advanced Views** tab in WordPress backend. 

Click on the **Edit** link or **Title** of your *Layout* to edit. 

Click the **Add Field** button. 

Select **Post & Post fields (WordPress, WooCommerce)** from the **Group** dropdown. 

Select **Featured Image** field from the list or Select **Featured Image with link.** Or any other group and field that is an image field type.

An extra Field appears called **Image Size**, select the preferred image size from the list. 

Click on the **Update** button to save and publish your *Layout*.

## 2. SVG format support

By default, WordPress doesn't allow uploading `.svg` files into the Media Library. However, this can be configured using [some dedicated plugin](https://wordpress.org/plugins/safe-svg/).

Advanced Views supports SVG out-of-the-box. As you may have seen, an ordinary image has the following markup by default:

{% code overflow="wrap" %}

```twig
<img class="all-fields__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 %}

This doesn't work for SVG, so Advanced Views provides a separate field property for SVG cases: `svg_content`. When you expect an SVG to appear, you should instead use:

```twig
{{ image.svg_content|raw }}
```

This field contains the content of the SVG, so it will be placed on the page as an inline SVG image.&#x20;

{% hint style="info" %}
Why inline? Because only inline SVGs support color changes, allowing you to style it with CSS and even change the color on hover.
{% endhint %}

If you need to assign a class to the SVG element, you can use the following trick:

```twig
{{ image.svg_content|replace({'<svg ': "<svg class='my-class' "})|raw }}
```

## 3. Advanced usage

### 3.1) Image as a 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 %}

### 3.2) Background image

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
#view__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.3) Scale-on-click effect

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
#view__image {
    z-index: 999;
    transition: all .5s ease;
    cursor: zoom-in;
}

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

## 4. Lightbox (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('.acf-view__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,
	});
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/display-content/meta-fields/content-fields/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.