I very much like the jquery/masonry effect, such as in the default image of the free theme carton. However, I keep downloading themes which are supposed to be built using masonry, but I can’t find out how to actually create a masonry looking page. My hope with using www.ads-software.com would be for a solution which was pretty much point and click: given my content, the theme would do the rest. I was hoping to limit the amount of coding and css fiddling I have to do.
I’ve downloaded a masonry widget, and several plugins: PageBuilder, SiteOrigin Masonry, and WP Masonry Layout. However, I’m not quite sure where to go next, and how to create a content rich page which, as I say, looks like this:
If anybody can point me in the direction of useful websites, or give useful advice, I’d be happy to be informed!
Thanks!
]]>I love your plugin, and I’m using it to layout galleries for my client’s website:
https://marktang.smfa-graphicarts.net/historias-de-guatemala/
I’m trying to implement some of the options listed on your website:
https://masonry.desandro.com/options.html
Particularly the gutter options.
I don’t know my Jquery or JavaScript, but I think I could figure out if I know where to put the code you provided on your site.
Thank you so much, and all the best.
https://www.ads-software.com/plugins/jquery-masonry-image-gallery/
]]>I would LOVE to add a little code to this awesome (indeed, it is awesome!) plugin in order to make my photo gallery on my site a masonry style layout. I have various aspect ratios in my work. I don’t particularly care for having gaps in how my gallery displays. This would be okay, if I desired a uniform layout that includes Titles and Descriptions, but I want neither of those. I want a margin/padding/border-less display of my images on my portfolio page.
I’m pretty sure I can accomplish this by adding JQuery Masonry into the mix and then doing some modification of my CSS. Only, I’m not totally certain which doc to add it to that contains the appropriate container divs. Which doc should I be looking for?
Thank you for any assist in advance.
tdmac
https://www.ads-software.com/extend/plugins/awesome-flickr-gallery-plugin/
]]>I’m trying to incorporate jQuery Masonry into my wordpress theme. I understand how it works. I’ve created a sample of it on a plain html page and everything works fine. I’ve now inserted the same template in wordpress, inserting the same css and js files in my wordpress theme, but it doesn’t work. I’m not certain it’s picking up the js file.
This is what I have in my head.php file:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
wp_title( '|', true, 'right' );
?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
?>
<! -- masonry -->
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box'
});
});
</script>
</head>
<body <?php body_class(); ?>>
...This is what I have in a page html file:
<body class="demos ">
<div id="container" class="clearfix">
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<h2>Sit amet mi ullamcorper vehicula</h2>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box col1">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Morbi purus libero</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
</div>
<div class="box col1">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<h2>Morbi purus libero</h2>
</div>
<div class="box col1">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div>
<div class="box col1">
<p>Sit amet mi ullamcorper vehicula</p>
<h2>Sit amet mi ullamcorper vehicula</h2>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
</div>
<div class="box col1">
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
</div>
<div class="box col1">
<ul>
<li>Lacus a ultrices sagittis</li>
<li>Democratis</li>
<li>Plummus</li>
</ul>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
</div>
<div class="box col1">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
</div>
<div class="box col1">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box col1">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box col1">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box col1">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
</div> <!-- #container -->
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box'
});
});
</script>I’ve tried different renditions like reordering the script in the head.php file but nothing changes. What am I doing wrong? Could something be interfering with the script or did I insert the script in the wrong place? I have the js folder in the theme folder, should I be putting it somewhere else? Any help in this matter would be greatly appreciated.
Antonella
]]>I am trying to get the images in my posts to align in a masonry fashion. I followed this tutorial https://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress/ but it does not seem to work.
I am linking in my posts to images on flickr. My website is www.howcelebswearit.com
This is my post HTML with text instead of images
<div id="linky">
<div class="boxy">
Crayon Syntax Highlighter pluginI’ve always been on the hunt for that perfect syntax highlighter plugin. Currently I’m using WP-Syntax, which does its job very well. However I’ve just found this plugin called Crayon Syntax Highlighter, which could be a good contender for the best WordPress syntax highlighter plugin out there.It looks good, and I like the little toolbar on top of the code box, with the small icons. Additionally, it also offers a lot of customization options. Lastly, it seems to support the same pre tags to wrap the code, similar WP-Syntax, so if I do make the switch, my old codes will still be highlighted correctly.
</div>
<div class="boxy">What WordPress Theme is That?A nice little web app that shows you know what theme is used by a WordPress-powered site.</div>
</div>Any ideas on how to get this to work.
]]>BUT Tanzaku displays a warning on the front page, “Warning: split() [function.split]: REG_EMPTY in /home2/wordturn/public_html/newskateboard/wp-content/themes/tanzaku/functions.php on line 60”
I’m not sure whether this warning is because the split function is used incorrectly, or because the split function is deprecated and won’t be supported soon. Or both.
Split appears in three consecutive lines of function.php for Tanzaku:
`$split_url = split($mark, $img_url);
if ($split_url[1] != null) {
$img_path = $upload_path . $split_url[1];`
Is there a practical fix for this situation?
]]>