1

I am currently "translating" our current website, which runs on the lastest expressionengine, to craft. we use imagegrids that are arranged by css.

so in an entrie's pulldown field choose between several grids (named q1, q1q2, etc.) and checked via conditionals in the code to know how to style the images and to give them the right "transformations"/sizes:

{# Imagegrid #}
    <figure class="grid {imagearrange}">
        {images_start}
            {images_start:file}
                {# A (1 landscape) #}
                {if imagearrange == "q1"}
                    {if images_start:count == 1}
                        <figure class="q1">
                            <img src="{url:1-1-landscape}">
                        </figure>
                    {/if}
                {# B (2 landscape) #}
                {if:elseif imagearrange == "q1q2"}
                    {if images_start:count == 1}
                        <figure class="q1">
                            <img src="{url:1-2-landscape}">
                        </figure>   
                    {if:elseif images_start:count == 2}
                        <figure class="q2">
                            <img src="{url:1-2-landscape}">
                        </figure>
                    {/if}
                {# C (1 landscape / 1 portrait) #}
                    {if:elseif imagearrange == "q1h2"}
                        {if images_start:count == 1}
                            <figure class="q1">
                                <img src="{url:2-3-landscape}">
                            </figure>
                        {if:elseif images_start:count == 2}
                            <figure class="h2">
                                <img src="{url:1-3-portrait}">
                            </figure>
                        {/if}
                {# C1 (1 portrait / 1 landscape) #}
                    {if:elseif imagearrange == "h1q2"}
                        {if images_start:count == 1}
                            <figure class="h1">
                                <img src="{url:1-3-portrait}">
                            </figure>
                        {if:elseif images_start:count == 2}
                            <figure class="q2">
                                <img src="{url:2-3-quer}">
                            </figure>
                        {/if}
                {# D (3 portraite) #}

now I want to bring this functionality to craft – and I already checked out how to check for the fields values e.g. {if:elseif imagearrange == "h1q2"}.

but: I can't figure out how to check for the 1st, the 2nd, the 3rd image in an asset field, like {if images_start:count == 1} in ee.

since craft seems in many ways more efficent than ee maybe this would be solved completely different and I am absolutely open to learn new ways of doing this.

thank you very much!

1

Since in Craft you will loop over an Assets field, you could use the loop.index variable: https://twig.symfony.com/doc/2.x/tags/for.html to check for the nth iteration.

| improve this answer | |
  • but how could I use the loop.index compared to {if images_start:count == 1}X{if:elseif images_start:count == 2}Y{/if}? or do I need a different direction for whole code construct? – Matthias Feb 24 at 19:01
  • The divisible by test comes handy: {% if loop.index is divisible by(3) %} This is the 3rd item {% endif %} – gioppe Feb 25 at 7:44

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.