1

When video or images are embedded redactor wraps both the iframe and img tags in a . I've been using the following css to style the iframe to maintain the ratio responsively:

figure {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin: .5em 0 1em 0;
}
figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

But this screws up the embedded images as I don't want the ratio stuff to apply to images. Is there a simple way to be able differentiate the two?

I used to add a DIV class to a specific embed in CKEditor with a custom config file containing:

CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.dataProcessor.htmlFilter.addRules({
    elements: {
        $: function (element) {
            // Add embed_media class name to embedded media
            if (element.name === 'div' && element.children[0].name === 'iframe') {
                element.attributes.class = 'embed_media';
                return element;
            }
        }
    }
});

});

1

It's probably not the answer you want to hear, but the best way to avoid these kind of problems is to modernise your content model so that videos are stored in their own dedicated section, and then allow authors to create relationships to those video entries via a dedicated 'video' block type in a content matrix. Similar for images really (though it is arguably still important to allow for inline images in Redactor such as for images in the middle of sentences). If you want to prevent Redactor from wrapping images with a figure element you can specify imageFigure: false in your Redactor config json files.

If you can't update your content model easily, then as a last resort you might need to delve into the Retcon plugin to manipulate Redactor's output.

2
  • Thanks James, Retcon might be a solution, I need to have a play with it. I have used matrix for a content field before to allow users to insert images and video into the flow of the text. The feedback I got was that it was too complicated for less experienced users. They just didn't get the way that they could control the format and presentation of their content. They just wanted to copy/paste the whole thing from a Word document and then just insert the images and YouTube links afterwards. Maybe I allow image inserts in redactor but have a separate field for YouTube embeds.
    – Paul Frost
    Feb 18 at 14:09
  • I just tried the imageFigure: false in my config file, but it only works if you leave the caption box empty.
    – Paul Frost
    Feb 18 at 14:30

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.