> 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/relational/link-field.md).

# 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](/advanced-views/fields/wordpress-fields.md): TitleWithLink, AttachmentWithLink, TermNameLink, MenuItemLink field
2. [ACF](/advanced-views/fields/meta-plugins/advanced-custom-fields.md): any Link field
3. [MetaBox](/advanced-views/fields/meta-plugins/meta-box-fields.md): any Number field
4. [Pods](/advanced-views/fields/meta-plugins/pods-fields.md): any PlainNumber field

## 1. How to display a Link field

1. [Create a new *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add any Link 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

By default, Advanced Views outputs an `a` - link HTML tag, and you can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) to use the render options:

## 2. Render options for Link field

### 2.1) 'Image' link <a href="#image-link" id="image-link"></a>

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:

```twig
{% 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 <a href="#file-attachment-preview" id="file-attachment-preview"></a>

Whether the link field points to an external or internal URL, you can display it directly on the page using the [\<iframe> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe):&#x20;

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

## 3. FAQs

<details>

<summary>How do I make my links open in a new tab?</summary>

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.

</details>