<p>how can I build a front-end HTML dropdown selector with the &quot;tag&quot; 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:</p>
<pre><code>&lt;form method=&quot;get&quot;&gt;
                    {% 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 %}
                &lt;/form&gt;
</code></pre>
<p>And then as sorting function:</p>
<pre><code> {# Fetch all masonry images, except first one, and sort them: #}
            {% set masonryImages = entry.galleryImg
                .offset(1)
                .orderBy(sortOption)
                .all() %}
</code></pre>
<p>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!</p>

CC BY-SA 4.0
2024-02-19T17:49:21.210Z
What exactly doesn't work the way you want to?
obs
CC BY-SA 4.0
2024-02-22T17:14:52.860Z
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?
MvVijfeijken
CC BY-SA 4.0
2024-02-23T09:18:13.547Z
To get the URL parameter, use `craft.app.request.getParam('sort')`. 
In your query `.orderBy( craft.app.request.getParam('sort') )` should work
obs
CC BY-SA 4.0
2024-02-29T08:55:32.353Z
Thanks, worked!
MvVijfeijken
<frontend><ordering><drop-down><sort><tag>
How to build front-end dropdown to sort images with {% tag %} function?
# How to build front-end dropdown to sort images with {% tag %} function?

(Asked by: username_0 on 2024-02-13)

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:

                    {% 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
                .offset(1)
                .orderBy(sortOption)
                .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!

**Tags:** frontend, ordering, drop-down, sort, tag

> **Comments:**
> **username_1**: What exactly doesn't work the way you want to?  
> **username_0**: 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?  
> **username_1**: To get the URL parameter, use `craft.app.request.getParam('sort')`.  In your query `.orderBy( craft.app.request.getParam('sort') )` should work  
> **username_0**: Thanks, worked!  

---

## 0 answers

