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

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

Question

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!

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

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

Edited by brandon

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

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