Custom Aspect ratio for portfolio pages

Hi, 

I am trying to get the same look for portfolio pages that I can achieve with Gallery pages.

The look i need is : 

But with portfolio pages, I get everything in 1:1 aspect ratio.

Even with the custom css code 

.grid-image img {
    object-fit: contain !important;
}

The image will still be contained inside the 1:1 square.

Would really appreciate if you anybody could help with this.

Cheers!

Hi. Can you share link to portfolio page? We can help easier

Hi,

https://flower-bat-t5ng.squarespace.com/portfolio-2

Password : Underconstruct21

The look i am going for is as below (where not everything is aligned in a row in the 1:1 aspect like it is on the Portfolio 2 page.

Appreciate it. 

Thanks 🙂

The url doesn't exist.

Please can you help me to achieve a similar result? (check image reference)

https://apricots-tunny-yy4c.squarespace.com/config/design/custom-css

On 5/3/2022 at 4:25 AM, gppp96 said:

Please can you help me to achieve a similar result? (check image reference)

 

https://apricots-tunny-yy4c.squarespace.com/config/design/custom-css

Your site is private. Can you setup password & share url again?

https://apricots-tunny-yy4c.squarespace.com/config/settings

Password: Hiro96

Thanks!

2 hours ago, gppp96 said:

https://apricots-tunny-yy4c.squarespace.com/config/settings

Password: Hiro96

 

Thanks!

Thank you.

On this page?

https://apricots-tunny-yy4c.squarespace.com/works-1

yes

On 5/7/2022 at 11:06 PM, gppp96 said:

yes

Have you tried Gallery Masonry yet?

Ive tried to put a normal photo gallery istead of the plugin. I like the result of it. I also manage to link the image to its personal description in another page. The Problem is that I can ’ t put text subtitles overlay like in the portfolio page. Do you have any idea?

21 hours ago, gppp96 said:

Ive tried to put a normal photo gallery istead of the plugin. I like the result of it. I also manage to link the image to its personal description in another page. The Problem is that I can ’ t put text subtitles overlay like in the portfolio page. Do you have any idea?

 

https://apricots-tunny-yy4c.squarespace.com/nuova-pagina     this is my new page

 

add text and foto overlay opacity like in my portfolio page. I will delete then the portfolio page. This is my portfolio page----  https://apricots-tunny-yy4c.squarespace.com/works-1

 

 

Thanks a lot

You mean: hover image >> Show overlay + title

First, you need to Enable Gallery Caption

Next, add caption for some images

Then we can give the code to make hover effect

ok done. 

https://apricots-tunny-yy4c.squarespace.com/config/design

now I need to put the caption in black on the image with a white opacity white layer + a subtitle under each caption.

Thanks

On 5/11/2022 at 6:27 PM, gppp96 said:

ok done. 

https://apricots-tunny-yy4c.squarespace.com/config/design

now I need to put the caption in black on the image with a white opacity white layer + a subtitle under each caption.

 

Thanks

Hi. For this page? 

https://apricots-tunny-yy4c.squarespace.com/nuova-pagina?noredirect

Add to Design > Custom CSS

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper:after {
    background: rgba(255,255,255,0.9); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    z-index: 9999;
}
.gallery-masonry-item:hover .gallery-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figure:hover .gallery-masonry-item-wrapper:after {
    opacity: 1;
}

yes.  all works, the caption looks a bit opaque, its almost invisible. theres a way to do it a bit more black?

How can I add another line under the caption?

Thanks in advance

And now I lost the possibility to link the image project to another page...

Thanks!

16 hours ago, gppp96 said:

And now I lost the possibility to link the image project to another page...

Thanks!

Use this new code

body#collection-6279314ca417ed4a39ac61a0 {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper:after {
    background: rgba(255,255,255,0.9); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    z-index: 9999;
}
.gallery-masonry-item:hover .gallery-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figure:hover .gallery-masonry-item-wrapper:after {
    opacity: 1;
}}

Everything works, but I still dont have the possibility to link a page to the image... 

Can I also modify the dimension of the caption title or put it in bold? 

Thanks!

20 hours ago, gppp96 said:

Everything works, but I still dont have the possibility to link a page to the image... 

Can I also modify the dimension of the caption title or put it in bold? 

 

Thanks!

Have you added links yet? When you add gallery caption, it has an input to enter link

you mean like this? I tried but doesn t work.. before adding css was working

On 5/16/2022 at 4:14 PM, gppp96 said:

you mean like this? I tried but doesn t work.. before adding css was working

Try this new code

body#collection-6279314ca417ed4a39ac61a0 {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(255,255,255,0.9); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    z-index: 9999;
}
.gallery-masonry-item:hover .gallery-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figure:hover .gallery-masonry-item-wrapper a:after {
    opacity: 1;
}}