Link field plugin for Craft
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., (*1)
Requirements
This plugin requires Craft CMS 4.0.0 or later., (*2)
Installation
The plugin can be installed from the integrated plugin store by searching for
"Typed Link Field" or using Composer:, (*3)
-
Open your terminal and navigate to your Craft project:, (*4)
cd /path/to/project, (*5)
-
Then tell Composer to load the plugin:, (*6)
composer require sebastianlenz/linkfield, (*7)
-
Finally, install and enable the plugin:, (*8)
./craft plugin/install typedlinkfield
./craft plugin/enable typedlinkfield, (*9)
Usage
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., (*10)
Templating
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:, (*11)
<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., (*12)
Render methods
getLink($attributesOrText = null)
Renders a full html link using the attribute and content data of the field., (*13)
{{ entry.myLinkField.getLink() }}
To modify the inner text of the link tag, the desired content can be passed:, (*14)
{{ 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., (*15)
{{ 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., (*16)
<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., (*17)
{% tag 'a' with entry.myLinkField.getRawLinkAttributes() %}
<span>Custom markup</span>
{% endtag %}
Helper methods
getAllowCustomText()
Returns whether the field allows users to enter custom texts., (*18)
{{ entry.myLinkField.getAllowCustomText() }}
getAllowTarget()
Returns whether the field shows the option for opening links in a new window., (*19)
{{ entry.myLinkField.getAllowTarget() }}
getAriaLabel()
Returns the aria label of the link., (*20)
{{ entry.myLinkField.getAriaLabel() }}
getCustomText($fallbackText = '')
Returns the custom text of the link. The first non-empty text from the following
possibilities will be picked:, (*21)
- 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') }}
getDefaultText()
Returns the default text set in the link field settings of this link., (*22)
{{ entry.myLinkField.getDefaultText() }}
getElement($ignoreStatus = false)
Returns the linked element (entry, asset, etc.) or NULL if no element is
linked., (*23)
By default, only published elements are returned. Set $ignoreStatus
to TRUE to retrieve unpublished elements., (*24)
{{ entry.myLinkField.getElement() }}
getEnableAriaLabel()
Returns whether the field allows users to enter aria labels., (*25)
{{ entry.myLinkField.getEnableAriaLabel() }}
getEnableTitle()
Returns whether the field allows users to enter link titles., (*26)
{{ entry.myLinkField.getEnableTitle() }}
getIntrinsicText()
Returns the text that is declared by the link itself (e.g. the title of the
linked entry or asset)., (*27)
{{ entry.myLinkField.getIntrinsicText() }}
getIntrinsicUrl()
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., (*28)
{{ entry.myLinkField.getIntrinsicUrl() }}
getTarget()
Returns the link target (e.g. _blank)., (*29)
{{ entry.myLinkField.getTarget() }}
getText($fallbackText = "Learn More")
Returns the link text. The first non-empty text from the following
possibilities will be picked:, (*30)
- 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") }}
getType()
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., (*31)
{{ entry.myLinkField.getType() }}
getUrl($options = null)
Returns the url of the link., (*32)
{{ 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., (*33)
- All options require a string value to be passed.
- The
query option 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 option queryMode must be set to replace.
This example enforces the https scheme and replaces all query parameters
of the original url:, (*34)
{{ entry.myLinkField.getUrl({
scheme: 'https',
queryMode: 'replace',
query: {
param: 'value'
},
}) }}
hasElement($ignoreStatus = false)
Returns whether the link points to an element (e.g. entry or asset)., (*35)
{{ entry.myLinkField.hasElement() }}
isEmpty()
Returns whether the link is empty. An empty link is a link that has no url., (*36)
{{ entry.myLinkField.isEmpty() }}
Properties
The properties generally expose the raw underlying data of the link., (*37)
ariaLabel
The aria label as entered in th cp., (*38)
<a aria-label="{{ entry.myLinkField.ariaLabel }}">...</a>
customText
The custom text as entered in th cp., (*39)
<a>{{ entry.myLinkField.customText }}</a>
target
The link target as text. Can be either _blank or an empty string., (*40)
<a target="{{ entry.myLinkField.target }}">...</a>
title
The title as entered in th cp., (*41)
<a title="{{ entry.myLinkField.title }}">...</a>
Eager-Loading
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., (*42)
{% set entries = craft.entries({
section: 'pages',
with: 'myLinkField',
}).all() %}
API
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:, (*43)
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., (*44)
Upgrading from Fruit Link It
If wish to migrate a field created using "Fruit Link It", please follow the
discussion and directions here:, (*45)
https://github.com/sebastian-lenz/craft-linkfield/issues/51#issuecomment-538782716, (*46)
Wallogit.com
