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
  • Replies 3
  • Views 516
  • Created
  • Last Reply
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.