This JavaScript code snippet helps you to programmatically check if an image portrait or landscape and display it according to orientation (landscape, portrait, or square). It also sorts these images based on their orientation. This script can be helpful for users who want to organize or categorize their images based on their orientations.
You can use this code on your website to automatically categorize images as portrait, landscape, or square. This helps visitors quickly identify the orientation of images, improving user experience.
How to Check If Image is Portrait Or Landscape Using JavaScript
1. In the HTML code, create a ‘div’ with the ID ‘img-filmstrip’ to contain your images. Inside it, add ‘div’ elements with the class ‘img-container’ for each image you want to categorize. Insert ‘img’ tags with the ‘src’ attribute pointing to your image files. These ‘img’ tags will be used to display the images.
<body onload="calculateOrientation()"> <div id='info'>This small script programmatically detects and displays orientation (landscape / portrait / square) for various images. After that, it also sorts them based on orientation.<span><em>Made with vanilla JS.</em></span></div> <div class='img-filmstrip'> <div class='img-container'> <img src='https://res.cloudinary.com/zkriszti/image/upload/v1515155404/orientation/pexels-photo-416163.jpg'> <div class='orientation'></div> </div> <div class='img-container'> <img src='http://res.cloudinary.com/zkriszti/image/upload/v1515155404/orientation/pexels-photo-459205.jpg'> <div class='orientation'></div> </div> <div class='img-container'> <img src='http://res.cloudinary.com/zkriszti/image/upload/v1515155404/orientation/pexels-photo-561870.jpg'> <div class='orientation'></div> </div> <div class='img-container'> <img src='http://res.cloudinary.com/zkriszti/image/upload/v1515155404/orientation/pexels-photo-770599.jpg'> <div class='orientation'></div> </div> <div class='img-container'> <img src='http://res.cloudinary.com/zkriszti/image/upload/v1515155404/orientation/pexels-photo-773049.jpg'> <div class='orientation'></div> </div> </div> <div id='ls-coll' class='title-coll'>Below are the landscape orientation images:</div> <div id='landscape-collection' class='img-coll'></div> <div id='p-coll' class='title-coll'>Below are the portrait orientation images:</div> <div id='portrait-collection' class='img-coll'></div> </body>
2. Now, add the following CSS code to your project to style the basic interface of image orientation.
* {box-sizing: border-box;}
body {font-family: 'Encode Sans Expanded', sans-serif;}
#info, .title-coll {background: rgba(120,120,120,0.5); font-size: 1.2rem; line-height: 1.7; padding: 0.8rem; margin-bottom: 5px; text-align: center;}
#info span {margin-top: 2rem; display: block;}
.img-filmstrip {display: flex; max-width: 100%; flex-wrap: wrap;}
.img-container {
position: relative;
margin-bottom: 5px;
max-width: 100%;
}
.img-container:last-child {margin-right: 0;}
img {max-width: 100%; display: block;}
.orientation {
position: absolute;
bottom: 0;
background: rgba(120,120,120,0.5);
width: 100%;
padding: 0.5rem 0 0.5rem 1rem;
font-weight: bold;
color: #e6e6e6;
}
.img-coll img {margin-bottom: 5px;}
@media only screen and (min-width: 520px) {
.img-filmstrip {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start} .img-container {width: 49%; } .img-container:nth-child(2n+1) {margin-right: 2%;}
}
@media only screen and (min-width: 677px) {
.title-coll {clear: both;}
.img-coll img {width: 49%; float: left;}
.img-coll img:nth-child(2n+1) {margin-right: 2%;}
}
@media only screen and (min-width: 800px) {
.img-container:nth-child(n) {margin-right:0; width: 18%; margin-right: 2.5%;}
.img-container:last-child {margin-right: 0;}
}
3. Finally, add the following JavaScript code to your project. It automatically detects the orientation of each image and sorts them accordingly. The images are categorized into three groups: landscape, portrait, and square.
'use strict';
/* Detect orientation */
let images = document.querySelectorAll('.img-container img');
let i;
let captionOri;
let ratio;
let landscapes = [];
let lsCollection = document.getElementById('landscape-collection');
let portraits = [];
let pCollection = document.getElementById('portrait-collection');
function calculateOrientation() {
for (i = 0; i < images.length; i++) {
ratio = images[i].clientWidth / images[i].clientHeight;
captionOri = images[i].nextElementSibling;
if (ratio < 1){
captionOri.innerHTML = 'portrait';
portraits.push(images[i]);
let newPImg = images[i].cloneNode(false);
pCollection.appendChild(newPImg);
} else if (ratio === 1) {
captionOri.innerHTML = 'square';
} else {
captionOri.innerHTML = 'landscape';
landscapes.push(images[i]);
let newLsImg = images[i].cloneNode(false);
lsCollection.appendChild(newLsImg);
}
}
}
That’s all! hopefully, you have successfully created a functionality to detect if image is portrait or landscape. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Draggable Table Rows In JavaScript
- JavaScript Play Sound Onclick
- Tip Calculator JavaScript Code
- Clone List Elements using JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.