Headway Themes — The Drag & Drop WordPress Theme

Images

How to group multiple images in one Thumbnail?

Do you have a gallery and you realized you might need to group related images together into single thumbnail? The main purpose is to allow your visitors to have greater ease of navigation and experience while browsing the gallery. For example, you have a list of product A-Z that you like to show them in different perspectives. When your visitors click on the thumbnail of product A; he or she can see the top, bottom, front and side view of product A.

Steps to group Images Together in Single Thumbnail?

The first thing is required you to install a WordPress plugin called Lightbox Plus and by tweaking it with a little code, you can easily achieve what you want.

  1. You can download the Lightbox Plus directly from WordPress.org.
  2. Before you can use it, you need to install and activate it.
  3. You can check out the installation instruction of Lightbox Plus from this post.
  4. After you have done the setting, you can start adding images to your page/post.
  5. If, for example, you are the restaurant owner and you are going to showcase your menu photos in your gallery page.
  6. So go to the gallery page and click on the “Add an image” icon on top of the editor and add the group of images you want individually into the page.
  7. Now you will need to edit the html code so click on the HTML tab on top of the editor and you can see the code such as the following:
    (Note: Your URL and images should be different from below.)

    <!--First Group of Images: Food -->
    <a title="food" href="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722.jpg" rel="lightbox[food]"><img src="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722-300x300.jpg" alt="" width="300" height="300" /></a>
    
    
  8. In order to group images together, you will need to insert a HTML tag “rel” into the
    <a href> </a>

    link such as

    rel="lightbox[food]"

    .

  9. The first line of code is the image where it will show as the thumbnail.
  10. As for the rest of images, you will not need them to show up so delete the
    <img alt="" />

    code and just leave the

    <a href>

    link will do.

  11. But remember to add in
    rel="lightbox[food]"

    into the

    <a href>

    code too.

  12. The final code will look like the screen capture as below:
    <!--First Group of Images: Food -->
    <a title="food" href="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722.jpg" rel="lightbox[food]"><img src="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722-300x300.jpg" alt="" width="300" height="300" /></a>
    
    
  13. Click on “Update” to save and you can check if it is working by going to your gallery page.
  14. If you want to add another thumbnail, just repeat the same steps as above to achieve it. For example, to add another group “Drink”, the code will be as follow.
    <!--First Group of Images: Food -->
    <a title="food" href="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722.jpg" rel="lightbox[food]"><img src="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722-300x300.jpg" alt="" width="300" height="300" /></a>
    
    <!--Second Group of Images: Drink -->
    <a title="Drinks" href="http://demo.mydomain.com/wp-content/uploads/2011/03/ist2_6972667-multi-fruit-jelly.jpg" rel="lightbox[drinks]"><img src="http://demo.ehomepreneur.com/wp-content/uploads/2011/03/ist2_6972667-multi-fruit-jelly-199x300.jpg" alt="" width="199" height="300" /></a>

Once you have added the code, you should be able to see each thumbnail has its own group of related images.

How to Create a Gallery or Portfolio to your Blog?

There may be time you need to add a gallery or portfolio to your blog to showcase some of your works. If you are using wordpress, you can add a gallery easily to your page or post by using its media features. The only disadvantage of this method is that when you click on theRead More