1

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

1 Answer 1

2

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.

3
  • Thanks for the amazing answer! I just wanted to ask as well - is there a way to get the data from the i.meida i.e. lets say it is a IMG - is there a way to grab the i.media.url ?
    – Wally
    Jan 6 at 9:25
  • @Wally I don't think so – the Redactor output will be HTML, so you can't get the original asset easily. You could probably get the src URL using RegEx, but that wouldn't accomplish much, and you wouldn't be able to output responsive images this way. As I mentioned, use an asset field instead if you want to process the image/video files further or customize the output.
    – MoritzLost
    Jan 6 at 9:31
  • Awesome & thanks again for the helpful knowledge - I had a feeling that would be the case but always good to check
    – Wally
    Jan 6 at 9:34

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.