【Need Help】The title of the article is displayed above the picture in the recommended articles

[vlafriday]

Discussed in https://github.com/tangly1024/NotionNext/discussions/1936

^{Originally posted by vlafriday March 2, 2024} Hello, I have a preview with the text in the recommended articles on the post page. But the title of the article is displayed above the picture. I wanted to ask if I can disable the display of text above the preview. So that only the picture is visible. Where is it configured?

Here https://www.vlafriday.space/my-set-for-a-25-year-old-grandfather

Screenshot

[tangly1024]

Hi, currently there is no toggle to control whether the text is displayed here, but you can easily modify a piece of code to achieve the requirement of hiding the text.

The relevant code is located here: https://github.com/tangly1024/NotionNext/blob/80a7a9b2d8e901faec5f010229c05b83ad6e2ead/themes/hexo/components/ArticleRecommend.js#L49-L51

Simply add invisible or hidden to the className, and the text will be hidden.

[vlafriday]

Thanks a lot, very helpful 👍

[vlafriday]

@tangly1024 how can I add a shadow to this picture? to make the white text better visible in a light picture

[vlafriday]

before pointing the mouse at the picture

[tangly1024]

Adding a brightness-75 will be helpful:

https://github.com/tangly1024/NotionNext/blob/695fca0dac2db3a6bfe8643f260862641d741d70/themes/hexo/components/ArticleRecommend.js#L47-L54

This will better highlight white text:

Brightness defaults to these options:

[vlafriday]

@tangly1024 but how can I add a shadow to the picture? Not the brightness

[tangly1024]

Adding a shadow-xl will be helpful:

https://github.com/tangly1024/NotionNext/blob/695fca0dac2db3a6bfe8643f260862641d741d70/themes/hexo/components/ArticleRecommend.js#L45!

改为：

className="shadow-xl flex h-40 cursor-pointer overflow-hidden"

[vlafriday]

@tangly1024 I did this, but the image still has no shadow :(

The shadow is not needed for the text. The shadow is needed for the image