[Share] Portfolio Page Code (7.1)

Some code for Portfolio Page - Grid Simple in 7.1.

All code: Add to Design > Custom CSS

• <style> <script> you need to add to Page Header or Code Injection

#1. Change Overlay Color

/* Show dark overlay on hover */
.grid-image {
    opacity: 1 !important;
    position: relative;
}
.grid-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* chage overlay color here */
    transition: all 0.3s;
    opacity: 0;
}
.grid-item:hover .grid-image:after {
    opacity: 1;
    transition: all 0.3s;
}

#2. Add Subtitle

First, find subpage [url slug]

Next, use this CSS

/* Add subtitle */
h3.portfolio-title:after {
    font-size: 20px;
    color: black;
    display: block;
}
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
    content: "subtitle 01";
}
a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after {
    content: "subtitle 01";
}

Repeat for other sub pages

#3. Add Multi Subtitle

/* Multi subtitle */
h3.portfolio-title:after {
    font-size: 20px;
    color: black;
    display: block;
    white-space: pre-wrap;
}
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
    content: "subtitle 01 \A second subtitle \A third subtitle ";
}
a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after {
    content: "subtitle 02 \A second subtitle \A third subtitle 2";
}

#4. Change to 5 items/row (Desktop)

/* Portfolio 5 columns */
@media screen and (min-width:992px) {
div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}
}

If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.

#5. Change to 2 items/row (Mobile)

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(5,1fr);
}
}

If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.

#6. Add “new” badge to next to title

/* new badge */
a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
    content: "New";
    position: absolute;
    top: -5px;
    font-size: 14px;
    background-color: red;
    color: white;
    line-height: 20px;
    padding: 2px;
    margin-left: 10px;
}

#7. Add an icon next to title

a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 50px;
    height: 50px;
    display: block;
    float: right;
}

Replace with [URL Slug] (see screenshot in first code)

#8. Zoom in image on hover

/* Zoom in image on hover */
.grid-image img {
    transition: all 0.3s;
}
.grid-image-inner-wrapper {
    overflow: hidden;
}
a.grid-item:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}

#9. Add “view” text when hover image

/* Add view text on hover image */
.grid-image:before {
    content: "view";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    display: block;
    width: 100%;
    z-index: 999999;
    color: white;
    opacity: 0;
    transition: all 0.3s;
}
a.grid-item:hover .grid-image:before {
    opacity: 1;
}

#10. Show Overlay + Title over image when hover (Desktop only)

/* show overlay title on hover */
.grid-image {
    opacity: 1 !important;
    position: relative;
}
.grid-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    transition: all 0.3s;
    opacity: 0;
}
.grid-item:hover .grid-image:after {
    opacity: 1;
    transition: all 0.3s;
}
.grid-image:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    display: block;
    width: 100%;
    z-index: 999999;
    color: white;
    opacity: 0;
    transition: all 0.3s;
}
a.grid-item:hover .grid-image:before {
    opacity: 1;
}
.portfolio-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999999999;
    width: 100%;
    text-align: center;
    transition: all 0.3s;
    opacity: 0;
}
a.grid-item {
    position: relative;
}
a.grid-item:hover .portfolio-text {
    opacity: 1;
}
.portfolio-text {
    margin: 0 !important;
}
h3.portfolio-title {
    margin: 0 !important;
}

#11. Change Aspect ratio on sepcific portfolio page

First, find [page id]

Next, use this CSS

/* aspect ratio 2:3 */
body#collection-622f619622029655b91503a8 .grid-image {
    padding-bottom: 150% !important;
}

2:3 = (100 x 3)/2 = 150%

#12. Remove Pagination

/* remove portfolio pagination */
.item-pagination[data-collection-type^="portfolio"] {
    display: none;
}

#13. Remove Pagination Title Only

/* remove pagination title */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    display: none;
}

#14. Remove Pagination Arrows Only

/* remove pagination arrows */
[data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke {
    display: none;
}

#15. Replace Pagination Title with text Prev/Next

/* Pagination title */
[data-collection-type*="portfolio"] {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}}

#16. Repalce Pagination Arrow with custom icon

/* Custom pagination arrow icon */
[data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke svg {
    display: none;
}
[data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon.icon.icon--stroke {
    background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
[data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon.icon.icon--stroke {
    background-image: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#17. Add all projects under Pagination

Add to Project Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(document).ready(function() { 
        $('<section class="item-pagination item-pagination--prev-next under-pagination"><div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"><p><a href="/work" target="_blank">All</a> / <a href="/work/meccaandmedina">Mecca &amp; Medina</a> / <a href="/work/street">Street</a> / <a href="/work/humansofstlouis">Humans of St. Louis</a> / <a href="/work/charis">CHARIS</a></p></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');
    });
    </script>
    <style>
    section.under-pagination {
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>

#18. Add Last Project/First Project on First Page/Last Page Pagination

Add to Page Header or Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
        $('<a href="/portfolio/12" class="item-pagination-link item-pagination-link--prev"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Previous</div><div class="item-pagination-prev-next">- PREV</div><h2 class="item-pagination-title">12 | PRIVATE EVENTS</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next');
    });
    </script>

#19. Add Button to Pagination

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
        $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next');
    });
    </script>
    <style>
    /* Portfolio back to button */
a.portfolio-backto .item-pagination-title {
    background-color: black;
    color: white !important;
    padding: 10px;
}
</style>

#20. Add “Back to all projects” under pagination

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) { 
   $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');
 }); 
</script>

#21. Move Pagination from bottom to top

Add to Page Header

<style>
main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  .view-item .item-pagination[data-collection-type^="portfolio"] section:first-child {
    padding-top: 10px !important;
}
</style>

#22.Change Pagination Title size (mobile)

/* pagination title mobile */
@media screen and (max-width:767px) {
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 14px;
}
}

#23. Change Pagination Color on hover

/* pagination hover */
.item-pagination[data-collection-type^="portfolio"] h2:hover {
    color: #f1f;
}
.item-pagination[data-collection-type^="portfolio"] .icon:hover svg {
    stroke: #f1f;
}

--

Checked by @tuanphan

Edited March 23, 2022 by tuanphan
update order number

Thank you for your help!

Hi @tuanphan, for the bottom section of one of my pages, I want that background image to extend into the footer section so that the bottom section and the footer have a merged, same background image? Please help?

 

On 3/18/2022 at 6:15 PM, tuanphan said:

/* Show dark overlay on hover */
.grid-image {
    opacity: 1 !important;
    position: relative;
}
.grid-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* chage overlay color here */
    transition: all 0.3s;
    opacity: 0;
}
.grid-item:hover .grid-image:after {
    opacity: 1;
    transition: all 0.3s;
}

Hi @tuanphan thank you for your help with the color overlay. I tried adding this to the galleries page of our site but its not working. Could you take a look and let us know what we're doing wrong? Thank you so much for your help! Site URL: https://spinach-circle-hb9w.squarespace.com/gallery password: DoveLove2022!

On 3/23/2022 at 3:02 PM, Iwan said:

Hi @tuanphan, for the bottom section of one of my pages, I want that background image to extend into the footer section so that the bottom section and the footer have a merged, same background image? Please help?

 

What is your site url? I can check easier

 

14 hours ago, MinerMan2022 said:

Hi @tuanphan thank you for your help with the color overlay. I tried adding this to the galleries page of our site but its not working. Could you take a look and let us know what we're doing wrong? Thank you so much for your help! Site URL: https://spinach-circle-hb9w.squarespace.com/gallery password: DoveLove2022!

It looks like you added to Page Header or Code Injection Header.

With code in Page Header, you need to wrap code in style tag, the code should be

<style>
  /* Show dark overlay on hover */
.grid-image {
    opacity: 1 !important;
    position: relative;
}
.grid-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* chage overlay color here */
    transition: all 0.3s;
    opacity: 0;
}
.grid-item:hover .grid-image:after {
    opacity: 1;
    transition: all 0.3s;
}
</style>

 

On 3/26/2022 at 10:39 AM, tuanphan said:

What is your site url? I can check easier

 

Thanks @tuanphan, https://beige-oleander-mp66.squarespace.com/config/ password tuansqsp

On 3/26/2022 at 3:40 AM, tuanphan said:

It looks like you added to Page Header or Code Injection Header.

With code in Page Header, you need to wrap code in style tag, the code should be

<style>
  /* Show dark overlay on hover */
.grid-image {
    opacity: 1 !important;
    position: relative;
}
.grid-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* chage overlay color here */
    transition: all 0.3s;
    opacity: 0;
}
.grid-item:hover .grid-image:after {
    opacity: 1;
    transition: all 0.3s;
}
</style>

 

Sorry about that. That was an easy fix. Thank you 🙂

On 3/28/2022 at 1:40 PM, Iwan said:

Thanks @tuanphan, https://beige-oleander-mp66.squarespace.com/config/ password tuansqsp

Thank you. You mean homepage? https://beige-oleander-mp66.squarespace.com/?noredirect

@tuanphan do you have a code to change the hover color on portfolio project links? I want these links to change into something lighter.

On 4/9/2022 at 4:29 AM, theeseanmartin said:

@tuanphan do you have a code to change the hover color on portfolio project links? I want these links to change into something lighter.

Hi,

Can you share link to portfolio page on your site? We can check easier

This is amazing! Thank you so much!

Is there any way in Portfolio Grid 7.1 to use #3. Add Multi Subtitle in different placements?

I tried modifying #6. Add “new” badge to next to title but noticed it removed my original subtitle. 

Site: https://lynx-sunflower-g3m2.squarespace.com/

Password: csshelp

Edited May 26, 2022 by mnrdgz
Adding website

13 hours ago, mnrdgz said:

This is amazing! Thank you so much!

Is there any way in Portfolio Grid 7.1 to use #3. Add Multi Subtitle in different placements?

I tried modifying #6. Add “new” badge to next to title but noticed it removed my original subtitle. 

Site: https://lynx-sunflower-g3m2.squarespace.com/

Password: csshelp

Hi,

#1. You mean add another line in arrow position? Not Possible

Or move second line to arrow position? I think this is possible, if you need this, we will test code

#2. Change 

Quote

:after

to

Quote

:before

 

4 hours ago, tuanphan said:

#1. You mean add another line in arrow position? Not Possible

Yes, I meant this.

Ok, thank you so much for the quick response!

Hi tuanphan . . .can you help us please?

 

I feel that what you were going into above is sooooo close to what we need to happen, I've tried tweaking it to fit what I want but it jsut doesn;t seem to be able to get there.

Essentially we just want to reduce the padding at the top and bottom of the portfolio using the follow cursor style grid.

 

https://tarantula-prism-gtlk.squarespace.com/portfolio-2

 

the password is "dutch"

we have an ongoing forum question here if its of any help:

 

 

Many manythanks in advance, really hope you can help us!

Thank @tuanphan for your help! I used your code to add a button back to the work page. I edited the styling to make it a plain text link:

However, it doesn't appear on the last item in the portfolio since the code says it should appear after the "next" link. Is there a way to add it to the last item?

 

Thank you!

Edited August 16, 2022 by joaqaman

On 8/16/2022 at 4:12 PM, joaqaman said:

Thank @tuanphan for your help! I used your code to add a button back to the work page. I edited the styling to make it a plain text link:

However, it doesn't appear on the last item in the portfolio since the code says it should appear after the "next" link. Is there a way to add it to the last item?

 

Thank you!

Can you share link to page in screenshot 2? I can adjust code easier

Hello @tuanphan, 

We decided not to proceed with the button in pagination. 

Instead, may I ask some help on the background color of pagination? Previously our pagination looked like this:

The background color dynamically was the same as the color above it. This is exactly what we wanted especially since we are using different background colors for the sections on each portfolio item.

But now, the pagination is a plain white background:

 

Could you help with the background color so that it is dynamic? I only know how to change the background color of the pagination to one color, instead of it dynamically changing per portfolio item based on the section above it. 

Here's the website: https://ukulele-dolphin-dddx.squarespace.com/

and the password is eliseoshome

 

Edited September 3, 2022 by joaqaman
Clarity

15 hours ago, joaqaman said:

Hello @tuanphan, 

We decided not to proceed with the button in pagination. 

Instead, may I ask some help on the background color of pagination? Previously our pagination looked like this:

The background color dynamically was the same as the color above it. This is exactly what we wanted especially since we are using different background colors for the sections on each portfolio item.

But now, the pagination is a plain white background:

 

Could you help with the background color so that it is dynamic? I only know how to change the background color of the pagination to one color, instead of it dynamically changing per portfolio item based on the section above it. 

Here's the website: https://ukulele-dolphin-dddx.squarespace.com/

and the password is eliseoshome

 

I can't find portfolio page. Can you share link to a portfolio in screenshot?

Hi @tuanphan Thanks for all the css! I would love to have a button on all my portfolio pages that lead back to the homepage of my website. I tried to do both #19 and #20 but for some reason I don't see any buttons appearing. I tried injecting the codes in code injection footer and custom css. How can I fix this? 🙂

https://illusterre-sample.squarespace.com password: Illusterre2022

Edited November 24, 2022 by Illusterre

On 11/24/2022 at 9:58 PM, Illusterre said:

Hi @tuanphan Thanks for all the css! I would love to have a button on all my portfolio pages that lead back to the homepage of my website. I tried to do both #19 and #20 but for some reason I don't see any buttons appearing. I tried injecting the codes in code injection footer and custom css. How can I fix this? 🙂

https://illusterre-sample.squarespace.com password: Illusterre2022

Just tested #19 on your site, it still works here. Which exact code did you add? And where did you add? All are script code, you can't add them to Custom CSS.

Also, if you use both code, you need to remove a line on #20, because they are same & can conflict together

On 11/27/2022 at 2:02 PM, tuanphan said:

Just tested #19 on your site, it still works here. Which exact code did you add? And where did you add? All are script code, you can't add them to Custom CSS.

Also, if you use both code, you need to remove a line on #20, because they are same & can conflict together

Hi! Thank you, I tried again and it worked! I decided to not use the code since I don't really like the placement and size and I don't know how to adjust those things in the code. I think people can manage to find their way back to my homepage without the button. Thank you for responding, really appreciate it!

On 12/1/2022 at 1:57 AM, Illusterre said:

Hi! Thank you, I tried again and it worked! I decided to not use the code since I don't really like the placement and size and I don't know how to adjust those things in the code. I think people can manage to find their way back to my homepage without the button. Thank you for responding, really appreciate it!

You can place it again then we can check easier. If the site is live & you can't add it. You can duplicate the site & add there.

See how to duplicate a site: https://support.squarespace.com/hc/en-us/articles/360039396131-Duplicating-a-site

@tuanphan for the blog summary page, is there a way change "older posts" to numbers at the bottom of the page, in the middle? Similar to the image below?

 

Thank you so much for this post! I was wondering if there was a way to have multiple subtitles with different adjust the font size, color and boldness for each. I'd like to add one more subtitle as "tags" for the project, maybe in a different color.