Streaming live at 10am (PST)

Unable to box exit icon on isblank (new window/tab) links on CMS

#1

How do you insert exit box symbol after every isblank link on CMS rich text block?
image

Doing the bg trick works on ALL links, but I need it to only work on new window External isblank links

#2

Use an overlay div and using conditional visibility show the div IF the link is blank.

#3

@aaronocampo
Can post an example / screenshot please?
How to filter if external new window link / isblank?

#4

Can you share your read only link please?

#5

Page:
http://html-sandbox.webflow.io/cms-ext-link-icon

Preview LInk:
https://preview.webflow.com/preview/html-sandbox?utm_source=html-sandbox&preview=e67118bc353dff859a7c3e046fc087ce



#6

Ok, a couple of things first:

  1. Why you need the link to be a rich text element?
  2. When entering a new cms item on the rich text field you can link certain words to wherever you want:
#7

@aaronocampo

  1. The author / editor writes post in CMS Rich Text Block, and use links in it (blog). Some links are internal, some links are external (for example citation to external page -> target="_blank").
  2. We’re looking for a solution to append exit window symbol on only external links, since alt code only works on windows devices, but show up as square on Mac / iOS devices.
  3. Custom span-exit_window class works on non CMS text based elements. Unable to span-exit_window external links in CMS rich text block.
#8

I just posted this to another topic. It also applies here.

You would need to use some custom code (JS/jQuery) to append the target=“blank” declaration to an anchor element (external link only) within a classed RTF element. I have seen unwarranted concern about using this declaration on webflow sites, but this should not be an issue as there is no user generated content.

In addition you would just toggle a class on those links to add a graphic element (an svg for example) that you created on styleguide page for example.

1 Like
#9

Here is a simple set of examples over at css-tricks.com you could customize for your needs.

1 Like
#10

Thanks @webdev This looks like it’ll do the trick!