Portfolio Page Thumbnails Focal Point Setup Using Code

The focal point setup feature is currently unavailable on Squarespace. So, it is time to use some code to setup your portfolio thumbnail focal point.

Why using focal point for your thumbnail?

Short answer: to make your thumbnail to look the way you want it to. It gives you more control about how you want to present your work to your audience online.

CSS Property For Focal Point Setup

We are going to use “object-position” property. You can make it the way you want to. If you want your focal point to be on the top, then have object-position: top; or bottom. You can read the MDN documentation about how you can use this property.

CSS Code For Portfolio Page Focal Point Setting

Here is the code (just copy and paste the below code in your CSS panel):

.grid-item img {

object-property:top !important;

}

Only To Target On A Specific Item

The second image focal point is not good.

If you do not want your code to work on all thumbnails, then you can add pseudo class nth-child into your code. Please copy and paste below:

.grid-item:nth-child(2) img {

object-property:top !important;

}

Because in our case, we only want to target on the second item from all the projects, so we put “2”. If it is the third in your case, please put “3” in your code.

Better Solution If You Want To Target On A Specific Item

However, it might be a lot of work as you have more projects on your page. Then your “second” project might be the “third” or “fourth”. We need to come back to the css panel to change the order number of your project.

Therefore, it is more efficient to target on the URL link in your code. Please copy and paste below:

.grid-item[href=”/new-portfolio/project-two”] img {

object-property:top !important;

}

Please replace “/new-portfolio/project-two” with your website link. Otherwise it will not work :)

---

Need Help With Your Squarespace Website?

Let us know your business and we can design your high-performing websites together.