Adding a "Read more" link to Summary Blocks when using a Gallery page

Up until recently, there was a way for us to bring up the “Read More” link in a Summary Block when displaying a Gallery Page (and not a blog page).

The trick was quite simple: you would first link the block to a blog page, select to show the "Read More" link under the Display tab, save, and then go back in to edit the block and switch the blog page for a gallery page.

Most likely that was simply a glitch or bug, and due to recent updates in the platform that doesn’t seem to be possible anymore.

However… there’s another way.

How to add a read more link to a summary block when displaying a gallery page

The “Read More” link can be brought back by using exactly the same trick I just mentioned, PLUS a bit of our friend CSS.

Right now (this may change again in the future), by activating the link on the block by using a blog page and then switching to a gallery page, the actual HTML element is still left there inside the structure of the page.

The thing is, it’s automatically set to be hidden when switching to the Gallery.

All we have to do is make it visible again.

Let’s take a look at all this in an example.

I’ll be starting out with a summary block grid linked to a blog page.

1. Start by setting up a Summary Block linked to a blog.png

I’ll style it a bit and then go into the Display tab and make sure the “Show read more link” option is selected.

2. Select to show the read more link.png

Next, I’ll save it and then jump back in to edit the block.

This time, I’ll swap the content page for my chosen gallery page.

3. Go back to the content tab and select your gallery.png

Before, if you went into the Display tab you would see the “Show read more link” option appear, but now it’s gone:

4. Nothing shows up under the display tab.png

So, it’s time to dive into our Inspect Element tool to check things out.

Let’s select one of the slides, I just picked the first one:

5. Look for one of the slides.png
6. Zooming into inspect element.png

If we open it up, we’ll be able to see the container holding all of the text portion of our slide (both the whole slide container and the text container are highlighted so you can see where we’re going):

7. Looking for content area.png
8. Zooming in.png

Now, if we open that text container we’ll notice we have an HTML comment, in green, that reads “Read More Link” and right below it the actual read more link as an a element:

9. Noticing read more link comment.png
10. Seeing read more link element with class.png

Cool, we found it!

If we now look into the right side of our inspect window, we’ll notice that this link has been set to display: none; effectively hiding it (as well as the space it occupies) from sight.

11. Noticing its been set to none.png

That’s exactly what we need to alter in order to have it show up!

BUT, before we get into it, I want to show you why we still need to do that blog and gallery page switch when first setting up the block.

If we quickly look at a different summary block that’s been set directly to a gallery page (without making the switch from blog page and “activating” the read more link), here’s what we’ll see when opening the text container:

13. Finding content container but no link.jpg


Neither the “Read More Link” comment nor the actual read more link a element are showing up!

If we don’t activate the option first with “the trick”, we have no way of bringing back up the “Read more” link into view with CSS because the HTML element isn’t there in the first place.

So, keep that in mind!

Ok, moving onto the final step!

Let’s rewind to the stage where we discovered that the “Read More” link was being set to display: none;

11. Noticing its been set to none.png

To target this element, we could either use its class .summary-read-more-link on its own as our selector…

14. Looking at link class.png

…or we could use the selector that Squarespace is already using to hide the link in the first place, .sqs-block-summary-v2 .summary-read-more-link

15. Noticing the general selector on the right side.png


What’s the difference you ask?

It’s all about specificity.

Without going into too much detail, the selector Squarespace is using on the right (.sqs-block-summary-v2 .summary-read-more-link) is more specific than simply using the link’s class (.summary-read-more-link), because instead of pointing to “the guy in the hat” it’s pointing to “the guy in the hat inside that store”.

So, let’s just stick with the more specific one and plop it into our CSS window:

.sqs-block-summary-v2 .summary-read-more-link {

}
16. Pasting selector inside Custom CSS window.png

And then, we simply need to change the display value to block:

.sqs-block-summary-v2 .summary-read-more-link {
  display: block;
}
17. Setting it to display block.png

I’ll highlight that with a background color for a second to make it more visible:

18. Adding bg color to make it more noticeable.png

Alright! There you have it!

Now you know how to display the “Read More” link in a summary block that’s using a gallery page instead of a blog.

Hope you found this helpful!

 

Until next time,

B.

 

Full code

.sqs-block-summary-v2 .summary-read-more-link {
  display: block;
}