Hide Images in Overflow Text within Gather

Answered
image avatar

Samuel Brown

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

Date
    Newest
      image avatar

      Christopher Kennedy

      No problem :)

      0

      image avatar

      Samuel Brown

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

      0

      image avatar

      Christopher Kennedy

      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

      image avatar

      Samuel Brown

      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

      image avatar

      Christopher Kennedy

      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