Aligning wide product image with title

Site URL: https://whitprint.squarespace.com

Hello.

Is there a hack to make wide images align with the top of the product title on the product detail page? We're using 7.0, Montauk.

If you would kindly take a look here:

https://whitprint.squarespace.com/product-staging

(password is "tada") you will see two products, Tall and Wide. Looks okay so far.

But then when you click on Wide, you'll see the image does not align with the title, as it does for Tall.

I am hoping there is some code we can inject to make the image and title align on the product detail page, without changing the alignment of the images on the product collection page.

Thanks!

Add to Home > Design > Custom CSS

#productDetails {
    top: 60px;
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

#productDetails {
    top: 60px;
}

 

@tuanphan Thanks, but this seems to work for one image dimension only, and it causes the Add-to-Cart button to collide with the Additional Info content below it.

Note that I put the code on the product page instead of in the site-wide styles so that it wouldn't interfere with production pages.

After relearning far more CSS, Javascript, and jQuery than I ever intended, I was able to craft a fairly general solution:

// Fix whitespace around singleton image on a product detail page. 
//
const imgWhitespaceFixer = function() {

	// This code assumes that (a) the products in this collection have only 
	// one image apiece (which is true for our products), and (b) the detail 
	// page has only one IMG.loaded element (which seems to be the case for 
	// our template).

	let w = $( 'img.loaded' ).css( 'width' );
	let h = $( 'img.loaded' ).css( 'height' );

	// Just in case we are observing in between setting a pair of dimensions:
	if ( ! ( w && h ) ) return;

	// This makes horizontal image align with title, and vertical image align 
	// with left margin of 'additional info' text (i.e. div#productDetails): 
	$( 'img.loaded' ).css( 'top', '0px' ).css( 'left', '0px' );

	// This seems to prevent accidental cropping: 
	$( '#productSlideshow' ).css( 'height', h ).css( 'width', w );

	// This prevents div#productDetails text from dangling too far below image:
	$( '#productGallery' ).css( 'height', h ).css( 'width', w );
}

// Sqs doesn't load images until after document ready (and it might
// even load them more than once, who knows). When it loads images it
// updates IMG attributes, and this observer detects when that happens.
//
const prodPageImgObserverJuju = function() {

	// This function runs when page changes (mutations) are observed
	//
	const observerCallback = function(mutationsList, observer) {

		// How to tell whether this is the product collection page or the product 
		// detail page? This function could be executing for either, but our fix 
		// is only for the detail page. Just banging around in the dark, I found 
		// that #productList appears to test true with .hasClass(clear) only on 
		// the collection page.  On the detail page, #productList is in the DOM, 
		// strangely, but it fails this test. 
		//
		if ( $( '#productList' ).hasClass( 'clear' ) ) {
			
			observer.disconnect();
			return;
		} 

		// Filter for changes to IMG.loaded 
		//
		for (const mutation of mutationsList) {

			if (mutation.target.nodeName == 'IMG' &&
				mutation.attributeName == 'class' && 
				mutation.target.className == 'loaded' 
			) { 
				imgWhitespaceFixer();
			}
		}
	};

	const observer = new MutationObserver( observerCallback );

	// Configure it to look for attribute changes (as opposed to child adds and
	// deletes), and to traverse subtree (presumably meaning all descendants 
	// of document.body.)
	//
	const config = { attributes: true, childList: false, subtree: true };

	// Launch the observer on this page
	//
	observer.observe( document.body, config );
}


jQuery(document).ready(function($) {
     
	// ...other code here

	prodPageImgObserverJuju();

	// ...other code here

});

This works for 7.0/Montauk. It's is meant to go inside the <script></script> tag in the header code injection of a product page whose products all have only one image apiece. (The copious comments are for my own benefit; in a week I'm not going to remember any of this. 😄) It seems to do the right things with both wide and tall images, and on mobile as well as desktop. Hopefully there's enough here that anyone else who needs a similar fix can use it as a jumping-off point. It was certainly a learning experience for me.

Attached are 'before' and 'after' screenshots.