elite gallery

[Joseph Jaramillo]

Hi I’d like to show thumbnails on the homepage that link to gallery pages similar to the http://www.tannergoods.com/ website (see attached). Other than creating the items with woocommerce, what would you recommend to setup galleries? I just want the thumbnails on the home page to go to a grid of pics, if that’s possible. Thanks!

Attachments:

1. 

   Google-Chromesnapz018.jpg
   

[Bill Robbins]

Joseph,

One option would be to make a WordPress gallery and insert it. WordPress will lay the items out on a grid for you. You can control the size of the images by going to the Settings section and selecting Media. The thumbnail size can be set there.

As you add the images to the gallery, there is an option to set the URL for each one. Just place the appropriate URL in that field and that should do it. You’ll need to disable the built in lightbox gallery to make that work.

Another option would be to just insert the images with custom links attached to them. You could use a table plugin like TablePress to line them up on a grid.

If you run into any questions or trouble, just let me know.

Thanks,
Bill

[Nicholas Minnich]

Hi Bill, I too intend to do exactly as you suggest and use the gallery as a grid with custom links. However, the elite gallery is not responsive. And all responsive gallery plugins seem to eradicate the caption which I really need to be visible. Any suggestions?

http://dcgreens.org/fy14/?page_id=87

[Bill Robbins]

By default, WordPress will set a three column gallery to always be three columns wide, even when the screen is small. What you could do is add a bit of custom styling so that the columns are different on smaller screens. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (min-width: 521px) and (max-width: 767px) {
   
        #content dl.gallery-item {
             width: 48%;
             margin-right: 4%;
        }
   	
        #content dl.gallery-item:nth-child(even) {
             margin-right: 0;
        }
   	
   }
   
   @media only screen and (max-width: 520px) {
   	
        #content dl.gallery-item {
             width: 100%;
        }
   	
   }
   

3. Update your settings.

That should cause swap the columns to be two wide on a tablet sized screen and one wide on a phone. If you run into any trouble, let me know.

Thanks,
Bill

[Nicholas Minnich]

Beautiful solution. Thank you!

[Bill Robbins]

Glad that worked for you Nicholas. If you need anything else, let me know.

[Author]

Posts