Switch statement for redactor components

Question

Is there a way to use a switch statement on redactors output i.e. to say -

If this output is a video > use this code

if this output is a Image > use this code

Why? Well i'm trying to apply imager (to reduce image sizes) to the images that are being added into redactor.

Little more detail:

So currently I run a loop of all the redactor inputs

{% for i in block.questionBlock.all() %}
                    <article>
                      <div class="text">
                        {{ i.answer }}
                      </div>

                      <div class="media">
                        {{ i.media }}
                      </div>
                    </article>
                    {% endfor %}

In the block {{ i.media }} I need to get into this block to check its contents and see if it is an image and if it is to apply imager to it. I figured that a switch statement would work best, but I am unsure how to check what the content of {{ i.media }}.

I know that the picture will have a img html tag and the video with have a iframe tag - so is there a way to say.

if i.media contains img

Any ideas?

Thanks - W

Answer 1

You can use the in operator to check if the HTML from your Redactor field contains a particular tag:

{% set hasImgTag = '<img' in i.media %}

However, this will break if your redactor input contains anything unexpected. You're having trouble here because you're trying to process unstructured content in a structured way. Redactor is terrible for structured content, optimized images, semantic HTML etc.

Instead, I would use different fields to allow editors to add images or videos to a block. I assume questionBlock is a matrix field? In this case, you can use two different block types for images and videos with an upload field. Then you can switch in your template based on the block type and generate the correct markup for those assets respectively.

Another option would be a single upload field that allows both video and image files. Then you can switch based on the file type / extension and display the according markup. Both options are much better for usability (for your editors) and more future-proof.