Masonry layout

[msc-val]

How can I replicate the masonry layout for different content that can’t populated through blog posts? For each item, this will be an image, title and a paragraph similar to: http://dante.swiftideas.net/blog-timeline-full-width/blog-masonry-effect-one/

Would you please supply me with the code for rough structure that I can use to populate with content.

Thank you!

[laranz – SUPPORT]

Hi,

This is the layout you asked.

<div class="blog-items-wrap blog-masonry ">
<ul id="blogGrid" class="blog-items row masonry-items  grid effect-1 clearfix">
<li id="11351" class="blog-item col-sm-4 animate" itemtype="http://schema.org/BlogPosting" itemscope="">
<div class="masonry-item-wrap">
<figure class="animated-overlay overlay-alt"><img width="480" height="251" alt="" src="http://dante.swiftideas.net/wp-content/uploads/2012/09/jb_cute_monster-480x251.jpg" itemprop="image"><a class="link-to-post" href="http://dante.swiftideas.net/2013/11/09/standard-post/"></a><figcaption><div class="thumb-info thumb-info-alt"><i class="ss-navigateright"></i></div></figcaption></figure>
<div class="details-wrap clearfix"><h4 class="entry-title" itemprop="name headline"><a href="http://dante.swiftideas.net/2013/11/09/standard-post/">Standard Post</a></h4><div class="blog-item-details vcard author">By <span class="fn" itemprop="author">Swift Ideas</span> on <span class="date updated">November 9, 2013</span></div><div itemprop="description" class="excerpt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed…</p>
</div><a href="http://dante.swiftideas.net/2013/11/09/standard-post/" class="read-more-button">Read more</a><div class="comments-likes"><div class="comments-wrapper"><a href="http://dante.swiftideas.net/2013/11/09/standard-post/#comment-area"><i class="ss-chat"></i><span>5</span></a></div><div class="love-it-wrapper"><a data-user-id="0" data-post-id="11351" class="love-it" href="#"><i class="ss-heart"></i></a> <span class="love-count">425</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>

Ignore any inline styles in that, and form your content. Add more li tag content.

Let us know,

Thanks,
laranz.

[msc-val]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

I suggest you to use any of the method if that didn’t go well, http://premium.wpmudev.org/blog/add-masonry-grid-layouts-to-your-wordpress-site-with-just-css/ or https://wordpress.org/plugins/wp-masonry-layout/

Let us know,

Thanks,
laranz.

[msc-val]

This reply has been marked as private.

[msc-val]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

Try something like this,

<div class="container"><div class="row">
	<div class="spb_blog_widget spb_content_element col-sm-12">
		<div class="spb_wrapper blog-wrap">
			<div class="blog-items-wrap blog-masonry "><ul id="blogGrid" class="blog-items row masonry-items  grid effect-1 clearfix" style="position: relative; height: 2154.25px; perspective-origin: 50% 771.5px;"><li id="11351" class="blog-item col-sm-4 post-11351 post type-post status-publish format-standard has-post-thumbnail hentry category-news category-talent tag-illustration tag-news animate" itemtype="http://schema.org/BlogPosting" itemscope="" style="position: absolute; left: 0px; top: 0px; animation-duration: 0.612816s;"><div class="masonry-item-wrap"><figure class="animated-overlay overlay-alt"><img width="480" height="251" alt="" src="http://dante.swiftideas.net/wp-content/uploads/2012/09/jb_cute_monster-480x251.jpg" itemprop="image"><a class="link-to-post" href="http://dante.swiftideas.net/2013/11/09/standard-post/"></a><figcaption><div class="thumb-info thumb-info-alt"><i class="ss-navigateright"></i></div></figcaption></figure><div class="details-wrap clearfix"><h4 class="entry-title" itemprop="name headline"><a href="http://dante.swiftideas.net/2013/11/09/standard-post/">Standard Post</a></h4><div class="blog-item-details vcard author">By <span class="fn" itemprop="author">Swift Ideas</span> on <span class="date updated">November 9, 2013</span></div><div itemprop="description" class="excerpt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo venenatis ligula commodo. Sed…</p>
</div><a href="http://dante.swiftideas.net/2013/11/09/standard-post/" class="read-more-button">Read more</a><div class="comments-likes"><div class="comments-wrapper"><a href="http://dante.swiftideas.net/2013/11/09/standard-post/#comment-area"><i class="ss-chat"></i><span>5</span></a></div><div class="love-it-wrapper"><a data-user-id="0" data-post-id="11351" class="love-it" href="#"><i class="ss-heart"></i></a> <span class="love-count">427</span></div></div></div></div></li></ul>
</div></div>
		</div> 
	</div> </div></div>

Remove the unwanted IDs and inline styles, or try with the inline styles. TBH we can’t easily create content with the actual HTML codes, because it creates from the PHP and also it may sometimes linked to styles. So in that case, we may rely on some-other solution or plugin ( it won’t create much issues though ). That would be fine.

Let us know,

Thanks,
laranz.

[msc-val]

This reply has been marked as private.

[laranz – SUPPORT]

This reply has been marked as private.

[msc-val]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi @msc-val

This is classed as a customisation – so any help we do offer shouldn’t be taken for granted.

In Laranz’s second set of code he provided the extra code around the outside of the items which are needed for the masonry to function. Please try that code and then get back to us.

– Ed

[msc-val]

That didn’t do it. Thanks for trying.

[Rui Guerreiro – SUPPORT]

Sorry 🙁

-Rui

[msc-val]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

I’m afraid we don’t support customisations of this scope, Ed took a guess but if it didn’t work then you’ll have to look for alternatives or hire a developer to help you

– Kyle