Displaying Image field

Advanced Views natively supports the following image types:

1. WordPress: Post FeaturedImage field

2. WooCommerce: Product FeaturedImage field

3. ACF: any Image field

4. MetaBox: any ImageSelect field

5. Pods: any Image field

1. How to display an Image field

1. Create a new Layout

2. Add any image field

3. Save the Layout, copy its embedding shortcode

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 to use the Image render options.

2. Displaying Image in the cropped size

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

Note: Professional themes often come with additional crop sizes, these will also be available in the list for selection.

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.

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

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

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:

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

Why inline? Because only inline SVGs support color changes, allowing you to style it with CSS and even change the color on hover.

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

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