最近搜索

没有最近搜索

Hide Images in Overflow Text within Gather

已回答
image avatar

Samuel Brown

已于 2023年1月14日 发布

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 条评论

日期
    image avatar

    Christopher Kennedy

    Zendesk Developer Advocacy

    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

    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

    Zendesk Developer Advocacy

    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

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

    0

    image avatar

    Christopher Kennedy

    Zendesk Developer Advocacy

    No problem :)

    0

    请先登录再写评论。

    找不到所需的内容？

    新建帖子