Hide Images in Overflow Text within Gather

Answered


Posted Jan 14, 2023

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;
}

2

5

5 comments

No problem :)

0


That has fixed my issue! Thank you so much for your advice.

0


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 .postdetails container:
 
const postImages = document.querySelectorAll(".postdetails img");

postImages.forEach((image) => {
image.style.display = 'none';
});

1


Hi Christopher Kennedy,

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.

0


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?

0


Sign in to leave a comment.

Didn't find what you're looking for?

New post