Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Icclebug

Style ideas for arranging headshots

Recommended Posts

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. 

Share this post


Link to post

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

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


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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. 

 

Screenshot 2020-05-22 at 17.09.27.png

Edited by Icclebug

Share this post


Link to post
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?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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. 

 

Share this post


Link to post
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%;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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;
}
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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)

Edited by tuanphan

You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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;
    }
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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;
    }
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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;
    }
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...