Read more after x character...but also image

JavaScript
1

hi all guys
i need your help with this code, actually this code works fine and trim all text to specified lenght, but actually if there are images into post, this are completely removed. so i need to limit image to 0, and if someone click on “read more” can see all the images…here my code so far:

 $(document).ready(function () {
        // Limite caratteri settabile da pannello amministrazione
        const max = app.forum.attribute('Lenght');

        $('.Post-body').each(function () {
          var str = $(this).text();

          if ($.trim(str).length > max) {
            var subStr = str.substring(0, max);
            var hiddenStr = str.substring(max, $.trim(str).length);
            var ReadMore = app.translator.trans('flarum-ext-readmore.forum.readmore');

            $(this).empty().html(subStr);
            $(this).append(' <a href="javascript:void(0);" class="linkReadMore">' + ReadMore + '</a>');
            $(this).append('<span class="addText">' + hiddenStr + '</span>');
          }
        });
        $('.linkReadMore').click(function () {
          $(this).siblings('.addText').contents().unwrap();
          $(this).remove();
2

First of all:

app.forum.attribute('Lenght');

That is a misspelling that may be causing problems.

Also, do you have the complete code? If it isn’t available in an online, is there a repo? I’m not completely sure what you are saying, but I think if I see the code it may click.

3

the typo is ok because is a custom callback (it works even if there’s a typo, i will fix this later)

here the full code, that actually works, but remove all the present image…i want to be hidden the same as text

4

I’m sorry, I’m not able to understand what you want and I don’t know how to get your repo to work so I can’t figure out how to help you. Maybe someone smarter than me will have an idea.

5

this extension simply add a readmore button after length value (the famous typo :slight_smile: )
but acually if inside text there are images? these are completely removed.
i want to include image into “read more”.

thats all, thank u btw

6

I see you are using text, but as the name implies that will only get back text content, skipping all other elements (like images).

There’s a method for jQuery that gives you back all the content, not just text. (don’t remember the name since it’s been forever since I used jquery), I think it’s content() but I let you search for it.

With that, you can then filter the content as you see fit.
For example a possible approach would be to store all the images and then “reconstruct” them later.

But honestly this feels like a lot of work.
Unless you have a specific reason to remove text, in general the common approach is to hide content with CSS and show it again on click; opposed to actually remove it and re-add it.

Hope this helps :slight_smile:

7

so, u mean that i can do this with css only?

actually content() not work unfortunately :frowning:

8

This is but merely an initial attempt.

With a more structured page you can fine tune to your need.
But pretty much what I am doing is setting a max height with JS on load equal the whole content.
Then by default it shows only a portion.
On hover uses the full height.

Hope this helps.

9

anyone can make a working example for me based on my code?

$(document).ready(function () {
      // Limite caratteri settabile da pannello amministrazione
      const max = app.forum.attribute('Lenght');

      $('.Post-body').each(function () {
        var str = $(this).text();

        if ($.trim(str).length > max) {
          var subStr = str.substring(0, max);
          var hiddenStr = str.substring(max, $.trim(str).length);
          var ReadMore = app.translator.trans('flarum-ext-readmore.forum.readmore');

          $(this).empty().html(subStr);
          $(this).append(' <a href="javascript:void(0);" class="linkReadMore">' + ReadMore + '</a>');
          $(this).append('<span class="addText">' + hiddenStr + '</span>');
        }
      });
      $('.linkReadMore').click(function () {
        $(this).siblings('.addText').contents().unwrap();
        $(this).remove();
      });
    });
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.