Add authors to a dropdown list

[RAnderson91]

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.

{{ blog_authors("default", 250) }}

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

[Teun · Accepted solution]

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

[RAnderson91]

Hi @Teun 

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

[Teun]

Hi @RAnderson91 ,

Yes, this is exactly what I meant!

[RAnderson91]

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?

[Teun]

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>

[RAnderson91]

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

[Teun]

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>

[sshah218]

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:

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

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

              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.