# 使分类标志图片不可点击

**URL:** <https://meta.discourse.org/t/make-the-category-logo-image-not-clickable/90661>\
**Category:** Support\
**Created:** [2018年六月25日 03:21 UTC](https://meta.discourse.org/t/make-the-category-logo-image-not-clickable/90661 "2018-06-25T03:21:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)\
**Post date:** [2018年六月25日 03:21 UTC](https://meta.discourse.org/t/make-the-category-logo-image-not-clickable/90661/1 "2018-06-25T03:21:31Z")

</div>

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](https://meta.discourse.org/t/category-logo-image-is-not-clickable/37003)

I have tried this but it did not change anything

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

```

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2018年六月25日 04:51 UTC](https://meta.discourse.org/t/make-the-category-logo-image-not-clickable/90661/2 "2018-06-25T04:51:50Z")

</div>

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

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/1/3/13afa31c4a7a7508e4dc47a0e6234cd7d15b86ca.jpg)

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

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/d/3/d3636ffed0459d888c20a3ba549ec7c16493cb3e.PNG)

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:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/2/c/2c743350d89a9e837492cb0370f0a19778cb8889.PNG)

to this:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/7/4/74e6b96a58233bca0b37e839568e44733246cfca.PNG)

Then the image will not be clickable:

 ![images](https://global.discourse-cdn.com/meta/original/3X/2/6/2692d4f22f3b872759f58e87eac150a69a6e18b4.gif)

You achieve that by overriding the [template](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/category-title-link.hbs)

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

```plaintext
<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.

---

<div class="post-metadata">

**Author:** ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)\
**Post date:** [2018年六月25日 14:53 UTC](https://meta.discourse.org/t/make-the-category-logo-image-not-clickable/90661/3 "2018-06-25T14:53:02Z")

</div>

That worked brilliantly, thank you!

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2018年七月25日 14:53 UTC](https://meta.discourse.org/t/make-the-category-logo-image-not-clickable/90661/4 "2018-07-25T14:53:10Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.