Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #862976

    Hi everyone,

    I have read extensively about this topic but it seems none of the solutions I found on the forum are working…

    My goal is to add a “Read more” link to the masonry gallery, right after the excerpt.

    I have found some solutions here and there, but none of them work :

    1) Adding a filter in functions.php

    add_filter('avf_masonry_loop_prepare','avia_change_default_link', 10, 2);
    function avia_change_default_link($loop, $entries)
    {
    	foreach($entries->posts as $key => $entry)
        {
            if($entry->post_type == "post")
            {
                $more 	 		 =  "<br /><span class='masonry-more-link-arrow'>".__('Read more','avia_framework')."</span>";
    			$loop['content'] =   avia_backend_truncate($entry->post_content, apply_filters( 'avf_masonry_excerpt_length' , 60) , apply_filters( 'avf_masonry_excerpt_delimiter' , " "), "…", true, '') . $more;  
            }
        }
    
        return $loop;
    }

    This does not work, since the excerpt of all articles / portfolio items shown in the masonry are then the same (and equal to the excerpt of the last item). It seems there is a variation on the forum with “$loop[‘key’][‘content’]” instead of “$loop[‘content’]”, but this doesn’t work either.

    2) Adding some Jquery code in functions.php : as shown at the bottom of the 1st link, suggested by Ismael (#813683)

    // masonry read more
    function ava_custom_script_mod(){
    ?>
    <script>
    (function($){
    	function a() {
    			$('<div class="av-masonry-read-more">Read More</div>').insertAfter('.av-inner-masonry-content-pos');     
    	}
    
    	a();
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script_mod');

    This works, however if you have a “Load more” button (eg not all your articles are initially shown, and the user can add some by clicking on this button) then the new articles (which are uploaded after page load) won’t have this tweak, so it doesn’t work very well after all.

    3) Last, the code change in masonry_entries.php suggested by Ismael on the 1st link (middle of page, #410335) didn’t work at all for me, even though I did a copy of the masonry_entries.php file and set it up in child theme > config-templatebuilder > aviashortcodes.

    Since there are several forum threads about this topic / problem, it would seem to me that this is a much-needed option and not only for me…

    Any suggestion would be welcomed…

    Thanks by advance,

    Bastien

    • This topic was modified 7 years, 1 month ago by Ybastien.
    #863813

    Hey Ybastien,

    Thank you for using Enfold.

    Please replace the script with the following code.

    // masonry read more
    function ava_custom_script_mod(){
    ?>
    <script>
    (function($){
      $(window).on('av-height-change', function() {
        $('.av-masonry-entry').each(function() {
          var more = $(this).find('.av-masonry-read-more');
          var cont = $(this).find('.av-inner-masonry-content-pos');
      
          if( more.length == 1 ) return;
          $('<div class="av-masonry-read-more">Read More</div>').insertAfter(cont);
        });
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script_mod');

    Best regards,
    Ismael

    #863822

    Perfect, this works, thanks a lot !

    I would have slightly preferred a pure-php solution (like in 1st example) but since this works I will go with it, no problem & thanks a bunch !

    #863834

    if this could be useful to others, I made 1 change to your code so the “read more” link is added within the excerpt, which could be useful in some cases depending on the design you want…

    /* Add a "read more" link" to masonry elements */
    function ava_custom_script_mod(){
    ?>
    <script>
    (function($){
      $(window).on('av-height-change', function() {
        $('.av-masonry-entry').each(function() {
          var more = $(this).find('.av-masonry-read-more');
          var cont = $(this).find('.av-masonry-entry-content');
      
          if( more.length == 1 ) return;
          cont.append('<div class="av-masonry-read-more">Read more</div>');
        });
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script_mod');
    
    #864385

    Hi,

    Glad it worked. Thank you for the modification. We’ll close the thread now.

    Best regards,
    Ismael

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘"Read more" in masonry gallery / portoflio’ is closed to new replies.