Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Aligning wide product image with title


LKW

Question

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!

 

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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. // co

Posted Images

3 answers to this question

Recommended Posts

  • 0
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.

Screen Shot 2020-10-19 at 10.14.01 AM.png

Screen Shot 2020-10-19 at 10.14.25 AM.png

Screen Shot 2020-10-19 at 10.14.42 AM.png

Link to post
  • 0

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.

 

Screen Shot 2020-11-14 at 9.30.16 AM.png

Screen Shot 2020-11-14 at 9.30.59 AM.png

Edited by LKW
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...