Hide Images in Overflow Text within Gather
I'm attempting to build a community within Gather. I would like it so that on the Topic page each post has a 2 line preview of the body text within it. After some research, I was able to get some HTML and CSS to function exactly the way that I wanted it to.
However, this doesn't take into account that posts can use images. Therefore, the image gets pulled through alongside the text if a user has added an image to the first few lines. Ultimately, the page breaks because of this.
How can I make it so that the code ignores any images being pulled from the body text within the overflow? Here is the code i'm using.
<div class="postdetails">
{{details}}
</div>
.postdetails {
font-weight:200;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
-
Hi Samuel,
Are you looking to provide no preview in cases where there are images? Or are you looking to do a text-only preview in all cases?
-
In the case that someone has used an image, I would be looking for only the text to be pulled through into the post list page rather than nothing at all.
-
Hi Samuel,
Thanks for the context. This would require some custom JS to locate the images within the post content and then hide them. Here's a sample that does so within your example.postdetailscontainer:
const postImages = document.querySelectorAll(".postdetails img");
postImages.forEach((image) => {
image.style.display = 'none';
}); -
That has fixed my issue! Thank you so much for your advice.
-
No problem :)
Please sign in to leave a comment.
5 Comments