AutoThumbs VR – Automatic Thumbnails for Vertical Rhythm (Images and Media)

0
0


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 – top

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 – top

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 – top



Source link

Live Demo

Download

LEAVE A REPLY

Please enter your comment!
Please enter your name here