How can I display multiple authors on a blog post header without including a comma after the last author using Webflow?

Published on
September 22, 2023

To display multiple authors on a blog post header without including a comma after the last author using Webflow, you can follow these steps:

  1. Create a Collection:
  • Start by creating a Collection in Webflow, specifically for the authors of your blog posts. Each author should have their own Collection item within this Collection.
  1. Add a Reference Field:
  • Within the author's Collection item, add a Reference field called "Blog Posts" or something similar. This field will allow you to associate each author with the relevant blog posts.
  1. Create a Collection List:
  • On the blog post template page, add a Collection List element where you want to display the authors' names.
  1. Connect the Collection List to the Authors Collection:
  • In the Collection List settings, connect it to the authors' Collection you created earlier.
  1. Add a Text Block inside the Collection List:
  • Inside the Collection List, add a Text Block element to display the names of the authors.
  1. Bind the Text Block to the Author's Name:
  • Select the Text Block element, go to its settings, and bind it to the "Author's Name" field from the authors' Collection.
  1. Customize the Text Block:
  • Configure the Text Block element's styling to match your desired look on the header.
  • You can also use the Text Block's HTML embed feature to add custom CSS if needed.
  1. Display Multiple Authors:
  • To display multiple authors without a comma after the last author, you can use conditional visibility to hide the comma when rendering the last author.
  • In the Collection List, select the Text Block element containing the authors' names.
  • In the Element settings panel, click on the visibility icon and choose "Add new condition".
  • Set the condition to only show the comma if there are more authors in the list. For example, you can use the "Current Index" field and compare it to the total number of authors in the Collection List.

By following these steps, you'll be able to display multiple authors on a blog post header in Webflow, without including a comma after the last author.