Mash Between Masonry Blog with Blog Post Grid Layout - Support

Tagged: Blog post grid layout, masonry blog

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 14, 2015 at 11:39 am #396130

mhafeezmm
Participant

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

February 15, 2015 at 1:10 pm #396362

mhafeezmm
Participant

Anyone?

February 16, 2015 at 6:03 pm #396866

Elliott
Inactive Moderator

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

February 16, 2015 at 6:04 pm #396867

Ismael
Moderator

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

February 17, 2015 at 9:17 am #397295

mhafeezmm
Participant

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

February 17, 2015 at 12:38 pm #397414
Ismael
Moderator
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
February 17, 2015 at 6:19 pm #397686

mhafeezmm
Participant

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

February 18, 2015 at 11:22 am #398020

Ismael
Moderator

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
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.