JavaScript Check if Image is Portrait or Landscape

JavaScript Check if Image is Portrait or Landscape
Code Snippet:Detect image orientation & sort them - vanilla JS
Author: Z. Kriszti
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 617
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X