Select fields based on checkbox value

[derelektrischemoench]

HI guys, 

I'm currently building a site which displays a selection of processwire pages in one frontend page. My Page tree looks something like this:

flavors:

• a
• b
• c
• ...

flavors is the page that gets rendered a, b, c... are child pages of this page. All of these pages contain an image field although some images are high res the other are low res. I added a checkbox field to select whether the image is high / lowres and i want to render them conditionally based on this checkbox value. I have troubles separating these pages though as I seem to be unable to query whether the high res checkbox is set. I'm using the twig template engine to render the frontend. My page selection looks something like this:

 

$available_flavors = $pages->get(1017)->children();
$available_flavors_high_res = $pages->get(1017)->children('is_high_res_image=1');

In my frontend I render the values like that:

 

<div class="row">
  {% for flavor in available_flavors_high_res %}
  <div class="col-sm d-flex flex-column">
    <div class="shishaFlavor align-self-center"
         style="background-image: url('{{ flavor.shisha_flavor_image.url }}')">
    </div>
    <h3>{{ flavor.title }}</h3>
  </div>
  {% endfor %}
</div>

<div class="row">
  {% for flavor in available_flavors_low_res %}
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 d-flex flex-column">
    <div class="shishaFlavor align-self-center smallImage"
         style="background-image: url('{{ flavor.shisha_flavor_image.url }}')">
    </div>
    <h5>{{ flavor.title }}</h5>
  </div>
  {% endfor %}
</div>

The check whether the the high_res value is set, however gets ignored. I assume this has to do something with the way I select the child pages in the PHP snipptet above.

Could someone point me in the right direction on how to correctly separate the images with the high-res- flag from the ones without? I guess this would boil down to correctly selecting the boolean.

Thanks in advance, derelektrischemoench

[maxf5]

You can make it this way, so you don't need two loops and the high res will be first in the array.
 

$available_flavors = $pages->get(1017)->children("sort=-is_high_res_image");

<div class="row">
  {% for flavor in available_flavors %}
  <div class="col-sm d-flex flex-column">
    <div class="shishaFlavor align-self-center"
         style="background-image: url('{{ flavor.shisha_flavor_image.url }}')">
    </div>
    <h3>{{ flavor.title }}</h3>
  </div>
  {% endfor %}
</div>

 

[derelektrischemoench]

Thanks, that did the trick!

Greetings,

derelektrischemoench