Responsive Thumbnails

Demo

Let's first show what Responsive Thumbnails does and we'll explain it later. Check the “Regular thumbnails“ and “Responsive Thumbnails” below. Now resize the window and check how differently they behave.

Ok, now that you know what Responsive Thumbnails can do, let's see how to implement it.

Basic use for images

This is meant for lists that contain images, or an image inside an anchor at most. The important thing to have in mind is that the image is determining the height of the element by itself (via automatic height calculation preserving the image ratio, when height is not explicitly set)

Also, the images should be the same size. If you want to show a list of varying image sizes, perhaps you'll be interested in Masonry

1. Add these files to your project.

2. Add the .responsive-thumbnails class to any ul or ol that is holding your thumbnails.

3. Add data-max-width='{{max-width}}px' data-padding='{{padding}}px' attributes to that same ul or ol.

   data-max-width should equal the width of the thumbnails

   Set data-padding to whatever separation between thumbnails you desire (optional parameter, if omitted images are right next to each other)

Code example

<ul class='responsive-thumbnails' data-max-width='177px' data-padding='8px'>
  <li>
    <img src='img/thumbs-177/1.jpg' alt='1.jpg'>
  </li>
  <li>
    <img src='img/thumbs-177/2.jpg' alt='2.jpg'>
  </li>
  <li>
    <img src='img/thumbs-177/3.jpg' alt='3.jpg'>
  </li>
  <li>
    <img src='img/thumbs-177/4.jpg' alt='4.jpg'>
  </li>
</ul>

List examples

Advanced use for arbitrary lists

When your items are beyond an image, the calculation of the item's height has to be explicit. For this we add a fourth parameter expliciting the item's height.

1. Add these files to your project.

2. Add the .responsive-thumbnails class to any ul or ol that is holding your thumbnails.

3. Add data-max-width='{{max-width}}px' data-max-height='{{max-height}}px' data-padding='{{padding}}px' attributes to that same ul or ol.

   data-max-width should equal the width of the item

   data-max-height should equal the height of the item (if omitted, it will default to a Basic Use case and potentially break your layout if your items are naturally of variable height)

   Set data-padding to whatever separation between thumbnails you desire (optional parameter, if omitted images are right next to each other)

Keep in mind: Setting the height explicitly elicits a more resource intensive algorithm than the basic case. If you need to make a basic list of images responsive, please don't set the height explicitly and let the native image's ratio preservation take care of the height.

Code example

<ul class='responsive-thumbnails' data-max-width='180px' data-max-height='242px' data-padding='10px'>
  <li>
    <img src='img/thumbs-180/h01.jpg' alt='Adam Astrogel'>
    <div class='metadata'>
      <strong class='fn'>Adam Astrogel</strong>
      <span class='title'>Astrophysicist</span>
    </div>
  </li>
  <li>
    <img src='img/thumbs-180/h02.jpg' alt='Bob Broderick'>
    <div class='metadata'>
      <strong class='fn'>Bob Broderick</strong>
      <span class='title'>Barter</span>
    </div>
  </li>
  <li>
    <img src='img/thumbs-180/h03.jpg' alt='Charlie Charleston'>
    <div class='metadata'>
      <strong class='fn'>Charlie Charleston</strong>
      <span class='title'>Chartist</span>
    </div>
  </li>
</ul>

List example

Set attributes via JavaScript

If you have several item groups that share the same properties, you can set these properties via JS instead of adding attributes to the HTML.

// Parameters
// responsiveThumbnails({{selector}}, {{maxWidth}}, {{padding}}, {{maxHeight}});

// Basic Use
//
responsiveThumbnails('.responsive-thumbnails', '177px', '8px');

// Advanced Use
//
responsiveThumbnails('.responsive-thumbnails', '180px', '10px', '242px');

Regarding the selector, you can use any valid CSS selector, even group selectors (using a comma to separate selectors) and affect several elements, go wild. The .responsive-thumbnails class is for hooking the right CSS, if you change this class and the CSS it will not have any effect on the JS (you select the elements you want to affect).

By default the js initializes by affecting all elements that have the .responsive-thumbnails class, you can remove this if necessary.

How it works

For each element that has the .responsive-thumbnails class (or whatever we've chosen to initialize directly via Js), we create a stylesheet for it on the header. On resize we get the container's width and calculate how many images would fit in that container + 1. We divide 100 by that number and then that's the width of each li in percentage.

We don't set inline styles on each li, we instead modify the stylesheet's attributes related to li; and ONLY when the numbers tell us that a different percentage is needed (this is a Good Thing™).

If we also set the height of the item, then we have to calculate the height of the li and change the stylesheet attribute for that. This is more resource intensive since there are more calculations and a change on the stylesheet every time we resize.

If you want to understand this in depth, check the code! It's heavily commented.