1

I'm trying to rearrange the matrix block order using a frontend form.

  • If I use JavaScript to change the order of inputs in the DOM will this change the order in the backend after form submission?
  • How do you include the correct value for image fields, is this using the image id?

I have a reduced test case of what I came up with below, anyone see where I'm going wrong?

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
   {{ getCsrfInput() }}
   <input type="hidden" name="action" value="entries/saveEntry">
   <input type="hidden" name="redirect" value="viewentry/{slug}">
   <input type="hidden" name="entryId" value="{{ entry.id }}">
   <input type="hidden" name="fields[galleryBlock]" />

   {% for block in entry.galleryBlock %}

       {% switch slide.type %}

       {% case 'landscape' %}
            {# block 1 #}
            {% set image = block.image[0] ?? null %}
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape]" value="{{ image.id }}">
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][enabled]" value="1">

        {% case 'portrait' %}
            {# block 2 #}
            {% set image = block.image[0] ?? null %}
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][portrait]" value="{{ image.id }}">
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][enabled]" value="1">

    {% endswitch %}

{% endfor %}

2

Your sort order will change according to your HTML, so when you change your html, the sort order will change. You can use certain Javascript libraries to move your containers in your DOM, when you save the entry, your related entries will change.

As for every relation field in Craft, you only have to insert an array of ids to relate the elements.

<input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape]" value="{{ image.id }}">

Is wrong because you insert the id of an image, not an array

<input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape][]" value="{{ image.id }}">

is the correct way

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.