AutoThumbs VR - Automatic Thumbnails for Vertical Rhythm (Images and Media)
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
CSS Files and Structure
JavaScript
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.
index.html
index-fluid.html
16×9/index.html
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.
demo/boxed/default – Boxed 1×1 square or nearest square for VR thumbnails
demo/boxed/landscape – Boxed 4×3 landscape or nearest landscape for VR thumbnails
demo/boxed/portrait – Boxed 4×3 portrait or nearest portrait for VR thumbnails
demo/boxed/masonry – Boxed masonry & mosaic layouts of mixed 4×3 thumbnails
demo/fluid/default – Fluid 1×1 square or nearest square for VR thumbnails
demo/fluid/landscape – Fluid 4×3 landscape or nearest landscape for VR thumbnails
demo/fluid/portrait – Fluid 4×3 portrait or nearest portrait for VR thumbnails
demo/fluid/masonry – Fluid masonry & mosaic layouts of mixed 4×3 thumbnails
16×9/demo/boxed/default – Boxed 1×1 square or nearest square for VR thumbnails
16×9/demo/boxed/landscape – Boxed 16×9 landscape or nearest landscape for VR thumbnails
16×9/demo/boxed/portrait – Boxed 16×9 portrait or nearest portrait for VR thumbnails
16×9/demo/boxed/masonry – Boxed masonry & mosaic layouts of mixed 16×9 thumbnails
16×9/demo/fluid/default – Fluid 1×1 square or nearest square for VR thumbnails
16×9/demo/fluid/landscape – Fluid 16×9 landscape or nearest landscape for VR thumbnails
16×9/demo/fluid/portrait – Fluid 16×9 portrait or nearest portrait for VR thumbnails
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.
css/autothumbs-vr.css
css/demo.css
css/bootstrap.css
16×9/css/autothumbs-vr.css
16×9/css/demo.css
16×9/css/bootstrap.css
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.
js/autothumbs-vr.js
js/bootstrap.min.js
js/jquery.min.js
16×9/js/autothumbs-vr.js
16×9/js/bootstrap.min.js
16×9/js/jquery.min.js
C) Credits – top
Unsplash Typography Collection by Jeremy Beck
Bootstrap 4.1.3
jQuery 3.3.1
from CodeCanyon new items https://ift.tt/2PYvuIR via IFTTT https://goo.gl/zxKHwc