The discussion revolves around making category logo images non-clickable. davidkingham initially tried to achieve this using CSS, but was unsuccessful. Johani explained that the issue lies with the <a> tag wrapping the image and title, and provided a solution by overriding the category-title-link template to move the image outside of the <a> tag. This involves adding a script to the </head> section of the active theme. davidkingham confirmed that the solution worked.
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!