Image Gallery - Possible to Use a Different Image Size for a Thumbnail than Lightbox Image

Hi,

In an Image Gallery is it possible to use a different image size for a Thumbnail than Lightbox image?

Thanks,

Phil

Hi,

Can you share link to page where you use gallery?

Hi Tuanphan! Thanks for your reply.

Here's the gallery page link - https://www.philjaeger.com/illustration

Is it possible to use a different image and/or image size for a Thumbnail than the corresponding Lightbox image?

Also on a separate topic, I've noticed on mobile that the header 3rd custom social media icon is not displayed. On the desktop it shows up.

Thanks for your help,

Phil

On 7/1/2023 at 3:03 AM, Zwaeback said:

Hi Tuanphan! Thanks for your reply.

Here's the gallery page link - https://www.philjaeger.com/illustration

Is it possible to use a different image and/or image size for a Thumbnail than the corresponding Lightbox image?

Also on a separate topic, I've noticed on mobile that the header 3rd custom social media icon is not displayed. On the desktop it shows up.

Thanks for your help,

Phil

#1. You want to make image bigger or smaller?

#2. Change this code

@media only screen and (min-width: 640px) {
    .header-actions-action--social .icon--fill:nth-of-type(3) {
        background-image:url(https://static1.squarespace.com/static/646d9d2805b58e77351b313a/t/649f3c22b4ced626d7adad8b/1688157218124/pixels-logo-header.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .header-actions-action--social .icon--fill:nth-of-type(3) svg {
        display: none;
    }
}
.header-menu-actions-action:nth-of-type(3) {
    background-image: url(https://static1.squarespace.com/static/646d9d2805b58e77351b313a/t/649f3c22b4ced626d7adad8b/1688157218124/pixels-logo-header.png);
    background-size: 100%;
    background-repeat: no-repeat
}

to this

@media only screen and (min-width: 768px) {
    .header-actions-action--social .icon--fill:nth-of-type(3) {
        background-image:url(https://static1.squarespace.com/static/646d9d2805b58e77351b313a/t/649f3c22b4ced626d7adad8b/1688157218124/pixels-logo-header.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .header-actions-action--social .icon--fill:nth-of-type(3) svg {
        display: none;
    }
}
.header-menu-actions-action:nth-of-type(3) a {
    background-image: url(https://static1.squarespace.com/static/646d9d2805b58e77351b313a/t/649f3c22b4ced626d7adad8b/1688157218124/pixels-logo-header.png);
    background-size: 100%;
    background-repeat: no-repeat;
}