To populate data on front-end, there is several ways to enhance and customize output. You can just use {my_channel_field_short_name}
under your {exp:channel:entries}
tag to get output of your Link field. There is some parameter too to enhance/customize your output.
Under your channel entry, You can just pass {my_channel_field_short_name}
to fetch value of given field.
{super_link_field} // Get Link in Anchor tag
{super_link_field:link} // Get Link
{super_link_field:text} // Get Link Text
{super_link_field:target} // Get Link Target
{super_link_field:target_string} // Get Link Target String
{super_link_field:type} // Get Link Type
{super_link_field:type_handle} // Get Link Type Handle
{super_link_field:raw} // encode data. Only use of this to use with {exp:super_link_field:render}
You can use Tagpair To create your custom link and you param like prefix, class, id, title, cache, override:title, default:title, override:target, default:target
Passing prefix will be used as prefix of field variable sub fields. Default field prefix will be item. Note that Prefix will work with tagpair code and not with single line code.
{super_link_field prefix="link"}
{link:render} // Get Link in Anchor tag
{link:text}
{link:link}
{/super_link_field}
Passing any attributes will be possible with this parameter. You can pass class, id, rel, title, data-id etc.
{super_link_field attr:class="super-link" attr:rel="field-button"}
{item:render}
{/super_link_field}
// Output
<a href="http://example.com" class="super-link" rel="field-button">Link Text</a>
You can cache the output that will save few queries on each page load. No need to use this if you are using ce cache or other cache plugins as output will be cache by those plugins automatically.
{super_link_field cache="no"} // Default is yes (coming from config. You can change all to no by changing in config.php file)
{item:render}
{/super_link_field}
You can use to this param to override Link Text.
{super_link_field override:title="My Link Field"}
{item:render}
{/super_link_field}
// Output
<a href="http://example.com">My Link Field</a>
You can use to this param to set a Default Link Title. If no title is assign to the link, default link title will be printed.
{super_link_field default:title="Click Here"}
{item:render}
{/super_link_field}
// Output
<a href="http://example.com">Click Here</a>
You can use to this param to override link target to frontend
{super_link_field override:target="_blank"}
{item:render}
{/super_link_field}
// Output
<a href="http://example.com" target="_blank">Link Text</a>
You can use to this param to set default link target to frontend
{super_link_field default:target="1"}
{item:render}
{/super_link_field}
Variables you can use in: (assuming item as a prefix.)
This variable will print the HTML link.
{super_link_field}
{item:render}
{super_link_field}
// Output
<a href="http://example.com">Link Text</a>
This variable will return only LINK.
{super_link_field}
{item:link}
{super_link_field}
// Output
http://example.com
This variable will return only Link Text.
{super_link_field}
{item:text}
{super_link_field}
// Output
Link Text
This variable will return type of selected link. It can be any of the following:
{super_link_field}
{item:type}
{super_link_field}
This variable will return type label of selected link. It can be any of the following:
{super_link_field}
{item:type_handle}
{super_link_field}
This variable will return target of the URL. It can be empty or 1. Where blank is self and 1 is blank.
{super_link_field}
{item:target}
{super_link_field}
This variable will return target string of the URL. It can be empty or _blank.
{super_link_field}
{item:target_string}
{super_link_field}
Here is some examples of use this fieldtype in different ways:
{super_link_field class="super-link"}
//you can use parameter whatever you want
{grid_field}
{grid_field:super_link}
{grid_field:super_link:link}
{/grid_field}
{grid_field}
{grid_field:super_link}
{item:render}
{/grid_field:super_link}
{/grid_field}
{super_link_fluid}
{super_link_fluid:super_link}
{/super_link_fluid}
{super_link_fluid}
{super_link_fluid:super_link}
{content}
{/super_link_fluid:super_link}
{/super_link_fluid}
{super_link_fluid}
{super_link_fluid:grid_field}
{content}
{content:super_link}
{/content}
{/super_link_fluid:grid_field}
{/super_link_fluid}