Customizing Author Photo in 7.1?

Hello, I would like to enlarge the size of the author photo on my 7.1 site and move it to the left of the bio, instead of above it. I'd also love the option to have it be square instead of circle. I've tried a few things but haven't cracked it. Has anyone done this successfully?

Here's the site if it's helpful (still in development):

https://triceratops-maroon-kxrm.squarespace.com/
pw: nailed

Thank you!

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.blog-item-wrapper .author-avatar {
    border-radius: unset;
    width: 100%;
    height: auto;
}
.blog-item-wrapper .author-avatar img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.blog-item-wrapper .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
}
.blog-item-author-profile-wrapper>a {
    margin-right: 20px;
    width: 30%;
}
}

Hello! I'm trying to make my author profile images larger. The placement and circle shape are fine. But can you help me with the code to enlarge it?

I'm currently using this code below to make the Author name/bio more centered on the page. It also seems to have taken away the author profile image all together. But, I'm assuming once I can inject the code for it, it'll come back. 

.blog-item-author-profile-wrapper * {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 200px !important;
    margin-right: 200px !important;
}
span.author-name {
    font-weight: bold !important;
}

On 3/23/2021 at 3:42 PM, catemiz said:

Hello! I'm trying to make my author profile images larger. The placement and circle shape are fine. But can you help me with the code to enlarge it?

I'm currently using this code below to make the Author name/bio more centered on the page. It also seems to have taken away the author profile image all together. But, I'm assuming once I can inject the code for it, it'll come back. 

.blog-item-author-profile-wrapper * {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 200px !important;
    margin-right: 200px !important;
}
span.author-name {
    font-weight: bold !important;
}

Hi. Do you still need help? Can you share link to a blog post?

On 3/25/2021 at 3:42 AM, tuanphan said:

Hi. Do you still need help? Can you share link to a blog post?

Yes I do!! Sorry I missed this. The website isn't live yet unfortunately. But, here's a screen shot. The photo doesn't show up as you can see, but I did get the text to align. Thanks for your help in advance!

On 4/2/2021 at 8:08 PM, catemiz said:

Yes I do!! Sorry I missed this. The website isn't live yet unfortunately. But, here's a screen shot. The photo doesn't show up as you can see, but I did get the text to align. Thanks for your help in advance!

If your site is trial.private, you can setup password & share url

On 8/20/2020 at 2:53 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.blog-item-wrapper .author-avatar {
    border-radius: unset;
    width: 100%;
    height: auto;
}
.blog-item-wrapper .author-avatar img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.blog-item-wrapper .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
}
.blog-item-author-profile-wrapper>a {
    margin-right: 20px;
    width: 30%;
}
}

 

Hi, I'm using this code to do the trick requested by the OP. 

The only problem is that the Author Name is moved along with the photo to the left-hand side of the Author Bio. I would like to have only the photo on the left, name and Bio on the right scaled same size as the photo. 

In this example I have edited the Bio to include the Author name. That's why it shows double. Gives an idea of the end result. This solution works if a CSS code to remove the Author Name exists. 

The blog is not yet live so I've added a screenshot below. 

Also, is it possible to reduce the white space between the photo and the Name/Bio? It has grown because I have manually scaled back the photo size from 100% --> 75% in width in the code above to make it appear the same size as the Name + Bio combination. Not sure if there is a smarter way to do this? 

On 2/1/2022 at 7:08 PM, Korpua said:

Hi, I'm using this code to do the trick requested by the OP. 

The only problem is that the Author Name is moved along with the photo to the left-hand side of the Author Bio. I would like to have only the photo on the left, name and Bio on the right scaled same size as the photo. 

In this example I have edited the Bio to include the Author name. That's why it shows double. Gives an idea of the end result. This solution works if a CSS code to remove the Author Name exists. 

The blog is not yet live so I've added a screenshot below. 

Also, is it possible to reduce the white space between the photo and the Name/Bio? It has grown because I have manually scaled back the photo size from 100% --> 75% in width in the code above to make it appear the same size as the Name + Bio combination. Not sure if there is a smarter way to do this? 

 

Possible to remove author name. If you share link to a post, we can give code easier

Hello I am using the code above, but not getting the results in space, I need the pic rounded at left with the title author and bio aligned to the righ, I attach an image how my author name looks like, and I will need it as @Korpua post it.

Can you help me @tuanphan¿?

Also, it is possible when you click in the author, go to the author page but have there too her/his bio?

Thanks

https://rudarevista.squarespace.com

pass: ruda2022

On 10/15/2022 at 6:04 AM, mazmac said:

Hello I am using the code above, but not getting the results in space, I need the pic rounded at left with the title author and bio aligned to the righ, I attach an image how my author name looks like, and I will need it as @Korpua post it.

Can you help me @tuanphan¿?

Also, it is possible when you click in the author, go to the author page but have there too her/his bio?

Thanks

 

https://rudarevista.squarespace.com

pass: ruda2022

 

Can you share link to a blog post? We can check easier

On 10/17/2022 at 3:37 AM, tuanphan said:

Can you share link to a blog post? We can check easier

Hello yes,

Are those

https://rudagt.squarespace.com/temas/ja38572zm01tr649ah5x3hpv700i4d

https://rudagt.squarespace.com/temas/mxima-y-pedrina-sanando-las-heridas-del-conflicto-armado

At the bottom the author profile, would like to have the pic left with the author name and bio at the right.

As @Korpua layout.

Thanks.

On 10/20/2022 at 7:36 AM, mazmac said:

Hello yes,

Are those

https://rudagt.squarespace.com/temas/ja38572zm01tr649ah5x3hpv700i4d

https://rudagt.squarespace.com/temas/mxima-y-pedrina-sanando-las-heridas-del-conflicto-armado

At the bottom the author profile, would like to have the pic left with the author name and bio at the right.

As @Korpua layout.

Thanks.

 

Do you use Personal or Business Plan? If Business, we will need to use some script code to move name position

Hello @tuanphan

Thanks, yes it is business plan. We can add any cumstom code

On 10/23/2022 at 8:57 AM, mazmac said:

Hello @tuanphan

Thanks, yes it is business plan. We can add any cumstom code

Add to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('span.author-name').insertBefore('.author-bio>p');
	});
</script>
<style>
  .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
.author-bio {
    margin-left: 20px !important;
}
.blog-item-wrapper .author-bio p:last-child {
    margin-top: 0px;
}
span.author-name {
    margin-top: 0 !important;
  }</style>

Thanks, it worked!

Hi, 

I've picked up the advice above to adjust our author profiles, however we're not quite there: https://www.littlewine.io/winemaker-magazine/champagne-timothee-stroebel

We would like the author image to be larger - like double the current size. And the author name to show on top of the text - like a headline - next to the round image (and not below the image as currently is).

Thanks for your help!

On 1/16/2024 at 11:05 PM, dadanini said:

Hi, 

I've picked up the advice above to adjust our author profiles, however we're not quite there: https://www.littlewine.io/winemaker-magazine/champagne-timothee-stroebel

We would like the author image to be larger - like double the current size. And the author name to show on top of the text - like a headline - next to the round image (and not below the image as currently is).

Thanks for your help!

Add this code to Website Tools (under Not Linked) > Custom CSS

/* Author box image */
.blog-item-wrapper .author-avatar {
    width: 150px !important;
    height: 150px !important;
}

img.author-avatar-image {
    width: 100% !important;
    height: auto !important;
}