forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: matheso on January 19, 2015, 02:49:11 am

Title: How to make my photo grid thumbnail sizes dynamic
Post by: matheso on January 19, 2015, 02:49:11 am
Hello,

I'd like to change the layout of the thumbnails on my homepage from what it is now, to something like this:  http://www.pexels.com/ (http://www.pexels.com/)

The thumbnail shouldI assume I'll need to change themes, but I don't know which one would be best?

Two main things I'd like:


Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: matheso on January 19, 2015, 02:50:39 am
Sorry about that!    Thumbnail width should be dynamic, based on the photo's resolution.

Can you recommend a solution?  Thank you
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: matheso on January 19, 2015, 02:51:11 am
my site:   http://taskbasket.net/gallery/
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: allvip on January 20, 2015, 12:27:23 am
Type in Google grid dynamic jquery.

I found this:

Isotope (is made by same person that made the famous mansonry) : http://isotope.metafizzy.co/layout-modes/fitrows.html (http://isotope.metafizzy.co/layout-modes/fitrows.html)
packery jquery plugin:  http://packery.metafizzy.co/ (http://packery.metafizzy.co/)
freewallpackery http://vnjs.net/www/project/freewall/ (http://vnjs.net/www/project/freewall/)

More: http://speckyboy.com/2013/07/15/15-jquery-plugins-for-creating-dynamic-layouts/ (http://speckyboy.com/2013/07/15/15-jquery-plugins-for-creating-dynamic-layouts/)

I did a very fast read and search of the plugins I listed.
I did not payed attention if it really is what you want.
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: matheso on January 20, 2015, 01:38:06 am
Thank you, freewall looks perfect. However, I have 2 questions:

1. Is freewall free to use for commercial purposes? I can't find this info

2. I don't see where I place the html code into my template.html file?   Right now my template file has this code to show my gallery:

Code: [Select]
<div id="cpg_main_block_outer">
        <div class="cpg_main_block_inner">
            {GALLERY}
            <br />
        </div>
        </div>
I don't see where I place freewall's code?

Thanks again
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: gmc on January 20, 2015, 05:22:21 am
Quote from: matheso on January 20, 2015, 01:38:06 am
1. Is freewall free to use for commercial purposes? I can't find this info
At the bottom of the Freewall site:

Code: [Select]
Copyright
© 2013 Minh Nguyen
Released under the MIT license
The MIT license:
http://opensource.org/licenses/MIT (http://opensource.org/licenses/MIT)
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: allvip on January 20, 2015, 02:58:59 pm
Should work like this: add in template.html in the head (<head> </head> section):

<script type="text/javascript" src="themes/matheso/js/freewall.js"></script>

and under {JAVASCRIPT} or before </body>

Code: [Select]
  <script>
    $(function() {
      var wall = new freewall("#thumbWrapp");
      wall.fitWidth();
    });
  </script>
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: matheso on January 22, 2015, 07:07:01 pm
Thank you both for your helpful feedback. @allvip I'll try exactly that when I get a chance, and will report back. I appreciate it!
Title: Re: How to make my photo grid thumbnail sizes dynamic
Post by: allvip on February 02, 2015, 05:24:02 pm
Topic related with How to integrate Free Wall jQuery plugin into Coppermine's gallery? http://forum.coppermine-gallery.net/index.php/topic,78030.0.html (http://forum.coppermine-gallery.net/index.php/topic,78030.0.html)