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