Creating a bold Index Gallery slideshow

In a previous tutorial we saw how we can customize the Index Gallery slideshow in Squarespace to add fancy new arrows and subtly switching up the layout of the description portion.

In today’s tutorial, we’re going to take a similar approach code-wise to achieve that gorgeous bold look we’ve seen on other sites where we half the slide split into two: one half for the content, one half for the image.

This is perfect to showcase things like your services, photo gallery previews or even testimonials!

Let’s get to it!


Splitting the index gallery slideshow slides in half

If you went through that tutorial I mentioned in the beginning, you may recall we achieved a similar look with very little effort, while trying to set our layout the way we needed to complete our customization.


Well guess what? We’re going to get to that point again today!

It’s ok if you don’t remember or have zero clue what we’re talking about here, let’s go through it step by step.

Let’s start by prepping our Index Gallery.

1. Initial setting.png

These are the settings you’ll need to easily replicate what we’re doing here, however feel free to experiment changing all of them and adapting the code if necessary!

  • Layout: Slideshow

  • Next/Previous Controls: Small Arrows

  • Content Position: Bottom Center

  • Content Offset (Bottom): 0

  • Content Max Width: 100%

  • Content Background: any color you like


And in case you’re curious, here are aaaaall the settings I used to achieve this particular style (click to zoom):

2. Settings.png
3. Additional settings.png


The initial goal is to have our image and our content side by side. From there we can decide how to align it, style it, split it, etc.

Now, if we look at one of our slide containers through Inspect Element, we’ll notice that our content container and our figure element holding our image are siblings inside it.

1. Targeting container that has two children.png
2. Zoom in.png

This makes our customization a whole lot simpler because there’s a handy method we can use to align these babies however we want.

Can you guess what I’m talking about?

Yep, flexbox.


So, we’re going to be making our slide – aka our parent container – flex so we can easily move around the children – aka the content container and the image.

We’ll target it through that class .Index-gallery-item-inner, and I’ll also make sure to target the index gallery itself through its URL slug.

#stacked-gallery .Index-gallery-item-inner {
  display: flex;
}
3. Making the text flex.png


Perfect!

Right away we can already see our content container occupying a good chunk of the slide, so let’s make both sides even and split them 50/50.

To do that, we need to set the initial size of both our children containers as 50% through the flex-basis property.

Let’s take a look at how we can target them.

4. Looking for text side class.png
5. Looking to target both children.png

In our Inspect Element window we can see that the text container has a class called .Index-gallery-item-content (highlighted in light blue) and our figure element holding our image has a class of .Index-gallery-item-image, so let’s use those.

We’ll bring these two together inside the same selector group since we’ll be applying the same styles to both of them.

#stacked-gallery .Index-gallery-item-content,
#stacked-gallery .Index-gallery-item-image {
  
}

And now let’s set that initial size:

#stacked-gallery .Index-gallery-item-content,
#stacked-gallery .Index-gallery-item-image {
  flex-basis: 50%;
}
6. Setting the width.png

Alright, looking better.

Now, as you may notice, the pink container is still not exactly covering just half of the slide.

If we take a look through Inspect Element…

7. Looking at the padding.png



We immediately notice there’s a padding hanging around that we’ll need to get rid of.

I’ll be setting the padding to 0 inside our same group of selectors to make sure the image container doesn’t have any either.

#stacked-gallery .Index-gallery-item-content,
#stacked-gallery .Index-gallery-item-image {
  flex-basis: 50%;
  padding: 0;
}
8. Removing the padding.png

Great!

Now, you can choose to leave your image covering the entire space and sitting behind the content container if you like, however if you want to make sure the left – or right – side of your image is visible then let’s go ahead and set a left offset just for the image.

#stacked-gallery .Index-gallery-item-image {
  left: 50%;
}
9. Moving the image.png

Nice!

Let’s move onto fixing the alignment of the content in the pink container.

To do this easily we’re going to be relying on flexbox once again, so let’s make our pink container flex and set the direction as column so the heading stays stacked over the description and doesn’t sit next to it.

#stacked-gallery .Index-gallery-item-content {
  display: flex;
  flex-direction: column;
}
10. Making container flex.png

Seems like nothing changed right?

However we can now simply use the justify-content property to center our text in the middle of our container!

#stacked-gallery .Index-gallery-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
11. Centering description vertically.png

Alright, now how about we add some padding to both the title and the description to unstuck it from the edges of the container?

Taking a peek inside Inspect Element we can see we have an h2 for the title and a class of .Index-gallery-item-content-body for the description container.

12. Closer look.png

Let’s target both inside the same selector group and add the same padding so they remain aligned.

#stacked-gallery .Index-gallery-item-content h2,
#stacked-gallery .Index-gallery-item-content-body {
  padding: 10px 80px;
}
13. Adding padding.png

Beautiful!!

Let’s check out our customization on mobile devices:

14. Preview in tablet.png
15. Preview in phones.png

It’s looking awesome on tablet but we should do something about phone screens.

I’ll simply remove the customization from that screen size by using a media query to keep it for tablets and desktop only!

@media screen and (min-width: 640px) {
  #stacked-gallery .Index-gallery-item-inner {
    display: flex;
  }
  #stacked-gallery .Index-gallery-item-content,
  #stacked-gallery .Index-gallery-item-image {
    flex-basis: 50%;
    padding: 0;
  }
  #stacked-gallery .Index-gallery-item-image {
    left: 50%;
  }
  #stacked-gallery .Index-gallery-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #stacked-gallery .Index-gallery-item-content h2,
  #stacked-gallery .Index-gallery-item-content-body {
    padding: 10px 80px;
  }
}
17. After media query.png

Love it!

Now before we call it a day, I want to style that “Read the post“ link a bit more, so I’ll look for a way to target it:

18. Targeting link.png
19. Zoom in.png

Alrighty so we can simply use the text container class and then target the a element inside it since it’s the only one.

I’ll just add a couple of styles to it, nothing fancy!

#stacked-gallery .Index-gallery-item-content-body a {
  text-transform: uppercase;
  font-size: .7em;
  font-family: montserrat;
  font-weight: bold;
}
20. Styling the link.png

And I’ll include a nice little arrow through a quick pseudo-element:

#stacked-gallery .Index-gallery-item-content-body a::after {
  content: '→';
}
21. Adding arrow.png

Yess! Perfect!

This is the final result in all screens:

22. Result in desktop.png
23. Result in tablet.png
24. Result in phone.png

Alright my friend there you have it!

That’s how you can create a bold Index Gallery slideshow in Squarespace using the Brine template!

Until next time,

B.

 

Full code

/*Setting the vertically-halved layout for tablets and desktop only*/
@media screen and (min-width: 640px) {
  #stacked-gallery .Index-gallery-item-inner {
    display: flex;
  }
  #stacked-gallery .Index-gallery-item-content,
  #stacked-gallery .Index-gallery-item-image {
    flex-basis: 50%;
    padding: 0;
  }
  #stacked-gallery .Index-gallery-item-image {
    left: 50%;
  }
  #stacked-gallery .Index-gallery-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #stacked-gallery .Index-gallery-item-content h2,
  #stacked-gallery .Index-gallery-item-content-body {
    padding: 10px 80px;
  }
}

/*Styling the link inside the text*/
#stacked-gallery .Index-gallery-item-content-body a {
  text-transform: uppercase;
  font-size: .7em;
  font-family: montserrat;
  font-weight: bold;
}
#stacked-gallery .Index-gallery-item-content-body a::after {
  content: '→';
}