Jump to content

Adding author name and bio to the end of a post - Bedford template

Recommended Posts

Hi! I was wondering if there ir any way I can alter the Bedford template so that it automatically displays author names and bios at the end of blog posts, similarly to how the Tudor template, for instance, does. And if there is, how complex is it? I am very new to coding. Thank you!

Link to comment
  • Replies 2
  • Created
  • Last Reply

Well, it's possible with JavaScript to query the collection item's JSON data, parse it and write your own HTML to the DOM at the bottom of the item. I'd expect that'd take a developer less than a few hours, depending on how experienced they were with that sort of thing and the complexity of the layout you wanted.

One alternative is to just move the author name down to the bottom and add some text before and after it, based on the author class. Make sure you have your style settings set to show the author at the top of the body of the post (not in the header), then add something like this:
 

.blog-item article {
  display: flex;
  flex-direction: column;
}

.blog-item article .entry-header {
  order: 1;
  margin-top: 1.5em;
}

.blog-item article .entry-author:before {
  content: "Written by ";
  display: inline;
}

.blog-item article.author-george-zhang .entry-author:after {
  content: "George Zhang is donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.";
  display: block;
  font-style: italic;
  font-size: 0.9em;
  margin-top: 0.2em;
  padding-left: 120px;
  background-image: url("/s/your-file-name.jpg");
  background-size: 100px;
  background-repeat: no-repeat;
}

In the above code, you'd use a "slugified" (lower-case-hyphenated) version of the author's name in place of "george-zhang". You can also find that class within the code by using your Browser's Dev. Tools/Inspector. In the Bedford Demo, that ends up looking like this:

image.png.be63a1f23b7d38a5f5262951c6ed99a0.png

You'd have to repeat some of that CSS for each author, so it could get a bit tedious. But, it is possible to do with just CSS. One thing to note: you can't have links in the description using this method.

You can add an author image. However, this requires uploading the image to your storage, taking note of the file page, and then setting it as the background image in the code above.

As I mentioned, doing a proper job using JavaScript is an option, but may require the assistance of a coder/developer.

-Brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

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.