Topic List Previews Theme Component

Yeah, Featured Images are not enabled by default … they need to be turned on in the Theme Component settings. Look for all those settings with “Featured Images” in the description.

Also note that if you choose to identify things by Tag, make sure those topics are Tagged.

I notice that the entire div with “tiles-grid-item topic-list-item” goes gray on hover and the cursor is a pointer on hover - however the entire item/card is not clickable, but only the text and title. could it be changed so that the entire item/card is clickable?

how and why I found this and would like to request a change: in case i have a short title - the space right of the title is not clickable but the gray background/pointer cursor tells me it is. in my case i also set the images to 25% of the width - so all the space around the image is not clickable but the background/cursor tells me so.

to me it seems that the problem is caused because the link is attached to the text and image and not the surrounding div - which sets the change of background color/cursor on hover.

i tried to play around with CSS to change that - but I did not find a working solution as I am just working in try’n’error mode in CSS - and have no JS knowledge

1 Like

The title, text preview excerpt and thumbnail should all be clickable.

I experimented with the whole surface being clickable (which makes sense functionally, for sure!) but that caused an issue with EmberJS and clicking the title stopped working, so I removed it.

The issue comes from the fact I’m using the standard Title component and nesting it within a link seems to cause problems?

If you can make it work, feel free to PR.

There may have to be a big refactor in a few months due to up-and-coming changes in core, so if you haven’t addressed it by then I may consider it then.

haha, you honor me - but for now this is way above my CSS/JS skills - what I will do instead is turn off the pointer cursor for the item/card as well as the bg-color change on hover : )

1 Like

The latest commit breaks the component on stable (and probably on 3.1.0beta6 and lower as well). Can you please add a .discourse-compatibility file?

1 Like

PR Welcome

NB It’s never been intended to support prior versions or Stable but if that can help facilitate that please go ahead.

Can you please let me know the commit hash of the core change you made the latest change for?

So I didn’t work this out directly, but I copied the approach from David’s PR to “News Plugin”, which included this entry:

Strangely this entry didn’t seem to help someone who was forced to pin a fork manually?

BUT: I’ve found the commit and it is here: DEV: Convert share-topic modal to new component-based API (#22154) · discourse/discourse@c6cd3af · GitHub

But that’s marked: v3.1.0.beta7 :thinking: ?!

So I’m assuming here we could add:

< 3.1.0.beta7: a4c3fc6ed3caf8f4aa93b20f44ad14d200794823?

@RGJ I’ve gone ahead and committed that:

Let me know if that solves your problem or not …

2 Likes

Seems it does, thank you!

2 Likes

Note I switched those around - I think the newer commit should be at the top.

Strange bug/behaviour.
In Admin > customize > Themes > Light > Custom CSS/HTML > Footer, I added some simple html to add a footer to our community.
When I enable this component, that html doesn’t get rendered. I checked, it’s not hidden with CSS due to some fluke conflict, it just isn’t loaded.
Any ideas what it could be?

<div class="px-6 text-white bg-black h-[250px] md:h-[187px] lg:h-[198px] cust-footer">
	<div class="flex flex-col justify-between h-full py-10 md:flex-row-reverse md:items-center ">
		<div class="socials"><a href="https://coherence.io/discord"><img src="https://coherence.io/images/icon-discord.png" alt="Discord"></a><a href="https://www.facebook.com/coherence.io"><img src="https://coherence.io/images/icon-fb.svg" alt="Facebook"></a><a href="https://twitter.com/coherenceio"><img src="https://coherence.io/images/icon-twit.svg" alt="Twitter"></a><a href="https://www.instagram.com/coherence_io"><img src="https://coherence.io/images/icon-insta.svg" alt="Instagram"></a><a href="https://www.linkedin.com/company/coherence-io"><img src="https://coherence.io/images/icon-linkedin.svg" alt="LinkedIn"></a></div>
		<div class="flex flex-col gap-2"><a href="https://coherence.io/"><img src="https://coherence.io/images/coherence-logo-white.svg" alt="coherence logo" class="w-32 h-6 mx-auto lg:w-40 lg:h-10 logo md:-ml-2 lg:ml-0"></a><div class="copyright">©2023 coherence ApS. All rights reserved.</div><div class="flex flex-wrap justify-center w-full gap-4 mt-8 md:mt-4 md:justify-start"><a class="text-white border-b-2 border-blue" href="https://coherence.io/privacy">Privacy Policy</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/terms">Terms of Service</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/careers">Careers</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/ggj">Global Game Jam</a><a class="text-white border-b-2 border-blue" href="https://coherence.io/blog">Blog</a></div></div></div>
	</div>
</div>

May I ask - how is this related to the Topic List Previews Theme component?

So you’re surprised too? I’ll try to illustrate:
This is on every community page.

Without the Previews component enabled. I have a footer (yellow), with content. Cyan is the other main components, to illustrate the position of the footer.

With the Previews component enabled. The footer content (yellow) completely disappears, the div is empty.

1 Like

TLP shouldn’t touch the Categories page at all (it’s structured in a way that prevents discrete override - plus there’s no space for the extra stuff!) - unless you have Featured Images active.

Are you seeing any red items in the console?

@per_coh I can repro, thanks for your persistence.

Very strange!!

However, there are no Javascript errors afaics.

There’s no competition for that plugin outlet either.

I will take a deeper dive when I have time, however, feel free to PR a fix if you find one.

1 Like

Thanks @merefield , really appreciate it. I love this component, it’s gorgeous and easy.
Only thing I noticed, relevant or not, is that the footer’s ember “id” changes between 156 and 157. Almost as if 157 is reserved?

@merefield this component is creating problems in advanced search. Despite there being multiple search results (50+), only one will be displayed in the list.

Here is the error in console:

4 Likes

Thanks for the report. I’ll take a look. Almost certainly a breaking change from core.

1 Like

That’s fixed:

4 Likes