how can I build a front-end HTML dropdown selector with the "tag" function in CraftCMS 4.x? I'd like the user to be able to sort a couple of masonry images that are associated with an entry that has a main image, and an array of additional (masonry) images. I'd like the user to be able to decide what sorting order they want the masonry images to be presented in. So far this is what I have:

<form method="get">
                    {% tag 'select' with {
                        class: 'sorting-options',
                        name: 'sort',
                        id: 'sortingOptions',
                        onchange: 'this.form.submit()'
                    } %}
                        {% tag 'option' with {
                            class: 'optie',
                            name: 'A-Z',
                            value: 'title ASC'
                        } -%}
                            {{ 'A-Z (oplopend)' | t }}
                        {%- endtag %}
                        {% tag 'option' with {
                            class: 'optie',
                            name: 'Z-A',
                            value: 'title DESC'
                        } -%}
                            {{ 'Z-A (aflopend)' | t }}
                        {%- endtag %}
                    {% endtag %}

And then as sorting function:

 {# Fetch all masonry images, except first one, and sort them: #}
            {% set masonryImages = entry.galleryImg
                .all() %}

I've tried to work with getQueryParam to retrieve the dropdown value via the URL params but dont know how to connect the dots. Any suggestions? Tnx!

  • What exactly doesn't work the way you want to?
    – obs
    Commented Feb 19 at 17:49
  • Hi, well, to get the user input from the dropdown to work so it sorts the image order the way the user has chosen. So how do I get the parameter "sortOption" to get the right value from the dropdown selects that I build up with the {% tag %} function. These values are stated there as "title ASC" etc, but how do I get those values inside my "orderBy(sortOption)"-code? Commented Feb 22 at 17:14
  • To get the URL parameter, use craft.app.request.getParam('sort'). In your query .orderBy( craft.app.request.getParam('sort') ) should work
    – obs
    Commented Feb 23 at 9:18
  • Thanks, worked! Commented Feb 29 at 8:55


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.