This plugin adds a new link field type to the Craft CMS. The link field allows content editors to choose from a list of link types and offers individual input fields for each of them.
This plugin requires Craft CMS 4.0.0 or later.
The plugin can be installed from the integrated plugin store by searching for "Typed Link Field" or using Composer:
-
Open your terminal and navigate to your Craft project:
cd /path/to/project -
Then tell Composer to load the plugin:
composer require sebastianlenz/linkfield -
Finally, install and enable the plugin:
./craft plugin/install typedlinkfield ./craft plugin/enable typedlinkfield
After the plugin has been installed, link fields can be created using the field settings within the control panel. All field settings can be found within the field manager.
Link fields can be rendered directly in Twig, they return the url the link is pointing to, or an empty string if they are unset:
<a href="{{ entry.myLinkField }}">Link</a>The field value is actually an instance of lenz\linkfield\models\Link which
exposes additional properties and methods that can be used in templates.
Depending on the link type, a more specific subclass will be returned.
Renders a full html link using the attribute and content data of the field.
{{ entry.myLinkField.getLink() }}To modify the inner text of the link tag, the desired content can be passed:
{{ entry.myLinkField.getLink('Imprint') }}To modify the attributes of the link, an object can be passed. The special
attribute text will be used as the inner text.
{{ entry.myLinkField.getLink({
class: 'my-link-class',
target: '_blank',
text: 'Imprint',
}) }}Renders only the link attributes. Attributes can be modified or appended by passing an object to the first argument.
<a{{ entry.myLinkField.getLinkAttributes() }}>
<span>Custom markup</span>
</a>Returns the attributes of the link as an array. Can be used in junction with the
attr or tag helpers exposed by Craft.
{% tag 'a' with entry.myLinkField.getRawLinkAttributes() %}
<span>Custom markup</span>
{% endtag %}Returns whether the field allows users to enter custom texts.
{{ entry.myLinkField.getAllowCustomText() }}Returns whether the field shows the option for opening links in a new window.
{{ entry.myLinkField.getAllowTarget() }}Returns the aria label of the link.
{{ entry.myLinkField.getAriaLabel() }}Returns the custom text of the link. The first non-empty text from the following possibilities will be picked:
- Custom text of the link.
- Default text defined in the field settings.
- Fallback text as passed to the function.
{{ entry.myLinkField.getCustomText('My fallback text') }}Returns the default text set in the link field settings of this link.
{{ entry.myLinkField.getDefaultText() }}Returns the linked element (entry, asset, etc.) or NULL if no element is
linked.
By default, only published elements are returned. Set $ignoreStatus
to TRUE to retrieve unpublished elements.
{{ entry.myLinkField.getElement() }}Returns whether the field allows users to enter aria labels.
{{ entry.myLinkField.getEnableAriaLabel() }}Returns whether the field allows users to enter link titles.
{{ entry.myLinkField.getEnableTitle() }}Returns the text that is declared by the link itself (e.g. the title of the linked entry or asset).
{{ entry.myLinkField.getIntrinsicText() }}Returns the url that is declared by the link itself (e.g. the url of the linked entry or asset). Custom queries or hashes are taken into account and will be appended to the result.
{{ entry.myLinkField.getIntrinsicUrl() }}Returns the link target (e.g. _blank).
{{ entry.myLinkField.getTarget() }}Returns the link text. The first non-empty text from the following possibilities will be picked:
- Custom text of the link.
- Intrinsic text defined by the linked element.
- Default text defined in the field settings.
- Fallback text as passed to the function.
{{ entry.myLinkField.getText($fallbackText = "Learn More") }}Returns a string that indicates the type of the link. The plugin ships with the
following link types: asset, category, custom, email, entry, site,
tel, url and user.
{{ entry.myLinkField.getType() }}Returns the url of the link.
{{ entry.myLinkField.getUrl() }}Allows the link to be modified by overwriting url attributes as returned by the
php function parse_url. The following options are supported: fragment,
host, pass, path, port, query, scheme and user.
- All options require a string value to be passed.
- The
queryoption accepts an array or hash map. If an array is passed, the query parameters of the original url will be merged by default. To disable this behaviour, the optionqueryModemust be set toreplace.
This example enforces the https scheme and replaces all query parameters of the original url:
{{ entry.myLinkField.getUrl({
scheme: 'https',
queryMode: 'replace',
query: {
param: 'value'
},
}) }}Returns whether the link points to an element (e.g. entry or asset).
{{ entry.myLinkField.hasElement() }}Returns whether the link is empty. An empty link is a link that has no url.
{{ entry.myLinkField.isEmpty() }}The properties generally expose the raw underlying data of the link.
The aria label as entered in th cp.
<a aria-label="{{ entry.myLinkField.ariaLabel }}">...</a>The custom text as entered in th cp.
<a>{{ entry.myLinkField.customText }}</a>The link target as text. Can be either _blank or an empty string.
<a target="{{ entry.myLinkField.target }}">...</a>The title as entered in th cp.
<a title="{{ entry.myLinkField.title }}">...</a>Link fields can be eager-loaded using Crafts with query parameter. Eager-loading
can greatly improve the performance when fetching many entries, e.g. when
rendering menus.
{% set entries = craft.entries({
section: 'pages',
with: 'myLinkField',
}).all() %}You can register additional link types by listening to the EVENT_REGISTER_LINK_TYPES
event of the plugin. If you just want to add another element type, you can do it like this in
your module:
use craft\commerce\elements\Product;
use lenz\linkfield\Plugin as LinkPlugin;
use lenz\linkfield\events\LinkTypeEvent;
use lenz\linkfield\models\element\ElementLinkType;
use yii\base\Event;
/**
* Custom module class.
*/
class Module extends \yii\base\Module
{
public function init() {
parent::init();
Event::on(
LinkPlugin::class,
LinkPlugin::EVENT_REGISTER_LINK_TYPES,
function(LinkTypeEvent $event) {
$event->linkTypes['product'] = new ElementLinkType(Product::class);
}
);
}
}Each link type must have an unique name and a definition object extending lenz\linkfield\models\LinkType.
Take a look at the bundled link types ElementLinkType and InputLinkType to get an idea of how to write your own
link type definitions.
If wish to migrate a field created using "Fruit Link It", please follow the discussion and directions here:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent