Style ideas for arranging headshots

Hi everyone 

I’m looking for some inspiration please!

I’ll be having a few pages on the site dedicated to groups of people - Board of Directors and Fellows. I’ve looked at gallery options and I’m struggling for ideas on how to best present a group of headshots. 

I’d like to have all their headshots and upon clicking/hovering a short biography should appear. 

Any ideas on best practice or innovative ways of designing such a page, or even any examples would be really appreciated. 

Thank you. 

You can use Image Blocks, I created some hover effect for show description, you can see here. 

• Image Boxes 01, 03, 04. https://beaverhero.com/squarespace-templates-image-boxes/
• or here. https://beaverhero.com/squarespace-templates-team/

or you can use Images Block with images + name only, then use this plugin to create Lightbox on click.

Really like the look of those, thank you will check them out properly. 

Hi @tuanphan 

I've looked at the links you sent and the 'The Team Behind Turquoise' seems perfect for what I need. I've managed to insert them into the page, as per the instructions, but you'll seem from the screenshot that they are all under each other with no space in between.

Ideally, I'd like them side by side, with a slight space between and also each one to be smaller and thinner (as there will be up to 12 of these on the page). Also, I know it sounds odd, but how to I insert my own images into the markdown? 

It would also be useful to use Image Boxes 01 or 03 from the first link, especially on a page where I have quite a few headshots and much more text relating to that person. I've tried doing these and can't seem to get them working properly. Again, ideally I'd like relatively small images but when you hover or even click on the image a pop up with space for quite a bit of text would be useful. 

Any help really appreciated, thank you. 

5 hours ago, Icclebug said:

Hi @tuanphan 

I've looked at the links you sent and the 'The Team Behind Turquoise' seems perfect for what I need. I've managed to insert them into the page, as per the instructions, but you'll seem from the screenshot that they are all under each other with no space in between.

Ideally, I'd like them side by side, with a slight space between and also each one to be smaller and thinner (as there will be up to 12 of these on the page). Also, I know it sounds odd, but how to I insert my own images into the markdown? 

It would also be useful to use Image Boxes 01 or 03 from the first link, especially on a page where I have quite a few headshots and much more text relating to that person. I've tried doing these and can't seem to get them working properly. Again, ideally I'd like relatively small images but when you hover or even click on the image a pop up with space for quite a bit of text would be useful. 

Any help really appreciated, thank you. 

Can you share link to page where you inserted the code?

Of course: https://oarfish-salmon-gpgd.squarespace.com/test-page

7 minutes ago, Icclebug said:

Of course: https://oarfish-salmon-gpgd.squarespace.com/test-page

 

What is access password?

hi, 

password: criminaljustice

6 minutes ago, Icclebug said:

hi, 

password: criminaljustice

I see spacing here?

To make 3 blocks/row, see here: https://support.squarespace.com/hc/en-us/articles/206543987-Moving-blocks

to change image see here. https://support.squarespace.com/hc/en-us/articles/206543587-Markdown-cheat-sheet#toc-images

Brilliant thank you. 

Any thoughts on this: 

Quote

It would also be useful to use Image Boxes 01 or 03 from the first link, especially on a page where I have quite a few headshots and much more text relating to that person. I've tried doing these and can't seem to get them working properly. Again, ideally I'd like relatively small images but when you hover or even click on the image a pop up with space for quite a bit of text would be useful. 

I think the test page is now looking much better, just need to change content. Is there anything I've missed?: https://oarfish-salmon-gpgd.squarespace.com/test-page

When I view this landscape on the mobile it moves the images out the boxes to the right (screenshot attached). 

4 minutes ago, Icclebug said:

I think the test page is now looking much better, just need to change content. Is there anything I've missed?: https://oarfish-salmon-gpgd.squarespace.com/test-page

When I view this landscape on the mobile it moves the images out the boxes to the right (screenshot attached). 

 

In Code BLock, find this code

.markdown-block img {
    background: #dedede;
    padding: 6px;
    border-radius: 50%;
    max-width: 150px;
}

edit max-width: 150px

you can use 50%

.markdown-block img {
    background: #dedede;
    padding: 6px;
    border-radius: 50%;
    max-width: 50%;
}

Just perfect!! Huge thanks @tuanphan

One quick final question for now, on this page https://oarfish-salmon-gpgd.squarespace.com/probation-quarterly the banner in blue looks fine on desktop but not so much on mobile. I've seen different CSS on the forum but can't get any working to make it reduce down on mobile. 

27 minutes ago, Icclebug said:

Just perfect!! Huge thanks @tuanphan

One quick final question for now, on this page https://oarfish-salmon-gpgd.squarespace.com/probation-quarterly the banner in blue looks fine on desktop but not so much on mobile. I've seen different CSS on the forum but can't get any working to make it reduce down on mobile. 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#new-page-2 figure img {
    left: 0 !important;
}
}

Perfect, I'm so grateful thank you. 

I've inserted another one of your suggestions here: https://oarfish-salmon-gpgd.squarespace.com/board-directors

I think the Fellows page looks better, https://oarfish-salmon-gpgd.squarespace.com/fellows but I don't really want to use the exact same design on both.

Thank you for all your help 😀

39 minutes ago, Icclebug said:

Perfect, I'm so grateful thank you. 

I've inserted another one of your suggestions here: https://oarfish-salmon-gpgd.squarespace.com/board-directors

I think the Fellows page looks better, https://oarfish-salmon-gpgd.squarespace.com/fellows but I don't really want to use the exact same design on both.

Thank you for all your help 😀

 

(y)

I still create templates weekly. If you know a good design, you can suggest it here.

If I can create it, I will share it on the blog.

here logos template I created this morning with Markdown Block.

(change logo on hover)

Excellent I’ll take a look. 

The page I’ve done here https://oarfish-salmon-gpgd.squarespace.com/board-directors looks good on desktop and mobile, until you turn it landscape on the mobile  Any idea why please? 

Instead of clicking on the ‘read more’ section on the image and going to a different page, is there a way if adding a pop up box that shows further information?
 

31 minutes ago, Icclebug said:

Excellent I’ll take a look. 

The page I’ve done here https://oarfish-salmon-gpgd.squarespace.com/board-directors looks good on desktop and mobile, until you turn it landscape on the mobile  Any idea why please? 

Instead of clicking on the ‘read more’ section on the image and going to a different page, is there a way if adding a pop up box that shows further information?
 

Yes. You can create popup with this plugin,

Reference guide: https://beaverhero.com/squarespace-bio-page/

I think read more size is too big.

Edit code block, add this before close </style> tag

@media screen and (max-width:767px) and (orientation:landscape) {
    /* reduce padding blue box */
    .image-block figcaption.image-card-wrapper {
        margin: 5px !important;
    }
    .sqs-block-image .design-layout-poster .image-card {
    width: 100%;
    }
    .image-button a {
        font-size: 7px !important;
        padding: 2px !Important;
    }
}

That's great, I'll look at the plugin. 

I've inserted the code and no difference I'm afraid. 

9 minutes ago, Icclebug said:

That's great, I'll look at the plugin. 

I've inserted the code and no difference I'm afraid. 

Try adding to Home > Design > Custom CSS

@media screen and (max-width:767px) and (orientation:landscape) {
    /* reduce padding blue box */
    .image-block figcaption.image-card-wrapper {
        margin: 5px !important;
    }
    .sqs-block-image .design-layout-poster .image-card {
    width: 100%;
    }
    .image-button a {
        font-size: 7px !important;
        padding: 2px !Important;
    }
}

Thank you, still no change. 

20 minutes ago, Icclebug said:

Thank you, still no change. 

see fine here, chrome dev tool - mobile mode

& iPhone 6. Can you take a screenshot on your phone?

Hi, screenshot from iPhone attached, landscape and portrait. 

Hi @tuanphan any thoughts please? 

On 5/23/2020 at 3:42 PM, tuanphan said:

Yes. You can create popup with this plugin,

Reference guide: https://beaverhero.com/squarespace-bio-page/

I think read more size is too big.

Edit code block, add this before close </style> tag

@media screen and (max-width:767px) and (orientation:landscape) {
    /* reduce padding blue box */
    .image-block figcaption.image-card-wrapper {
        margin: 5px !important;
    }
    .sqs-block-image .design-layout-poster .image-card {
    width: 100%;
    }
    .image-button a {
        font-size: 7px !important;
        padding: 2px !Important;
    }
}

 

tru again with

@media screen and (max-width:991px) and (orientation:landscape) {
    /* reduce padding blue box */
    .image-block figcaption.image-card-wrapper {
        margin: 5px !important;
    }
    .sqs-block-image .design-layout-poster .image-card {
    width: 100%;
    }
    .image-button a {
        font-size: 7px !important;
        padding: 2px !Important;
    }
}