Viewing 15 posts - 1 through 15 (of 15 total)
  • Posted in: Dante
  • #126591
    msc-val
    Member
    Post count: 71

    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!

    #126781
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    #127079
    msc-val
    Member
    Post count: 71
    This reply has been marked as private.
    #127202
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    #127296
    msc-val
    Member
    Post count: 71
    This reply has been marked as private.
    #127500
    msc-val
    Member
    Post count: 71
    This reply has been marked as private.
    #127606
    laranz – SUPPORT
    Member
    Post count: 3186

    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.

    #127664
    msc-val
    Member
    Post count: 71
    This reply has been marked as private.
    #127874
    laranz – SUPPORT
    Member
    Post count: 3186
    This reply has been marked as private.
    #128042
    msc-val
    Member
    Post count: 71
    This reply has been marked as private.
    #128172
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    #128419
    msc-val
    Member
    Post count: 71

    That didn’t do it. Thanks for trying.

    #128422
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Sorry 🙁

    -Rui

    #128801
    msc-val
    Member
    Post count: 71
    This reply has been marked as private.
    #128861
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

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

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register