> 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/display-content/meta-fields/relationship-fields/link.md).

# Link

The Link field type (e.g. [ACF Link field](https://wplake.org/blog/acf-link-field/)) allows a link to be selected or defined (url, title, target) by using the native WordPress link popup.

## How to use it

**Select** the Link field from the **Field** list. You can add a label as a prefix and a **Link Label** to replace the default label.

{% hint style="info" %}
Use a Relational field to 'link' two Custom Post Types (CPT) together. Combine it with a [Meta Filter](/advanced-views/query-content/meta-filters-pro.md)[ (Pro)](/advanced-views/query-content/meta-filters-pro.md) to display related content.
{% endhint %}

## '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 %}
```

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

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