Right, so i’ve been using Hubspot for 14 days now, developing a theme for a client. Coming from the world of Wordpress with Advanced Custom Fields I quickly felt at home with Hubspot CMS.
However, one field type in particular is causing some frustrations:
1. Why is there no “Title” (link.title) input field embedded in the Link field type?
Use case: To create a custom button/link I need a Link field AND a text field: <a href=“module.link.url.href” title=“{{ module.custom_link_text }}”>{{ module.custom_link_text }}</a>
In comparison the Image field has an ALT text field embedded by standard.
If the Link field had an embedded Title input field I would only need 1 field to create a button with a link href, title and button text:
<a href=“module.link.url.href” title=“{{ module.link.title }}”>{{ module.link.title }}</a>
2. Unless i’m missing something I can’t test for ‘if link href is empty/exists’ on a multi language setup as the link href value will always contain a ‘hreflang’ value even when no link has yet been added by the editor.
Which means that {% if module.link.url.href != ‘’ %} will never be true
To solve this I need to add a boolean field like “Add link?” (add_link).
Use case: Only output <a> tag around my element IF the editor adds a link.
I think the two scenarios can be optimized a bit and save some fields in the process. If other methods exists for the same, feel free to share.
P.S: Why can’t you create a group before fields exists and why can’t groups be collapsed in the design manager for better overview?
Cheers
Welcome to the world of HubSpot Development! Where have you been all this time!
Adding some smart folks here that you should know 
@Anton , @Teun are both freaking amazing devs and will be able to help you as you learn the HubSpot world.
Thoughts on your questions:
1. You should submit an idea for the title attribute. The ideas forum is monitored and the more upvotes the better. link back here so anyone who is searching for it can find it and upvote.
2. you can write this statement to test:
{% if module.link_field.url.href %}
do stuff if there is a link
{% else %}
do stuff if there isnt
{% endif %}
I would also suggest exploring display conditions so you can hide a field from the content editor based on a condition. You can find out more here about half way down the page.3.
3. dunno 
. But I imagine you will move away from using the design manager and start creating fields in the json file. If you haven’t installed for VSCode, yet (assuming you use it), I suggest the HubSpot VS Code extension which has autocomplete for the field types and groups.
Good luck out there!
Hey @dennisedson Nice to meet you.
I use the CLI, but like the visuals of the designer to create fields and groups (then I just fetch the updates through the CLI and code locally in VS from there).
However:
{% if module.link_field.url.href %}
do stuff if there is a link
{% else %}
do stuff if there isnt
{% endif %}
This is actually my issue. Since the solution is multi-lingual {% module.link.url.href %} will actually automatically always output ‘hreflang’ details and as such will never be empty/not set when checking.
If I remember correctly i tested with both " if module.link.url.href != ‘’ " and just " if module.link.url.href ". Both won’t work as hreflang=xx/xx is added by default, even before an editor adds an actual link.
Hope this is more clear now? 
Hi @TTimes ,
Can you paste the output of {{module.link_field|pprint}} here? That way, we can write a valid if statement.
Here is what I generally use for link fields:
{% set isLink = module.link_field.url.href || module.link_field.url.href.content_id %}
{% set tag = isLink ? 'a' : 'div' %}
{% set url = module.link_field.url.type == 'EMAIL_ADDRESS' ? 'mailto:'~module.link_field.url.href : module.link_field.url.href %}
{% set target = module.link_field.open_in_new_tab ? (module.link_field.no_follow ? 'target="_blank" rel="noopener nofollow"' : 'target="_blank" rel="noopener"') : (module.link_field.no_follow ? 'rel="nofollow"' : '') %}
<{{tag}} class="link" {% if isLink %}href="{{url}}" {{target}}{% endif %}>
{{module.link_title}}
</{{tag}}>
Hi @Teun
The issue at hand is not really how to write a working if statement. I can get around the issue by adding a boolan e.g. like “Add Link?” (module.add_link) toggle and just check if the editor enabled it.
What i’m trying to get at, is that on a multi-language site, the Link field will automatically output hreflang info regardless of anyone actually having added a link or not.
So if I set it up like this:
{% if module.link.url.href %}<a href="{{ module.link.url.href }}">{% endif %}
<div class="my-class">
<p>The div can be wrapped by a link if the editor so chooses</p>
</div>
{% if module.link.url.href %}</a>{% endif %}
If I then go to the CMS editor and fill and data but NOT add a link, the A tag will still be rendered because of the automatic added ‘hreflang’ value
That means that the
{% if module.link.url.href %}
part should be adjusted. So if we get the output of {{module.link|pprint}} I can determine what needs to be adjusted.
``
Hi @Teun
Consider the below screenshots where I test for varius versions (some I guess would never work, just tested them anyway) of link.href.
It’s important to note that the block on the left has a link added in the editor and the block on the right does not.
P.s: It wasn’t hreflang but ‘hslang’ that’s being output, my bad.
The pprint output of {{ area.link|pprint }} is as follows for the two blocks:
{{ area.link.url.href|pprint }} outputs:
(String: )
1. Testing {% if area.link %}
Block on the right outputs an <a> tag on the right block with no added link on it:
<a href="?hsLang=da" class="areas__list-link">
2. Testing {%if area.link.url %} and {% if area.link.url != ‘’ %}
Same result for the right block:
<a href="?hsLang=da" class="areas__list-link">
3. Testing {% if area.link.url.href %} and {% if area.link.url.href != ‘’ %}
Same result for the right block:
<a href="?hsLang=da" class="areas__list-link">
I tried testing for null too, to no avail, same result. I made sure to clear cache every time.
Can you spot what causes this?
Hey @TTimes,
this can be done - but can get out of hand very fast in more complex modules.
That’s why it’s recommeded to do with if, elif/else.
Regarding the multilang thing - do you have some link prefilled? If so - try an empty (input) field.
if you’d like to cut it you could do it like this:
{% if module.link_field.url.href %}
{% set href_without_hreflang = module.link_field_url.href|cut('/hreflang=*') %}
<a href="{{ href_without_href }}">{{ title }}</a>
{% else %}
{{ title }}
{% endif %}
Also here are all filters that you can apply.
hope this helps
best,
Anton
Hi @Anton
Not prefilled to my knowledge. It seemed like hubspot fills the href with the hreflang regardless of an editor editing the field or not - which was why i wanted to ‘flag’ it as i don’t know if that is the desired behaviour?
Didn’t yet know about the cut method. That will do it in this case, thanks!
Hi @TTimes,
the link title is a (very) long requested feature - nobody knows why it’s not implemented… @dennisedson any news on that btw?
Your approaches with seperated link AND text field is one of the few(if not the only one) solutions which works flawlessly.
for your second topic:
First of all - do you work in the design tools or CLI? just asking because if you’re just getting started I would recomend to go either full design tools or hybrid - it’s easier.
If you’re in the module view of the design tools you can set up one conditional logic(scroll down in the right sidebar of each group/function) and then just copy paste the group(if you set the logic to a group) snippet into your HTML part.
{% if module.link.url.href %}
{% set href == "module.link.url.href" %}
{% set title == "module.custom_link_title}}"%}
...
<a href="{{ href }}" title="{{ title }}">{{ title }}</a>
{% else %}
{{ title }} {# display this text without a link #}
{% endif %}
You could set the logic up as follows:
- Link: no logic
- title: unless module.link field is empty
This would display the title field to the marketer if he first puts in a link
If you’re working with CLI/Hybrid:
You can set up the logic via CLI too but it can be frustrating for beginners.
You have to give module(text) a unique ID and call this ID in the desired function/group.. Your JSON should look like this.
{
"default": false,
"display": "toggle",
"display_width": null,
"help_text": "",
"id": "a03fbd0c-5f44-85dd-f9c1-0a0a3e3e1536", // controling field; the important part
"inline_help_text": "",
"label": "Show buttons",
"locked": false,
"name": "show_button",
"required": false,
"type": "boolean"
},
...
{
"display_width": null,
"help_text": "",
"id": "buttons.cta",
"inline_help_text": "",
"label": "CTA",
"locked": false,
"name": "cta",
"required": false,
"type": "cta",
"visibility": {
"controlling_field": "a03fbd0c-5f44-85dd-f9c1-0a0a3e3e1536", // this has to be the same ID as the controling field
"controlling_value_regex": "true", // if you work with booleans true/false, if you'd like to use selects type in the value
"operator": "EQUAL"
}
},
As mentioned - you can make your life much easier if you “design” all the functions and logic in the design tools and then just copy/paste the JSON to the local JSON file
hope this helps,
best,
Anton
As always, @Anton , you are amazing
BUT! Do not give me more work
Just because I like you, I will bring this up with the team regarding the link title.
Also, isn’t it like 2am or something your time?
Alright, sorry @TTimes ,
I am taking over this post. What is the best gif to represent the stereotype of the developer who doesn’t sleep and codes all night???
Hey Anton
Thanks for the inputs. Much appreciated.
I’m using the visual designer to create and group fields and then fetch them through the CLI for local development. Just prefer the visual builder over JSON code in that regard
If you see my answer to Dennis, i’ve clarified the issue a bit further.
Turns out that the hslang output was coming from enabled “Enable Language Specific Redirects” under Settings which would always populate links on multi-language sites - even if no link was added through the editor.
Just wanted to update the thread if someone would ever face the same issue