Aspect ratio & random width

­
.fusion-fullwidth-1 { padding-left: 0px !important; padding-right: 0px !important; }

Fixed aspect ratio example, 1:1 squares

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/155330318.jpg" title="in sunlight - Orange">Wild flowers

    Wild flowers
    in sunlight - Orange

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/112393946.jpg" title="sunflower field - Orange">Very sunny

    Very sunny
    sunflower field - Orange

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/127634348.jpg" title="of a purple flower - Purple">The very center

    The very center
    of a purple flower - Purple

  • Sunflower

    Sunflower
    in soft colors

  • Still life

    Still life
    with colorful tulips

  • Somei-yoshino

    Somei-yoshino
    in full bloom

  • Snowdrops on the field

    Snowdrops on the field
    spring in the nature

  • Sakura cherry blossom

    Sakura cherry blossom
    at Kenrokuen Garden in Kanazawa

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/74107861.jpg" title="and shallow depth of field - Red">Red petals

    Red petals
    and shallow depth of field - Red

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/91393235.jpg" title="in selective focus with shallow depth of field - Red">Pink tulip

    Pink tulip
    in selective focus with shallow depth of field - Red

The above example uses the following, generated shortcode (how to use):
[$justified_image_grid preset=11 height_deviation=0 orderby=title_desc limit=10 max_rows=2 aspect_ratio=1 disable_cropping=yes ng_gallery=15]
.fusion-fullwidth-2 { padding-left: 0px !important; padding-right: 0px !important; }

It's recommended to keep using the justified layout. It respects how the pictures are originally shaped. However, people requested fixed width thumbnails or columns. Well, Justified Image Grid has rows. Moreover, the idea of fixed width is slowly losing its meaning. Why? Because everything is responsive! So, what does this mean? There is a setting that lets you to redefine the aspect ratio of thumbnails. You can automatically crop them to portrait, landscape, or any shape you can think of. For example, you could set a 300px row height and 1:1 aspect ratio. In turn, your images will be squares up to 300px wide and tall. They may shrink or get re-organized due to responsiveness. A setting called "disable cropping" goes hand-in-hand since you might want to always keep the desired aspect ratio.

.fusion-fullwidth-3 { padding-left: 0px !important; padding-right: 0px !important; }

Fixed aspect ratio example, 16:9 wide

  • A field of lavender flowers

    A field of lavender flowers
    during sunset in New York City

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/133517837.jpg" title="selective focus on a petal - Purple">Abstract of purple primula

    Abstract of purple primula
    selective focus on a petal - Purple

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/129557180.jpg" title="of a flower with drops - Blue">Abstract petals

    Abstract petals
    of a flower with drops - Blue

  • Beautiful flowering cherry

    Beautiful flowering cherry
    Sakura is the Japanese term for ornamental cherry blossom trees and their blossoms

  • <a href="https://justifiedgrid.com/wp-content/gallery/life/flowers/155330480.jpg" title="vintage photo in summertime - Orange">Beautiful wild flower

    Beautiful wild flower
    vintage photo in summertime - Orange

  • Blooming tree

    Blooming tree
    fine art photo style

The above example uses the following, generated shortcode (how to use):
[$justified_image_grid preset=16 height_deviation=0 orderby=title_asc limit=6 max_rows=2 aspect_ratio=16:9 disable_cropping=yes ng_gallery=15]
.fusion-fullwidth-4 { padding-left: 0px !important; padding-right: 0px !important; }

Randomize width and turn similar images into various shapes!

Sometimes you just want to spice it up. Perhaps your photos don't have different aspect ratios. Make your grid more alive by randomizing thumbnail widths! Without manually cropping every image to a different aspect ratio, of course. Let the plugin do that for you!

.fusion-fullwidth-5 { padding-left: 0px !important; padding-right: 0px !important; }

Normally, all of these images have the same aspect ratio. Yet, the plugin can make them appear more random.

The above example uses the following, generated shortcode (how to use):
[$justified_image_grid preset=4 ids=9390,9391,9388,9381,9382,9383,9379,9374,9375,9371,9372,9373,9365,9366,9363,9353,9354,9350 row_height=170 link_title_field=title img_alt_field=off caption=off overlay=hovered overlay_icon=on limit=15 max_rows=3 last_row=hide randomize_width=150]
.fusion-fullwidth-6 { padding-left: 0px !important; padding-right: 0px !important; }

What options are available to have fixed aspect ratio or random widths?

  • Use any ratio in the following formats: 1, 1:1 or 1/1 (square) 2.35:1 or 16:9 (wide), 4/3, 1.5 and so on.
  • Ability to "lock" original or selected aspect ratio, by not allowing any kind of cropping at all.
  • They'll all appear in their original aspect ratio once opened in the lightbox.
  • Randomize thumbnail widths (never crops more than half). Set a pixel range within which the changes will occur.
  • Randomization will not create different images for every visitor. Each image will have one new shape.