Conditional based on file extension

Question

I have a piece of code whereby I adjust the output of a file depending on it's file extension:

{section_1_files}
  {section_1_files:file}
    {if {extension} == 'jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF'}
      <figure>
        <img src="{url}" alt="{section_1_files:label}" />
      </figure>
    {if:else}
      <div class="file">
        <a href="{url}">{section_1_files:label}</a>
      </div>
    {/if}
  {/section_1_files:file}
{/section_1_files}

However it doesn't seem to be working properly. If I add {extension} below the {section_1_files:file} line then jpg is displayed on the front end. The following code currently outputs this:

  <div class="file">
    <a href="http://domain.co.uk/uploads/test-image.jpg">Test image</a>
  </div>

  <div class="file">
    <a href="http://domain.co.uk/uploads/test-file.docx">Test file</a>
  </div>

Any help would be greatly appreciated.

Answer 1

Just use the Contains and the Concatenation operators to check if the file extension appears on the list:

{section_1_files}
  {section_1_files:file}
    {if "|jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF|" *= "|" . extension . "|" }
      <figure>
        <img src="{url}" alt="{section_1_files:label}" />
      </figure>
    {if:else}
      <div class="file">
        <a href="{url}">{section_1_files:label}</a>
      </div>
    {/if}
  {/section_1_files:file}
{/section_1_files}

I don't have time now to check if the contains operator is case sensitive. If you could test it, please update this answer.

Why not to check for the {mime_type} using the begins operator?

{section_1_files}
  {section_1_files:file}
    {if mime_type ^= "image/" }
      <figure>
        <img src="{url}" alt="{section_1_files:label}" />
      </figure>
    {if:else}
      <div class="file">
        <a href="{url}">{section_1_files:label}</a>
      </div>
    {/if}
  {/section_1_files:file}
{/section_1_files}

Answer 2

change {if {extension} == 'jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF'} to

{if section_1_files:extension== 'jpg' || section_1_files:extension=='JPG' ...