Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #396130

    Hi,

    I really love the masonry blog because of the load more function. It’s kinda lazy load in a way which makes the site speedier because I’m doing the infinite scrolling on my homepage.

    But the thing is, I need the Image Size to be exactly like the blog post grid layout.

    Can you advise how to achieve this?

    Many thanks,
    Hafeez

    #396362

    Anyone?

    #396866

    Hey!

    The Masonry has an option for changing the image sizes. You can set it to “Perfect grid” and play around with the columns to get the sizing you want. You can place the Masonry inside column shortcodes to change the overall size as well.

    Regards,
    Elliott

    #396867

    Hey!

    Thank you for using Enfold.

    Adjust the Column and Size Settings then install this plugin: https://wordpress.org/plugins/simple-image-sizes/

    Go to Settings > Media panel. Adjust the “masonry” thumbnail size. Update then save changes. Regenerate the thumbnails after.

    Cheers!
    Ismael

    #397295

    Hi Elliott and Ismael,

    Thanks for replying.

    I’ve already set it to perfect grid with 3 columns. That’s the look that I want except for the images.

    Plus I’ve tried Ismael’s guide and set the masonry images to 495 x 400 px.

    This is what it looks now: http://i.imgur.com/wKpB6VX.jpg

    I just need the images to be squarish like the blog post. I understand if they need to be cropped and the height of each box will be increased. That’s perfectly fine.

    This is what I want it to look like: http://i.imgur.com/GlmQ1al.jpg (but with title and excerpt)

    Perhaps I need to change it to blog post grid layout? But i really need the load more/infinity scrolling function because the page will have thousands of posts. It will show 9 at a time.

    Can you help?

    Thanks,
    Hafeez

    #397414

    Hey!

    That is possible but it will require a custom modification. Edit config-templatebuilder > avia-shortcodes > masonry_entries.php. Look for this code:

    $items .=		"<figure class='av-inner-masonry main_color'>";
    				$items .= 			$bg;
    				
    				//title and excerpt
    				if($this->atts['caption_elements'] != 'none' || !empty($text_add))
    				{
    					$items .=	"<figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='avia-arrow'></div>".$text_before;
    					
    					if(strpos($this->atts['caption_elements'], 'title') !== false){
                            $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
    						$items .=	"<h3 class='av-masonry-entry-title entry-title' {$markup}>{$the_title}</h3>";
    					}
    
    					if(strpos($this->atts['caption_elements'], 'excerpt') !== false && !empty($content)){
                            $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
    						$items .=	"<div class='av-masonry-entry-content entry-content' {$markup}>{$content}</div>";
    					}
    					$items .=	$text_after."</div></figcaption>";
    				}
    				$items .= 		"</figure>";

    Replace it with:

    $items .=		"<figure class='av-inner-masonry main_color'>";
    				$items .= 			$bg;
    				
    				
    				$items .= 		"</figure>";
    				//title and excerpt
    				if($this->atts['caption_elements'] != 'none' || !empty($text_add))
    				{
    					$items .=	"<figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='avia-arrow'></div>".$text_before;
    					
    					if(strpos($this->atts['caption_elements'], 'title') !== false){
                            $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
    						$items .=	"<h3 class='av-masonry-entry-title entry-title' {$markup}>{$the_title}</h3>";
    					}
    
    					if(strpos($this->atts['caption_elements'], 'excerpt') !== false && !empty($content)){
                            $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
    						$items .=	"<div class='av-masonry-entry-content entry-content' {$markup}>{$content}</div>";
    					}
    					$items .=	$text_after."</div></figcaption>";
    				}

    Add this to the Quick CSS field:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    position: relative;
    }

    Masonry items may not align correctly when excerpt is activated.

    Best regards,
    Ismael

    #397686

    Hi Ismael,

    Thanks for your code.

    I’ve changed it as per your instruction. Now it looks like this:

    The title and excerpt is now at the top and the height of the box is not increased.

    We’re getting somewhere but a little tweak is needed.

    Thanks,
    Hafeez

    #398020

    Hey!

    It works fine on our installation. We will need to check the actual website. Please post the url here. Did you add the css modification?

    Best regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.