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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/display-content/meta-fields/relationship-fields/link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.