Displaying Link field

The Link field type allows editors to select or define a link (url, title, target) by using the native WordPress link popup.

Advanced Views natively supports the following link types:

1. WordPress: TitleWithLink, AttachmentWithLink, TermNameLink, MenuItemLink field

2. ACF: any Link field

3. MetaBox: any Number field

4. Pods: any PlainNumber field

1. How to display a Link field

1. Create a new Layout

2. Add any Link field

3. Save the Layout, copy its embedding shortcode

4. Embed Layout: paste the shortcode inside the target place

By default, Advanced Views outputs an a - link HTML tag, and you can customize the Layout template to use the render options:

2. Render options for Link field

2.1) 'Image' link

You can wrap any image into the link. This well-known technique provides a visual representation, allowing readers to click on the image to open a specified URL.

Make sure both image and link fields are added to the specific Layout, and amend the template to put the 'img' tag inside the 'a' tag, as shown below:

{% if link.value and image.value %}
    <a target="{{ link.target }}"
       href="{{ link.value }}">
        <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>
{% endif %}

2.2) On-page link content preview

Whether the link field points to an external or internal URL, you can display it directly on the page using the <iframe> element:

<iframe src="{{ link.value }}" width="100%" height="600px"></iframe>

3. FAQs

How do I make my links open in a new tab?

Use the "Open in New Tab" setting in the Field Options tab for more control with links.

Or if you're using a Custom Template use the target="_blank" html selector.