{"id":9604,"date":"2024-01-20T18:05:00","date_gmt":"2024-01-20T18:05:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9604"},"modified":"2024-01-22T16:05:55","modified_gmt":"2024-01-22T11:05:55","slug":"javascript-check-if-image-is-portrait-or-landscape","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/","title":{"rendered":"JavaScript Check if Image is Portrait or Landscape"},"content":{"rendered":"<p>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.<\/p>\n<p>You can use this code on your website to automatically <a href=\"https:\/\/codehim.com\/portfolio\/jquery-portfolio-gallery-with-categories-filter\/\" target=\"_blank\" rel=\"noopener\">categorize images<\/a> as portrait, landscape, or square. This helps visitors quickly identify the orientation of images, improving user experience.<\/p>\n<h2>How to Check If Image is Portrait Or Landscape Using JavaScript<\/h2>\n<p>1. In the HTML code, create a &#8216;div&#8217; with the ID &#8216;img-filmstrip&#8217; to contain your images. Inside it, add &#8216;div&#8217; elements with the class &#8216;img-container&#8217; for each image you want to categorize. Insert &#8216;img&#8217; tags with the &#8216;src&#8217; attribute pointing to your image files. These &#8216;img&#8217; tags will be used to display the images.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;body onload=\"calculateOrientation()\"&gt;\r\n&lt;div id='info'&gt;This small script programmatically detects and displays orientation (landscape \/ portrait \/ square) for various images. After that, it also sorts them based on orientation.&lt;span&gt;&lt;em&gt;Made with vanilla JS.&lt;\/em&gt;&lt;\/span&gt;&lt;\/div&gt;\t\r\n&lt;div class='img-filmstrip'&gt;\r\n\t&lt;div class='img-container'&gt;\r\n\t\t&lt;img src='https:\/\/res.cloudinary.com\/zkriszti\/image\/upload\/v1515155404\/orientation\/pexels-photo-416163.jpg'&gt;\r\n\t\t&lt;div class='orientation'&gt;&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class='img-container'&gt;\r\n\t\t&lt;img src='http:\/\/res.cloudinary.com\/zkriszti\/image\/upload\/v1515155404\/orientation\/pexels-photo-459205.jpg'&gt;\r\n\t\t&lt;div class='orientation'&gt;&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class='img-container'&gt;\r\n\t\t&lt;img src='http:\/\/res.cloudinary.com\/zkriszti\/image\/upload\/v1515155404\/orientation\/pexels-photo-561870.jpg'&gt;\r\n\t\t&lt;div class='orientation'&gt;&lt;\/div&gt;\t\r\n\t&lt;\/div&gt;\r\n\t&lt;div class='img-container'&gt;\r\n\t\t&lt;img src='http:\/\/res.cloudinary.com\/zkriszti\/image\/upload\/v1515155404\/orientation\/pexels-photo-770599.jpg'&gt;\r\n\t\t&lt;div class='orientation'&gt;&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class='img-container'&gt;\r\n\t\t&lt;img src='http:\/\/res.cloudinary.com\/zkriszti\/image\/upload\/v1515155404\/orientation\/pexels-photo-773049.jpg'&gt;\r\n\t\t&lt;div class='orientation'&gt;&lt;\/div&gt;\t\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id='ls-coll' class='title-coll'&gt;Below are the landscape orientation images:&lt;\/div&gt;\t\r\n&lt;div id='landscape-collection' class='img-coll'&gt;&lt;\/div&gt;\r\n&lt;div id='p-coll' class='title-coll'&gt;Below are the portrait orientation images:&lt;\/div&gt;\r\n&lt;div id='portrait-collection' class='img-coll'&gt;&lt;\/div&gt;\t\r\n&lt;\/body&gt;<\/pre>\n<p>2. Now, add the following CSS code to your project to style the basic interface of image orientation.<\/p>\n<pre class=\"prettyprint linenums lang-css\">* {box-sizing: border-box;}\r\nbody {font-family: 'Encode Sans Expanded', sans-serif;}\r\n\r\n#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;}\r\n#info span {margin-top: 2rem; display: block;}\r\n\r\n.img-filmstrip {display: flex; max-width: 100%; flex-wrap: wrap;}\r\n.img-container {\r\n\tposition: relative; \r\n\tmargin-bottom: 5px;\r\n\tmax-width: 100%;\r\n\t}\r\n.img-container:last-child {margin-right: 0;}\r\nimg {max-width: 100%; display: block;}\r\n.orientation {\r\n\tposition: absolute; \r\n\tbottom: 0; \r\n\tbackground: rgba(120,120,120,0.5); \r\n\twidth: 100%; \r\n\tpadding: 0.5rem 0 0.5rem 1rem; \r\n\tfont-weight: bold; \r\n\tcolor: #e6e6e6;\r\n}\r\n\r\n.img-coll img {margin-bottom: 5px;}\r\n\r\n@media only screen and (min-width: 520px) {\r\n\t.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%;} \r\n\t}\r\n\r\n@media only screen and (min-width: 677px) {\r\n\t.title-coll {clear: both;}\r\n\t.img-coll img {width: 49%; float: left;}\r\n\t.img-coll img:nth-child(2n+1) {margin-right: 2%;}\r\n}\r\n\r\n@media only screen and (min-width: 800px) {\r\n\t.img-container:nth-child(n) {margin-right:0; width: 18%; margin-right: 2.5%;}\r\n\t.img-container:last-child {margin-right: 0;}\r\n\t}<\/pre>\n<p>3. Finally, add the following JavaScript code to your project. It\u00a0automatically detects the orientation of each image and sorts them accordingly. The images are categorized into three groups: landscape, portrait, and square.<\/p>\n<pre class=\"prettyprint linenums lang-js\">'use strict';\r\n\/* Detect orientation *\/\r\n\r\nlet images = document.querySelectorAll('.img-container img');\r\nlet i;\r\nlet captionOri;\r\nlet ratio;\r\nlet landscapes = [];\r\nlet lsCollection = document.getElementById('landscape-collection');\r\nlet portraits = [];\r\nlet pCollection = document.getElementById('portrait-collection');\r\n\r\nfunction calculateOrientation() {\r\n\t\r\n\tfor (i = 0; i &lt; images.length; i++) {\r\n\t\tratio = images[i].clientWidth \/ images[i].clientHeight;\r\n\t\tcaptionOri = images[i].nextElementSibling;\r\n\r\n\t\tif (ratio &lt; 1){\r\n\t\t\tcaptionOri.innerHTML = 'portrait';\r\n\t\t\tportraits.push(images[i]);\r\n\t\t\tlet newPImg = images[i].cloneNode(false);\r\n\t\t\tpCollection.appendChild(newPImg);\r\n\t\t} else if (ratio === 1) {\r\n\t\t\tcaptionOri.innerHTML = 'square';\r\n\t\t} else {\r\n\t\t\tcaptionOri.innerHTML = 'landscape';\r\n\t\t\tlandscapes.push(images[i]);\r\n\t\t\tlet newLsImg = images[i].cloneNode(false);\r\n\t\t\tlsCollection.appendChild(newLsImg);\r\n\t\t}\r\n\t} \r\n}<\/pre>\n<p>That&#8217;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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code snippet helps you to programmatically check if an image portrait or landscape and display it according to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9618,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-9604","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Check if Image is Portrait or Landscape &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to check if Image is Portrait or Landscape using JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Check if Image is Portrait or Landscape &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to check if Image is Portrait or Landscape using JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T18:05:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Check if Image is Portrait or Landscape\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\"},\"wordCount\":233,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\",\"name\":\"JavaScript Check if Image is Portrait or Landscape &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:55+00:00\",\"description\":\"Here is a free code snippet to check if Image is Portrait or Landscape using JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Check if Image is Portrait or Landscape\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Check if Image is Portrait or Landscape\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Check if Image is Portrait or Landscape &#8212; CodeHim","description":"Here is a free code snippet to check if Image is Portrait or Landscape using JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Check if Image is Portrait or Landscape &#8212; CodeHim","og_description":"Here is a free code snippet to check if Image is Portrait or Landscape using JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T18:05:00+00:00","article_modified_time":"2024-01-22T11:05:55+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Check if Image is Portrait or Landscape","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:55+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/"},"wordCount":233,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/","name":"JavaScript Check if Image is Portrait or Landscape &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:55+00:00","description":"Here is a free code snippet to check if Image is Portrait or Landscape using JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/JavaScript-Check-if-Image-is-Portrait-or-Landscape.png","width":1280,"height":960,"caption":"JavaScript Check if Image is Portrait or Landscape"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-check-if-image-is-portrait-or-landscape\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Check if Image is Portrait or Landscape"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"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.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1184,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9604"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9604\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9618"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}