Advanced Views Docs
Live PlaygroundDownload PluginGet PRO
  • 💡Help Centre
  • ⚡Getting Started
    • Introduction
      • Key Aspects
      • Creating Your First View
      • Creating Your First Card
      • Plugin Terms
      • Plugin Interface
        • Field Options
    • Installation
      • Advanced Views Lite
      • Advanced Views Pro
      • Comparison Table
      • Upgrading from Lite to Pro
    • Supported data vendors
    • Starter theme
  • 🌟Display Content
    • WordPress
      • Post
      • Taxonomy terms
      • User
      • Comments
      • Menus
    • WooCommerce Product
    • Meta fields
      • Basic fields
        • Number
      • Content fields
        • Image
        • File
        • WYSIWYG
        • oEmbed
        • Gallery
      • Choice fields
        • Select/checkbox/radio
        • True / False
      • Relationship fields
        • Link
        • Post_object
        • Page Link
        • Relationship
        • Taxonomy
        • User
      • Advanced fields
        • Google Map
        • Google Map Multiple Markers
        • ACF OpenStreetMap Field
        • Date/time picker
      • Layout fields
        • Group (Pro)
        • Repeater (Pro)
        • Flexible (Pro)
    • Object fields
    • Custom Data (Pro)
    • Custom Gutenberg Blocks (Pro)
    • Mount Points (Pro)
    • Front-end assets management (Pro)
  • 🦸‍♂️Query Content
    • Basic Filters
    • Meta Filters (Pro)
      • Current Post
      • Comparison
      • Dynamic Injection
    • Taxonomy Filters (Pro)
    • Pagination (Pro)
    • Custom Data (Pro)
  • 🏆Shortcode Attributes
    • Common Arguments
    • View Shortcode
    • Card Shortcode
  • 🧙‍♂️Templates
    • Customizing the Template
    • Template engines
      • Twig
      • Blade
    • CSS & JS
      • BEM Methodology
      • WordPress Interactivity API
    • File system storage
    • Pre-built components
    • Reusable components library (Pro)
    • Live reload
    • Multilingual
    • Custom Ajax & Rest API (Pro)
  • ☕Guides
    • Display Custom Post Type (CPT) on another post
    • Display Employees (CPT) of a Company (CPT)
    • Display Nested Repeater Fields
    • Map Marker from ACF Image
    • Display all CPT items on a single map
  • 🛠️Tools
    • Export/Import
    • Demo Import
    • Settings
    • Preview
  • 🏹Troubleshooting
    • Compatibility
    • Report a bug
    • Payment Issues
    • Lite Support (Forum)
    • Pro Support
  • ⚙️Customization
    • Filters and Hooks
      • View
      • Card
    • Suggest a feature
    • Performance
Powered by GitBook
On this page
  • 1. Crop images
  • How to use it
  • 2. SVG format support
  • 3. Advanced usage
  • 3.1) Image as a link
  • 3.2) Background image
  • 3.3) Scale-on-click effect
  • 4. Lightbox (Pro)

Was this helpful?

  1. Display Content
  2. Meta fields
  3. Content fields

Image

PreviousContent fieldsNextFile

Last updated 1 month ago

Was this helpful?

Display image meta fields (like ) and Post featured images.

In the Lite version, if you add an Image field to your View you'll have the option to the select Image Size. In the Pro version 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 View.

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

How to use it

Visit the Advanced Views tab in WordPress backend.

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

Click the Add Field button.

Select Post (WordPress) 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 View.

2. SVG format support

AVF 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 AVF provides a separate field property for SVG cases: svg_content. When you expect an SVG to appear, you should use instead:

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

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 View and save it. Then, copy the default auto-generated 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>

3.2) Background image

<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 field of your View:

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

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:

<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:

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

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

4. Lightbox (Pro)

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

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

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

The default instance settings:

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

By default, WordPress doesn't allow uploading .svg files into the Media Library. However, this can be configured using .

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

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

🌟
some dedicated plugin
background-image
position it absolutely
ACF Image field
Lightbox shows a zoom icon on image hover and allows readers to click and open an image in full-screen mode.