I am making a website using Django and Wagtail CMS, and have a way of filtering posts by a custom attribute called "data-group" in the html template. It works when I hard-code everything, but I would like to use some logic to have that attribute filled dynamically for each post. Basically, I want the post tags to be populated there, but I am having a problem doing this.

I will highlight relevant lines of the code with

--------------------------

An example of hard-coded filter buttons:

 <ul class="portfolio-filters">
                            <li class="active">
                                <a class="filter btn btn-sm btn-link" data-group="category_all">All</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data group="category_detailed">Detailed</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_direct-url">Direct URL</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_image">Image</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_soundcloud">SoundCloud</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_video">Video</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_vimeo-video">Vimeo Video</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_youtube-video">YouTube Video</a>
                            </li>
                        </ul>

When any of the above buttons are clicked, it filters posts/items with similar values in the data-group attribute.

An example of the items it is filtering are below in the figure data-groups list:

 --------------------------<figure class="item standard" data-groups='["category_all", "category_detailed"]'> --------------------------
                      <div class="item">
                        <div class="blog-card">
                          <div class="media-block">
                            <div class="category">
                              <a href="#" title="View all posts in WordPress">WordPress</a>
                            </div>
                            <a href="blog-post-1.html">
                              <img src="./img/blog/blog_post_1.jpg" alt="How to Make a WordPress Plugin Extensible" title="" />
                              <div class="mask"></div>
                            </a>
                          </div>
                          <div class="post-info">
                            <div class="post-date">04 Dec 2019</div>
                            <a href="blog-post-1.html">
                              <h4 class="blog-item-title">How to Make a WordPress Plugin Extensible</h4>
                            </a>
                          </div>
                        </div>
                      </div>
                  </figure>

More examples that match the above buttons:

<figure class="item lbvideo" data-groups='["category_all", "category_video", "category_youtube-video"]'>
<figure class="item lbimage" data-groups='["category_all", "category_image"]'>
<figure class="item lbaudio" data-groups='["category_all", "category_soundcloud"]'>
<figure class="item lbvideo" data-groups='["category_all", "category_video", "category_vimeo-video"]'>

etc...

The above works when everything is hard coded as above.

However, I want to create a single template through a for loop that will be populated with each added post/portfolio item, and so I have tried some logic that populates the filters, but I can't seem to grab the tags and insert them into the data-groups attribute in the figures.

The below works to populate the buttons (although I haven't found a way to display just the unique items here):

{% for post in all_posts %}
                        {% for tag in post.tags.all %}
                        <li>
                            <a class="filter btn btn-sm btn-link" data-group="{{tag}}">{{tag}}</a>
                        </li>
                        {% endfor %}
{% endfor %}

This is my code for populating the post tags in the attributes, which doesn't seem to be working:

{% for post in all_posts %}
                                <!-- Blog Post 1 -->
       --------------------------<figure class="item standard" data-group='["all", {% for tag in post.tags.all %}tag{% endfor %} ]'>-------------------------------
                                    <div class="item">
                                        <div class="blog-card">
                                            <div class="media-block">
                                                <div class="category">
                                                    <a href="#" title="View all posts in WordPress">WordPress</a>
                                                </div>
                                                <a href="blog-post-1.html">
                                                    {% image post.blog_image fill-350x200 as img %}
                                                    <img src="{{img.url}}" alt="{{img.alt}}" title="">
                                                </a>
                                            </div>
                                            <div class="post-info">
                                                <div class="post-date">{{post.published_date}}</div>
                                                <br>
                                                {% for tag in post.tags.all %}
                                                <div class="post-date">{{tag}},</div> <!-- This populates fine! -->
                                                {% endfor %}
                                                <a href="blog-post-1.html">
                                                    <h4 class="blog-item-title">{{post.custom_title}}</h4>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                                {% endfor %}

Does anybody know a way to populate that attribute with items from the model automatically, so as to avoid having to hard-code in HTML?

This code works fine to populate text, such as the below which displays fine:

{% for tag in post.tags.all %}
      <div class="post-date">{{tag}},</div>
{% endfor %}

Thanks.