stim
-
Posts
16 -
Joined
-
Last visited
stim's Achievements
-
My solution was to use Shopify for my ecommerce side which does 3 variants easily and simply.
-
This is great however, it only seems to work with 2 drop down menus and does not work with 3. This is a real shame. I am trying to have 3 options for print orders: Size Type Frame Some types do not need a frame (or I don't want to give that option) so I need to be able to hide the frame options depending on the selection in drop down number 2. Seems like there is always a catch with Squarespace 😞 If anyone knows how to do this, I would love to hear!
-
@tuanphan I am also looking for a solution to this, particularly on a product summary block set to "Wall". Lets say you had 3 columns, you could set 3x1 images to span across 3 columns, 6x4 (landscape) images to span across 2 columns and 4x6 (portrait) images to span across only 1 column. Heights then adjust themselves. Thanks in advance!
-
Ok so after some messing around, I have managed to figure some of this out: I can add additional rows by copying the the blocks of code. For example, if I want another row of 2 landscape images, I copy the code and then change the nth numbers to the next images in the list. For example, if I want a forth row of 2 landscape images: /* row 4: 2 images 3:2 */ div.grid-item:nth-child(7), div.grid-item:nth-child(8) { width: calc(50% - 20px); margin-left: 10px; margin-right: 10px; Where (7) and (8) represent images 7 and 8 in my product list. I assume I can do this with every code block you gave me and mix and match. For the panoramic aspect ratio, I figured out that my CSS for fixing the aspect ratio was not allowing me to change it, so changing this to 33.33% fixed this. Great! The last (hopefully) thing I need to figure out is the responsiveness for Mobile. I changed the media query you added to 762px which means it keeps the format of the grid until mobile size, then it stacks all the images on top of each other in one column (with 992px the formatting was lost). Is this ok or will I run into another problem? Why did you choose 992px? Also, when it changes to the mobile view, it was not displaying the portrait images correctly (cropped them to landscape) which I have now fixed by adding back in the following code to the CSS: .tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-item.tag-portrait .grid-image-wrapper { padding-bottom: 150%!important; } You previously said I should remove this but I cannot see it creates a problem if I keep it? Could you please confirm? Thanks a lot!
-
@tuanphan I have now added 12 images but nothing happens after the original 6 I posted (the additional 6 do not show up). Also, I got the aspect ratio of the 6th (panoramic) image incorrect, it should be 3:1 rather than 16:9 and I cannot see in the code how to change this (I tried changing the last "padding-bottom" to 33.33% but it did not work). The filters I am talking about are the standard Squarespace category filters for the shop, but I figured out a site layout to not need these filters. However, I would need to be able to add or remove code from the page header code injection in order to add or remove what ever image rows I want (for example, if I wanted to add 2 rows of 3 portrait image, then 3 rows of 2 landscape images etc). At the moment the code is beyond my basic website coding skills so I am not able to replicate it for additional rows! An alternative to all of this would be just somehow display the product image as a masonry grid for the shop (which is available in the product summary block but not the main shop). I will send you the url details again by PM. Thanks again for all your help.
-
Hi paul, thanks for the answer. Yes I have been experimenting with summary blocks but you do not have the category filter function with these (as far as I can tell) and the bread crumbs also do not work...for example, if you click on a product in a summary block, the bread crumbs would lead the customer back to the print shop and not back to the page with the summary block in it. Any suggestions here?
-
Hi, did you ever find a solution to have the squarespace shop display using a masonry grid? This is the only thread I can find on the subject, which I find very strange.
-
Hi @tuanphan This is really cool, thank you. The layout is perfect like this. I assume if I add more images, I can just replicated the bit of code that corresponds with the correct aspect ratios? The only problem I have found so far, and it might kill the idea, is that it does not work with the product filters. It seems that the code is making the first row 2 landscape images wide, the second row 3 portrait images wide and the final row 1 pano image wide (which is what I asked for), but when a filter is selected, it can be that the first row is then populated by portrait or pano images so they do not display properly. Is it possible to fix this somehow? Perhaps by identifying the apsect ratio of the image and then placing it correctly when displaying the filter results? I guess I am asking too much, it seems too complicated! Thanks a lot for your help.
-
@tuanphan any luck with this? Thanks!
-
No Problem, appreciate the help, thank you. 🙂
-
Hi @tuanphan, do you have any update on this topic? Thanks a lot!
-
Here is a graphical representation of some layout options. The second one clearly has the best balance, which would be my first choice but I'm not sure if the landscape images can span across 1.5 columns like that. Otherwise option 3 (with 4 columns) works fairly well (and maybe the spacing between the 4 portrait images can be adjusted independently of the other spacing to bring them closer together and therefore bigger on the page?). Please note that these layouts are not fixed, they are just examples. I might have 2 or 3 rows of landscapes before having the portrait images etc. Its the number of images per row that I would like to be able to adjust. Thanks very much!
-
Yes, exactly! Ideally the landscape images on the top would be only 2 instead of 3 (to make them bigger), possible? Thanks a lot for your help.
-
Great, thanks, PM sent! The example I gave above would be the best but I guess maybe it is not possible to have a landscape image spanning 1.5 columns? Would I need to span whole columns? In this case, the following examples would be acceptable: 3 columns. 1 landscape image per column on each row (so 3 per row). 1 portrait image per column on each row (so 3 per row). 1 panoramic image spanning all 3 columns (so 1 per row). or 4 columns. 2 landscape images spanning 2 columns each on each row (so 2 per row). 1 portrait image per column on each row (so 4 per row). 1 panoramic image spanning all 4 columns (so 1 per row). Thanks a lot for your help! There is also the topic of what happens when you use the filter. How will the images then display?
-
Hi tuanphan, Can I share it to you directly rather than publically? Thanks.
