Jump to content

Images via code blocks // Can I level them all out like a grid?

Recommended Posts

Site URL: https://abba.squarespace.com/gallery

Hello my friends,

I have a large image gallery of over 100 images. Each image is in a separate code block; arranged in a 3 by 3 grid.

Can I even them out somehow? I'm hoping it will do that naturally when I add titles and the "add to cart" button under each.

Obviously I would prefer a standard photo gallery, but this is the only way I can incorporate my external ZOOM script with an add to cart option under each picture. It's a bummer, but I'm really hoping I can do one sweeping line of code to level / even out all my code blocks.

Here is how it looks: https://abba.squarespace.com/gallery  PASSWORD: square

Screen Shot 2021-09-19 at 8.52.44 PM.png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

On 9/21/2021 at 2:37 PM, elijah_aaron said:

Oops, made it public. Try now 🙂

Same with tuanphan, it looks fine

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 months later...
On 12/30/2021 at 9:25 PM, elijah_aaron said:

@tuanphan

Yes, I'd like everything even (all photos and all titles, prices, quantities and add to cart). I'd hate to have to re-size all images and re-upload... there are 100.

Add to Design > Custom CSS

/* Gallery page align */
@media screen and (min-width:901px) {
a.product-title {
    display: block;
    min-height: 60px;
}
}
@media screen and (max-width:900px) and (min-width:641px) {
a.product-title {
    display: block;
    min-height: 90px;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan

That didn't seem to help... I have the following code in the header of each gallery page.. maybe it's messing something up?


<style>
  .product-block .productDetails .product-title {
    font-family: 'scrubby', alternative-web-safe-font;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
    padding: 0
}
</style>

The only other thing I can think of, is that some of the image sizes are different. Is there a way to tell them all to be the same dimensions? I'll do whatever I need to do... Even if it means re-uploading all 100 images. I just need everything on the pages to be perfectly aligned and neat.

As a friendly reminder, all the images on these pages are via code blocks.

abba.squarespace.com/gallery

Link to comment
On 1/2/2022 at 5:51 PM, elijah_aaron said:

@tuanphan

That didn't seem to help... I have the following code in the header of each gallery page.. maybe it's messing something up?


<style>
  .product-block .productDetails .product-title {
    font-family: 'scrubby', alternative-web-safe-font;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.4em;
    font-size: calc(.24vw + 1rem);
    padding: 0
}
</style>

The only other thing I can think of, is that some of the image sizes are different. Is there a way to tell them all to be the same dimensions? I'll do whatever I need to do... Even if it means re-uploading all 100 images. I just need everything on the pages to be perfectly aligned and neat.

As a friendly reminder, all the images on these pages are via code blocks.

abba.squarespace.com/gallery

Did you add to Custom CSS or Page Header/Code Injection Header?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan I added what you sent to custom CSS and the above code into the header of each gallery page.

Do I need to resize and re-upload each image? Is there a way to tell the images to all be the same size? They are all in code blocks as follows...

<a href="https://static1.squarespace.com/static/5fc0b562d49dd12447332220/t/5fdf86cb42c0045a331139c2/1608484559781/Absolutley+YES+-+Paul+Palnik.png" class="MagicZoom">
  

  <img src="https://static1.squarespace.com/static/5fc0b562d49dd12447332220/t/5fdf86cb42c0045a331139c2/1608484559781/Absolutley+YES+-+Paul+Palnik.pngformat=750w 988h"></a>

 

I tried to used "format" to adjust the size of each but it doesn't seem to work...

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.