forum.coppermine-gallery.net
Support => cpg1.5 themes (visuals) => cpg1.5.x Support => cpg1.5 theme contributions => Topic started by: allvip on November 27, 2013, 04:26:46 am
-
1. Masonry removes all the empty space around thumbnails specially with this settingd in CONFIG:
Thumbnails settings : Use dimension (width or height or max aspect for thumbnail)* - weight and if width was set when images were uploaded.If not use admin tool to updated thumbs.
2. Images repositon on browser resize.
Masonry Official Website:
http://masonry.desandro.com/ (http://masonry.desandro.com/)
What is Masonry?
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
site that has masonry layout: http://staff.tumblr.com/archive (http://staff.tumblr.com/archive)
Demo (http://coppermine-gallery.net/demo/cpg15x/?theme=curve_masonry) - Download (http://sourceforge.net/projects/coppermine/files/Themes/1.5.x/cpg1.5.x_theme_curve_masonry_v1.0.zip/download)
-
Coppermine masonry theme - Coppermine grid layout theme
If the demo is not working anymore:
IMAGE PREVIEW
-
Thank you for your contribution. I'll have a look at your theme and upload it to our demo gallery as soon as possible.
-
I just replaced the zip for v1.0 (december 08/2013).
it was looking OK only in firefox (sorry I forgot to check how the theme looks in other browsers the first time) and the admin tools page was not working.
the changes I made to the new zip:
1.I added width:132px for .item in style.css (withot width it looks ok only in firefox)
2.I adeed js-masonry to echo '<div class="masonry">'; like this: echo '<div class="masonry js-masonry">' to function theme_display_thumbnails from theme.php; this way masonry will work even without jqury.min.js or colunWidth.
2.deleted js_include('js/jquery.min.js'); at the end of function theme_display_thumbnails from theme.php.
3.deleted jquery.min.js from js folder.
-
How to add masonry to your own theme
coppermine Masonry coppermine grid layout http://forum.coppermine-gallery.net/index.php/topic,76860.0.html (http://forum.coppermine-gallery.net/index.php/topic,76860.0.html)
-
Chanes for v1.1
1) I deleted fom template.html:
jQuery(function(){
jQuery('.masonry').masonry({
itemSelector: '.item',
columnWidth: 50
});
});
2) I deleted <div class="grid-sizer"></div> from theme.php. Is an error.
3) I deleted <br /> after <a href="{LINK_TGT}">{THUMB} from theme.php
4) I replaced in style.css:
/* Styles for masonry.
------------------------------------------------------- */
.grid-sizer {
float: left;
margin:2px;
}
.item {
width:132px;
float: left;
margin:2px;
padding:4px;
border:1px solid #cccccc;
background: #f1f1f1 ;
box-shadow:5px 5px 5px #888888;
}
.thumbTitle {
color:#cccccc;
background:#000000;
clear:both;
padding-left: 10px;
font-family:Arial,sans-serif;
font-size: 100%;
font-weight: normal;
line-height: 30px;
margin-top:5px;
margin-bottom: 5px;
text-transform: uppercase;
}
.tabDiv {
margin-top:10px;
}
/* End Styles for masonry.
------------------------------------------------------- */
with:
/* Styles for masonry.
------------------------------------------------------- */
.item {
width:14%;
float: left;
margin:4px;
padding:0.5% 1% 0.5% 0.5%;
border:1px solid #cccccc;
background: #f1f1f1 ;
box-shadow:5px 5px 5px #888888;
}
.item img {
max-width: 100%!important;
height: auto!important;
}
.thumbTitle {
color:#cccccc;
background:#000000;
clear:both;
padding-left: 10px;
font-family:Arial,sans-serif;
font-size: 100%;
font-weight: normal;
line-height: 30px;
margin-top:5px;
margin-bottom: 5px;
text-transform: uppercase;
}
.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
max-width: 100%!important;
overflow: hidden;
word-break: break-all;
}
.tabDiv {
margin-top:10px;
clear: both;
}
/* End Styles for masonry.
------------------------------------------------------- */
-
Added theme to our demo and download section, added links to initial post, added version number to zip file in initial post.
-
much better coppermine masonry theme by Jeff Bailey:
http://forum.coppermine-gallery.net/index.php/topic,75270.0.html (http://forum.coppermine-gallery.net/index.php/topic,75270.0.html)