0

I'm building a theme with html/css and liquid. The user can determine if a image should have an url or not. That's pretty easy to achieve with: 

<a href="{{ klant_logo.logo_url }}" target="{{ klant_logo.nieuw_tabblad }}" > <img src="{{klant_logo.logo_klant.src | img_url: 500, quality: 70 }}" alt="logo"/></a>

BUT, when the user doesn't add a url, the above code generates this as HTML which is still clickable and navigates to the top of the page (like with href="#">.

Is there a way (HTML, Jquery, i don't know) to make href="" only clickable if it has an actual url between the brackets?

EDIT: thanks for the quick reply's! This dit the trick:

{% if klant_logo.logo_url != "" %}
  <a href="{{ klant_logo.logo_url }}" target="{{ klant_logo.nieuw_tabblad }}" > <img src="{{klant_logo.logo_klant.src | img_url: 500, quality: 70 }}" alt="logo"/></a>
{% else %}
  <img src="{{klant_logo.logo_klant.src | img_url: 500, quality: 70 }}" alt="logo"/>{% endif %}
David Hakkert
  • 669
  • 3
  • 10
  • 25
  • 1
    Possible duplicate of [Is it possible to make an HTML anchor tag not clickable/linkable using CSS?](https://stackoverflow.com/questions/6727659/is-it-possible-to-make-an-html-anchor-tag-not-clickable-linkable-using-css) – zyd Sep 18 '18 at 19:02
  • @zyd thanks, never found that one after searching for half an hour... Fixed it myself though :) Thanks again for the help! – David Hakkert Sep 18 '18 at 19:06
  • 1
    that is an interesting solution you came up with, I like it! Simple and explicit – zyd Sep 20 '18 at 15:54

2 Answers2

1

You can have a CSS class that makes certain links unavailable:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

Then you can do something like this:

<a href="{{ klant_logo.logo_url }}" class="{{klant_logo.logo_url ? 'inactiveLink' : '' }}" />
dustytrash
  • 1,568
  • 1
  • 10
  • 17
  • Basically this:https://stackoverflow.com/questions/6727659/is-it-possible-to-make-an-html-anchor-tag-not-clickable-linkable-using-css – zyd Sep 18 '18 at 19:01
  • @dustytrash thx! That seems to work :) But I found an other approach as well a minute ago (I was to quick to start asking on stack...) with some variables that worked as well! – David Hakkert Sep 18 '18 at 19:03
1

The better logic would be to check the user entered value if its blank or null.

Also you might like to refer : jQuery hyperlinks - href value?

urs_ng
  • 33
  • 11