How to create a custom link field for a component?

Developer Support CMS Development
1

Hi there! I’m using one of the free custom modules from the marketplace, ‘Ark Features’, and I’m trying to work out how to add a link field to the module that will allow us to link each ‘feature’ to its own page. From what I can see it should theoretically be a straightforward thing to do but I’m new to Hubl and can’t seem to get it to work :confused: any advice would be hugely appreciated!

2

Hi @tommitchell

First:

Search for the “Feature Repeater Settings” in the right sidebar and “open” them.

Second:

add a text widget to it and name it something like “link to featured page”. You can prefill it with a demo link but it’s not really nessesary.

You’ve successfully created the baseline for the linkable part :slightly_smiling_face:

Now it’s up to you.

1. If you want that the whole “column” is clickable add a wrapping link element around everything inside the “for-loop” and paste the widget-code from the "link-"text-widget you’ve just created into the href-part

It should look something like this

{# ----- Features Repeater ----- #}
 {% for item in module.content.features_repeater %}
 <a href="{{THIS.IS.THE.PASTED.WIDGET.CODE}}">
<div class="ark-features-01-box ark-element-animation">
 {% if module.content.features_repeater_settings.choose_image_or_icon == 'image' %}
 	<img class="ark-features-01-box-image" src="{{ item.image_icon.src }}" alt="{{ item.image_icon.alt }}" width="{{ item.image_icon.width }}" height="{{ item.image_icon.height }}">
 {% else %}
 	<p class="ark-features-01-box-icon">
 {% icon
 name="{{ item.icon.name }}"
 style="{{ item.icon.type }}"
 unicode="{{ item.icon.unicode }}"
 %}
 	</p>
 {% endif %}
 <h4>{{ item.title }}</h4>
 <p class="ark-features-01-box-text">{{ item.short_description_text }}</p>
 </div>
</a>
 {% endfor %}
 {# ----- /Features Repeater ----- #}

2. If you want to have a button under the “Featured title and text” you can add it inside the “for-loop”,too.

It’s a bit more time consuming(you should add some more text-widgets, css-classes etc) but could be better.

If you want the button version and need help - you can post it here

regards,

Anton

3

Thank you so much Anton! Really appreciate your help.