topic Re: Add authors to a dropdown list in CMS Development

Add authors to a dropdown list

RAnderson91 — Thu, 26 Sep 2024 10:22:35 GMT

Hi,

I'm relatively new to HubSpot development. I'm creating a custom module that would allow users to add a curated list of authors to a page, working almost like a team members page.

I've found a piece of code that adds all the authors to a page (see below), however I want the user to be able to add authors via a repeater and customise the order they are in.

{% set my_authors = blog_authors("default", 250) %}

<ul>

{% for author in my_authors %}

<li><a href="{{ blog_author_url(group.id, author.slug) }}">{{ author }}</a></li>

{% endfor %}

</ul>

I also found this article (https://community.hubspot.com/t5/CMS-Development/Multiple-authors-for-blog/m-p/701150#M30700) that allows users to add a second author to a blog post, but I couldn't figure out how to adapt it to work in a custom module.

I realize we could use something like HubDB to create this, but the idea would be that you could click a link and it would take you to the authors page and see all the posts they have created.

Any help is greatly appreciated.

Re: Add authors to a dropdown list

sshah218 — Thu, 26 Sep 2024 12:36:29 GMT

Welcome to HubSpot development! It sounds like you have a great idea for a custom module to curate a list of authors. To achieve this, you can use HubSpot's custom modules with repeaters to allow users to add and order authors as needed. Here’s a step-by-step guide to help you implement this:

Create a Custom Module:
- Go to the Design Manager and create a new custom module.
- Add a repeater field to the module. This will allow users to add multiple authors and customize their order.
- Add Fields to the Repeater:
  - Within the repeater, add fields for the author’s name and any other relevant information. You can use a HubL variable to store the author’s data.
  - Fetch and Display Authors:
    - Use HubL and the repeater to fetch and display the authors on your page. Here’s a sample code snippet to get you started:
      html
      Copy code
      {% set authors = module.authors %} <ul> {% for author in authors %} <li> <a href="{{ author.author_url }}">{{ author.author_name }}</a> </li> {% endfor %} </ul>
      
      In the Design Manager, your repeater field would look something like this:
      
      json
      Copy code
      { "label": "Authors", "name": "authors", "type": "module_field_group", "children": [ { "label": "Author Name", "name": "author_name", "type": "text" }, { "label": "Author URL", "name": "author_url", "type": "url" } ], "repeatable": true }
      
      Link to the Author’s Page:
      Ensure each author’s URL points to their dedicated author page, where you can list all their posts.
      For example, on my site NFT I used a similar approach to manage and display a curated list of authors. Each author has a dedicated page, and users can easily navigate to see all posts created by a specific author.
      By setting up your custom module this way, users will be able to add, order, and link to authors dynamically. If you need more advanced features, you might also consider using HubDB, but for many cases, a repeater field in a custom module should suffice.

Re: Add authors to a dropdown list

Teun — Thu, 26 Sep 2024 14:46:35 GMT

Hi @RAnderson91 ,

One way you can achieve this, is creating a repeater field in your module where you allow the user to store the slug of the authors they want to display.
In your code, you can then filter out all the authors you want to display based on the values you have stored in the repeater field:

{% set my_authors = blog_authors(group.id, 250) %} <ul> {% for author_to_display in module.authors_to_display %} {% set author = my_authors|selectattr('slug', 'eq', author_to_display.slug) %} {% if author %} <li><a href="{{blog_author_url(group.id, author.slug)}}">{{author}}</a></li> {% endif %} {% endfor %} </ul>

The code above assumes that you create a repeater field inside your module call 'authors_to_display' with a single-line text field called 'slug'.

Re: Add authors to a dropdown list

RAnderson91 — Thu, 26 Sep 2024 15:13:59 GMT

Hi @Teun

Thanks for the response, here are some screenshots of how I have set it up, is this correct?

Re: Add authors to a dropdown list

Teun — Thu, 26 Sep 2024 15:57:20 GMT

Hi @RAnderson91 ,

Yes, this is exactly what I meant!

Re: Add authors to a dropdown list

RAnderson91 — Fri, 27 Sep 2024 08:24:38 GMT

Hi @Teun,

Thanks for confirming, am I correct in assuming that this could be adapted to include grabbing things like the author image, bio, etc?

Re: Add authors to a dropdown list

Teun — Fri, 27 Sep 2024 08:28:07 GMT

Hi @RAnderson91,

That should already be available in the author variable:

{% set my_authors = blog_authors(group.id, 250) %} <ul> {% for author_to_display in module.authors_to_display %} {% set author = my_authors|selectattr('slug', 'eq', author_to_display.slug) %} {% if author %} {% set image = author.avatar %} {% set name = author.display_name %} <li><a href="{{blog_author_url(group.id, author.slug)}}">{{author}}</a></li> {% endif %} {% endfor %} </ul>

Re: Add authors to a dropdown list

RAnderson91 — Fri, 27 Sep 2024 13:42:02 GMT

Hi @Teun

Thanks for the updated code, though I've noticed that the name is outputting the name of the widget and not the author, along with not being able to output the avatar. I also noticed that the author url is merely the link to the current page.

{% set my_authors = blog_authors(group.id, 250) %}

<ul>
{% for author_to_display in module.authors_to_display %}
{% set author = my_authors|selectattr('slug', 'eq', author_to_display.slug) %}
{% if author %}
{% set image = author.avatar %}
{% set name = author.display_name %}
<li>
<a href="{{blog_author_url(group.id, author.slug)}}">{{author}}</a>
<img src="{{ image }}" />
<p>{{ name }}</p>
</li>
{% endif %}
{% endfor %}
</ul>

You can see the result here https://45411996.hs-sites.com/team

Re: Add authors to a dropdown list

Teun — Fri, 27 Sep 2024 17:50:07 GMT

Hi @RAnderson91 ,

Are you displaying this on a website page? If so, the code needs to be a bit different. Can you try the following?

{% set my_authors = blog_authors('default', 250) %} <ul> {% for author_to_display in module.authors_to_display %} {% set author = my_authors|selectattr('slug', 'eq', author_to_display.slug) %} {% if author %} {% set image = author.avatar %} {% set author_name = author.display_name %} <li><a href="{{blog_author_url('default', author.slug)}}">{{author_name}}</a></li> {% endif %} {% endfor %} </ul>