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;
}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.
That worked brilliantly, thank you!