Code

AutoThumbs VR - Automatic Thumbnails for Vertical Rhythm

AutoThumbs VR - Automatic Thumbnails for Vertical Rhythm

Automatic Thumbnails with a Single CSS Class

Support for Vertical Rhythm & Thumbnail Orientation

128 Demo Layouts of 4×3 and 16×9 Thumbnails

AutoThumbs VR automatically generates thumbnails with a height relative to their width according to a specified aspect ratio and thumbnail orientation. It provides 3 options for thumbnail orientation – default (square), landscape and portrait, and supports vertical rhythm (VR). To create a thumbnail use class .autothumb on its own for a square or nearest square for VR <div class="autothumb col-sm-3"></div>, or combine it with .landscape for landscape orientation <div class="autothumb landscape col-sm-3"></div> or .portrait for portrait orientation <div class="autothumb portrait col-sm-3"></div>. Add images using a css class with a background-image property pointing to your image, eg. .img {background-image: url(../img/img.jpg);}. Check out the demo files for examples using Bootstrap 4 as a grid system.

Table of Contents

  1. CSS Files and Structure
  2. JavaScript
  3. Sources and Credits

A) CSS Files and Structure

Index files showcasing AutoThumbs VR Boxed and Fluid Layouts in 4×3 and 16×9 ratios.

  1. index.html
  2. index-fluid.html
  3. 16×9/index.html
  4. 16×9/index-fluid.html

The “demos” directories demos/ and 16×9/demos contain fluid and boxed demo layouts of 4×3 and 16×9 square, landscape and portrait thumbnails with vGrid set to 24px as well as masonry & mosaic layouts.

  1. demo/boxed/default – Boxed 1×1 square or nearest square for VR thumbnails
  2. demo/boxed/landscape – Boxed 4×3 landscape or nearest landscape for VR thumbnails
  3. demo/boxed/portrait – Boxed 4×3 portrait or nearest portrait for VR thumbnails
  4. demo/boxed/masonry – Boxed masonry & mosaic layouts of mixed 4×3 thumbnails
  5. demo/fluid/default – Fluid 1×1 square or nearest square for VR thumbnails
  6. demo/fluid/landscape – Fluid 4×3 landscape or nearest landscape for VR thumbnails
  7. demo/fluid/portrait – Fluid 4×3 portrait or nearest portrait for VR thumbnails
  8. demo/fluid/masonry – Fluid masonry & mosaic layouts of mixed 4×3 thumbnails
  1. 16×9/demo/boxed/default – Boxed 1×1 square or nearest square for VR thumbnails
  2. 16×9/demo/boxed/landscape – Boxed 16×9 landscape or nearest landscape for VR thumbnails
  3. 16×9/demo/boxed/portrait – Boxed 16×9 portrait or nearest portrait for VR thumbnails
  4. 16×9/demo/boxed/masonry – Boxed masonry & mosaic layouts of mixed 16×9 thumbnails
  5. 16×9/demo/fluid/default – Fluid 1×1 square or nearest square for VR thumbnails
  6. 16×9/demo/fluid/landscape – Fluid 16×9 landscape or nearest landscape for VR thumbnails
  7. 16×9/demo/fluid/portrait – Fluid 16×9 portrait or nearest portrait for VR thumbnails
  8. 16×9/demo/fluid/masonry – Fluid masonry & mosaic layouts of mixed 16×9 thumbnails

There are three css files included per thumbnail aspect ratio – files css/autothumbs-vr.css and 16×9/css/autothumbs-vr.css include styles (including images) for AutoThumbs VR. File css/demo.css includes additional styles for the demo pages. Bootstrap 4.1.3 css file is also included in the css directory.

  1. css/autothumbs-vr.css
  2. css/demo.css
  3. css/bootstrap.css
  4. 16×9/css/autothumbs-vr.css
  5. 16×9/css/demo.css
  6. 16×9/css/bootstrap.css

B) JavaScript

There is one js file that includes the necessary code for AutoThumbs VR – autothumbs-vr.js. By default vertical rhythm is set to vGrid = 24 for a vertical rhythm unit of 24px. To change the vertical rhythm unit, open the js/autothumbs-vr.js or 16×9/js/autothumbs-vr.js and set vGrid to your selected value (without “px”).

To customise the aspect ratio, edit the x=4 and y=3 variables (4×3) in file js/autothumbs-vr.js or x=16 and y=9 (16×9) in file 16×9/js/autothumbs-vr.js and set them up accordingly, considering that x corresponds to the longest side and y to the shortest side of a thumbnail. Bootstrap 4.1.3 JS (bootstrap.min.js) and jQuery 3.3.1 (jquery.min.js) are included too.

  1. js/autothumbs-vr.js
  2. js/bootstrap.min.js
  3. js/jquery.min.js
  4. 16×9/js/autothumbs-vr.js
  5. 16×9/js/bootstrap.min.js
  6. 16×9/js/jquery.min.js

C) Credits

by
by
by
by
by
by