Custom code not working for modifying width of landscape ratio collection images

Design help Custom code
1

Hi,
I need help to make my custom code work.
It’s placed right before the body tag.

I want to get width and height of every image in my collection list and check if they’re portrait pr landscape by checking if width is > height.
If it’s landscape I give them a class to take the full width of my container( instead of half of it).

The main issue seems to be that some imgs sometimes will return a width of 0 or undefined when we reload the page on some different scroll position. As if the lazy load was interfering with the command window .on “load” but i’m not sure. I was trying to make a loop that checks if a width is not = 0 or undefined but I might be doing it wrong since it seems to continue looping even after the last img appears to the client. Any clue someone ?

I’ve kinda reached the limit of my jquery knowledge and might need some tips from you guys to go forward. Thanks in advance !!

My code :

<script>
$(window).on('load', function() {
var width
var height
console.log('window loaded');
	$('.space_object_img_grid').find('img').each(function checkImgLoad() {
	    //your code goes here
			width = this.naturalWidth; 
			height = this.naturalHeight;
                          console.log('width:'+ width +' height:'+ height +'');
        
       // Check if the variable is undefined or 0
  		if (height === undefined || height === 0 || width === undefined || width === 0) {
    		// Perform your action here
        checkImgLoad()
        console.log('Not Yet!');
  		} else {
    		// If the variable is defined and not 0, you can do something else
    		if (width > height){
	  	      //landscape
	  	      $(this).addClass('landscape');
	  	      $(this).parent('div').addClass('landscape');
            console.log('landscaped');
	  		} else {
	  	      //square or portrait
	  		}
  		} 		
	});
});
</script>

ROL: Webflow - Studio Kiff
Published: Dime | Studio Kiff

Here is my site Read-Only: LINK

2

hi @noestonge you have an RangeError: Maximum call stack size exceeded. error that is crashing website as width and height are undefined. Im mot familiar with jQuery syntax but wha I see in your code is that you are declaring width and height in global scope and your function checkImgLoad() is overwriting it each time.

you should have set width and height inside your function.

$('.space_object_img_grid').find('img').each(function checkImgLoad() {

	const width = this.naturalWidth; 
	const height = this.naturalHeight;
         ....

you can check stackoverflow to see some code how to read current width and height as naturalWidth is natural (original) size of image. This means if in browser image will be smaller ( eg. shrinks according to responsiveness) the naturalWidth will be always identical.

Traditional loop in vanilla JS it looks like this:

// Get all images on the page
const images = document.querySelector('.space_object_img_grid img');

// Loop through each image
for (let i = 0; i < images.length; i++) {
  // Get the width and height of the image
  const width = images[i].clientWidth;
  const height = images[i].clientHeight;

  // If the width is smaller than the height, add the 'landscape' class
  if (width < height) {
    images[i].classList.add('landscape');
     }
   }
 }

You can also use forEach or for...in loops. all is up to you.


const images = Array.from(document.getElementsByTagName('img'));

function checkImageOrientation() {

  images.forEach(img => {
    // Add the 'landscape' class if the image's displayed width is smaller than its height
    if (img.clientWidth < img.clientHeight) {
      img.classList.add('landscape');
    } else {
      img.classList.remove('landscape');
    }
  });
}

// Run the function once when the script loads
checkImageOrientation();

// Then run the function every time the window is resized
window.addEventListener('resize', checkImageOrientation);

Hope this will point you right direction

1 Like
3

Hi Stan thank you for your suggestion. Saddly I was not able to make it work. A desvelopper friend of mine did this snippet to solve it:

 
	window.addEventListener('load', ()=>{
  const images = [...document.querySelectorAll('.space_object_img_grid img')];
	images.forEach((img)=>{
    manageClass(img);
    img.addEventListener('load', ()=>{
    manageClass(img);
  })
	});
 });
 
 function manageClass (img){
   		const aspectRatio= img.naturalWidth / img.naturalHeight;
  	img.classList.toggle('landscape', aspectRatio > 1);
  	img.parentElement.classList.toggle('landscape', aspectRatio > 1);
}
1 Like