Make the category logo image not clickable

[davidkingham]

The way I have my category images set up it is confusing users when they see the image is clickable, so I would like to make them non-clickable, a regression from this fix

I have tried this but it did not change anything

.category-logo {
    pointer-events: none !important;
}

[Johani (Joe)]

It doesn’t work because you’re removing pointer events from the image:

While the clickable element is the <a> tag that wraps around both the image and the title and looks like this:

Clicking anywhere in that area will take you to /c/landscapes

The cleanest way to achieve the desired result is to move the image outside of the <a> tag. so you go from this:

to this:

Then the image will not be clickable:

You achieve that by overriding the template

Try something like this in the </head> section of your active theme:

<script type="text/x-handlebars" data-template-name="components/category-title-link">
{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
  <div class="category-text-title">
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}
    <span class="category-name">{{dir-span category.name}}</span>
  </div>
</a>
{{#if category.uploaded_logo.url}}
  <div>{{cdn-img src=category.uploaded_logo.url class="category-logo"}}</div>
{{/if}}
</script>

Do note that since this is a template override, you’d need to update it if any changes are made to the template in Discourse so that you don’t miss out on any newly added features.

[davidkingham]

That worked brilliantly, thank you!