Google images grid ( flickr images grid ). Responsive coppermine theme.

[allvip]

I WILL SOON RELEASE A NEW VERSION AS THIS ONE HAS A MAJOR ERROR.


IMPORTANT It works with coppermine version 1.5.36 or higher. The latest coppermine version.

YOU MUST HAVE jQuery update Plugin installed for the grid to work.

DOWNLOAD jQuery update plugin for cpg1.5.x http://forum.coppermine-gallery.net/index.php/topic,77595.0.html

Tutorial to apply grid layout to your own theme http://forum.coppermine-gallery.net/index.php/topic,78030.msg377389.html#msg377389

You have a READ how to change theme.txt file in the theme folder.

WEB BROWSERS I TEST IT ON Firefox, Opera, Internet Explorer, Safari, Chrome. Works fine but not on Safari lower then version 6 or 7. Viewports is something new so proabibly does not work on many old version browsers, but users proabibly update their browser every time.

You can test the theme for all monitor resolution, tables and phones at http://quirktools.com/screenfly/ after you install it. No need to change the theme from Config. Just type in the box your_domain_name/index.php?theme=google_images.

The setting for Config -Album list view - Number of columns for the album list must be a reasonable number.

The image on displayimage.php is also responsive but if you want to use  Images to fit screen resolution plugin ( responsive image plugin ) http://forum.coppermine-gallery.net/index.php/topic,77586.0.html then

delete from style.css:

Code Select Expand


.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}


or uncomment the code like this:

Code Select Expand


/*************************
.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}
**********************************************/


The plugin is better because downscale the image if needed to fit the users screen resolution. A click on the picture scales it to full original size.

[allvip]

Images previews. See attachments.

The theme works fine with all settings but is better to have in Config - Thumbnails settings - Use dimension (width or height or max aspect for thumbnail)* - choose Height from the drop down menu.
Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") * - type 300 or other value
Height of a thumbnail (only applies if you use "exact" in "Use dimension")* - type 300 or other value.
Both must have same value.
For already uploaded images Go to FILES - Admin Tools - click Update thumbs and/or resized photos - click Only thumbnails - Select Album - from the drop down menu choose an album - click Submit.
You can also choose All Albums but if you have too many pictures in your gallery then Admin Tools will time out during the process.

[allvip]

More attachments.