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

Never solved completely picture orientation problem.


adrianrydz

Question

Site URL: https://adrianrydzluxuryprints.com

I have been struggling to display my landscape and portrait orientation pictures in original orientations on Store Page and Product Detail Pages. As everyone knows, squarespace lets you to display photos only in one orientation that makes all others pictures cropped. That is insane and I reported it to them, but they dont do anything with it for years.

Long time ago I fixed it with some css codes but I never been really happy with the result because my picture orientations are displayed in very small size compared to landscape orientations pictures.

I would like to have my portrait orientation pictures in the bigger size like here...

https://shop.jimmychin.com/collections/favorites

I tried to hire some people to fix it but no one ever replied to me haha. Does anyone know if it is possible to change?

241810513_1617753575094969_587806590120910631_n.png

240731647_4407594159278529_7261191565774221429_n.png

Edited by adrianrydz
Link to comment

Recommended Posts

  • 0

Probably shouldn't change the scope of the original question too much as it makes it hard for other people to find answers. And - honestly - I would avoid actual code. it's less predictable cross-browser, and you've already had some issues with putting code-blocks in from your previous posts. 

The general rule here is to re-order the pictures manually using squarespace, because this is the way the editor works. if we add code / or css positioning rules you should be aware that this will affect your editing experience.

That said, you can do this in CSS though, so start by adding this. This will move all your portrait pictures to the end of the grid. 

section .list-grid .grid-item.tag-portrait {
  order:5;
}

that should be enough. If you absolutely want to start a new group (which I assume you mean row) then you need to slightly edit that rule and add another one in just after it. so replace the single rule above with

section .list-grid .grid-item.tag-portrait {
  order:5;
  grid-column-start:1;
}

.grid-item.tag-portrait ~ .grid-item.tag-portrait {
  grid-column-start:auto;
}

Final comment. the more rules you put in and the more you start messing around with ordering and positioning the more chance you've got of unpredictable behaviour, different editing experiences etc. This isn't tested and we're starting to reach the limits of forum-based altruism! if we keep adding what are essentially hacks we're just going to make your experience of squarespace worse! So, add this code in if you want and check it works, but take it as is, and it's best to raise feature requests with Squarespace and get them to fix the underlying problems. things in this forum should be considered workarounds.

 

Dave Hart. Software/Technology Consultant living in London

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...