Jump to content

Tudor Design: Change date circles to author picture?

Recommended Posts

Site URL: https://www.levelstory.net

Hi there! I am looking to start using the Tudor template on my website for a magazine I create. The template is not live right now but I will paste the demo so you can see what I am talking about.

https://tudor-demo.squarespace.com/?nochrome=true

In the Tudor template, blog entries show up with a callout circle at the bottom center and the date appears within the circle. I really love the design but what I would love more is to replace that date with the image of the author who wrote the post. Does anyone know any code that code/css that could accomplish this? It would be much more helpful since my website features articles from the magazine and they all get posted at the same time, making the date somewhat useless...at least on display for people surfing the site. Thanks for you help!

I saw a question somewhat similar to this posted on here so this might help with things as well...

 

Link to comment
9 hours ago, thisisdanielle said:

In the Tudor template, blog entries show up with a callout circle at the bottom center and the date appears within the circle. I really love the design but what I would love more is to replace that date with the image of the author who wrote the post.

This isn't something that you can achieve with some CSS or with a feature of the Skye-family template (Tudor is part of the Skye-family) or with some CSS.

However, it could be achieved with some custom-written JavaScript. The Blog Option tweak "Promoted Meta" would need to be set to "Author" (within Site Styles) so that the script could determine the author of each post. It would then read the author details of each post and display the correct image. 

  If this helps you, please click "Like" below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 9/5/2020 at 7:22 AM, paul2009 said:

This isn't something that you can achieve with some CSS or with a feature of the Skye-family template (Tudor is part of the Skye-family) or with some CSS.

However, it could be achieved with some custom-written JavaScript. The Blog Option tweak "Promoted Meta" would need to be set to "Author" (within Site Styles) so that the script could determine the author of each post. It would then read the author details of each post and display the correct image. 

  If this helps you, please click "Like" below  ⬇️

Thank you! I will give this a try and let you know how it works. 🙂

Link to comment
On 9/5/2020 at 7:22 AM, paul2009 said:

This isn't something that you can achieve with some CSS or with a feature of the Skye-family template (Tudor is part of the Skye-family) or with some CSS.

However, it could be achieved with some custom-written JavaScript. The Blog Option tweak "Promoted Meta" would need to be set to "Author" (within Site Styles) so that the script could determine the author of each post. It would then read the author details of each post and display the correct image. 

  If this helps you, please click "Like" below  ⬇️

Would you mind writing out the custom-written JavaScript? I am trying to figure it out myself but no such luck. Thank you!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.