Jump to content

[Share] Portfolio Page Code (7.1)

Recommended Posts

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]

subpage-url-slug.png

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";
}

subt2.png

#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;
}

new.png

#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)

title2.png

#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;
}

view.png

#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]

page-id.png

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>

backto.png

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

backto2.png

#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 by tuanphan
update order number

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 🙂

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

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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.

Screen Shot 2022-04-07 at 11.15.16 AM.png

Hi,

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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. 

Google Chrome • Mane Rodrigues — 05-25-2022.png

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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!

Link to comment
  • 2 weeks later...

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:

image.thumb.png.ff12e385257ce5b13b4028d48c9b95e6.png

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?

image.thumb.png.7af0d75845a1419c86f9105de5340ec1.png

 

Thank you!

Edited by joaqaman
Link to comment
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:

image.thumb.png.ff12e385257ce5b13b4028d48c9b95e6.png

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?

image.thumb.png.7af0d75845a1419c86f9105de5340ec1.png

 

Thank you!

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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:

image.thumb.png.7af0d75845a1419c86f9105de5340ec1.png

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:

image.thumb.png.713178cf9b42746c3f54b5d645432c15.png

 

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 by joaqaman
Clarity
Link to comment
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:

image.thumb.png.7af0d75845a1419c86f9105de5340ec1.png

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:

image.thumb.png.713178cf9b42746c3f54b5d645432c15.png

 

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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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 by Illusterre
Link to comment
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

image.thumb.png.bf6cfaef43b349fc1710fda7b259d7d8.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

image.thumb.png.bf6cfaef43b349fc1710fda7b259d7d8.png

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!

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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.