Extend Multi URL Picker with 'class' and 'rel' and text options

[Ambertvu]

Basically as the title.

It would be great to have the ability when you add a link to an URL picker, to also be able to supply a class and/or rel field and a seperate text to display. (or a title tag, depends on how you use it).

So you can for example make a url that looks like this:
<a href='@item.Url()' target="@item.Target" rel="@item.Rel" class="@item.Class" title="@item.LinkName">@item.LinkText</a>

Perhaps the Rel and Class can be based on an existing list of values that can be defined, or to be able to fill in yourself.

[Ambertvu]

Hm I just found the rel function already has his own topic: #10492 ,but it only talkes about the Rel option.

[soreng]

@Ambertvu I do get that in your usecase it may make sense to have the class and rel options, but you could easily get the desired behaviour from just creating the properties yourself.

Say you need a list of links, normally you don't want them to be shown different. We often use this to create a navigation, or links in the footer etc. If we need to create a CTA we can use the url picker as is, but have a "button style" next to the link, that can specify the class.

The rel option is somewhat complex, and most editors would not need to specify this. As in the other thread, there is a distinction between internal and external links. The proposed solutions are to look at the href to figure out what the rel should be - not having it as an input.

[Ambertvu]

@soreng Hmm I tend to agree now that I think more about it. I'll add some comments to the Rel thread.
Guess the Class option is indeed a bit overkill in general, however a extra text field would still be nice (So you could set a different title tag in comparison to the name that appears in the html)

[bjarnef]

I think it would useful the add a Title property as addition to the current Name property (which it labeled "Link title") as editors sometimes want a different tooltip than the link text itself.
The labels could be "Link text" and "Link title" or maybe just "Text" and "Title" with a short description.

Not sure if there is a enum in .NET5 for various target, otherwise it could be useful with one it core. Or a HTML helper on Umbraco.Cms.Core.Models.Link to make it easier to render link with target and rel attribute.

For example:

public static IHtmlContent RenderLink(this IHtmlHelper html, Umbraco.Cms.Core.Models.Link link, string linkText = null)
{
    linkText = !string.IsNullOrEmpty(linkText) ? linkText : link.Name;

    string elem = $"<a href=\"{link.Url}\" target=\"{link.Target ?? "_self"}\" rel=\"{(link.Target == "_blank" ? "noopener" : null)}\">{linkText}</a>";

    return new HtmlString(elem);
}

It could set title attribute as well.

RE class attribute I think this is edge cases and probably not something editors need to specify.

I tend to have a HTML helper like this as well:

public static IHtmlContent RenderButtonLink(this IHtmlHelper html, Umbraco.Cms.Core.Models.Link link, string buttonText = null, string cssClasses = null)
{
    buttonText = !string.IsNullOrEmpty(buttonText) ? buttonText : link.Name;

    cssClasses ??= "btn btn-secondary";

    string elem = $"<a class=\"{cssClasses}\" href=\"{link.Url}\" target=\"{link.Target ?? "_self"}\" rel=\"{(link.Target == "_blank" ? "noopener" : null)}\">{buttonText}</a>";

    return new HtmlString(elem);
}