> 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.md).

# Displaying Image field

 Advanced Views natively supports the following image types:

1. [WordPress](/advanced-views/fields/wordpress-fields.md): Post FeaturedImage field
2. [WooCommerce](/advanced-views/fields/woo-product-fields.md): Product FeaturedImage field
3. [ACF](/advanced-views/fields/meta-plugins/advanced-custom-fields.md): any Image field
4. [MetaBox](/advanced-views/fields/meta-plugins/meta-box-fields.md): any ImageSelect field
5. [Pods](/advanced-views/fields/meta-plugins/pods-fields.md): any Image field

## 1. How to display an Image field

1. [Create a new *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add any image field
3. Save the *Layout*, copy its [embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Embed *Layout*: paste the shortcode inside the target place

Advanced Views automatically creates HTML markup and loads image metadata (like src, width, height) into the template. 

You can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) to use the [Image render options](/advanced-views/field-types/media/image-field/render-options.md).

## 2. Displaying Image in the cropped size

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 %}

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*.

## 3. Displaying SVG images

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