Responsive inline images?

Question

Recently implemented Omega/ST Alphorn and was hoping for a real responsive/adaptive result. Overall it works as expected, apart from the inline images in articles. (IMCE/WYSIWYG)

Done some searching, done some reading and found that inline images apparently are still a big challenge. It´s either js, cs, php or a combination of those.

Leaves me with two questions:

1. Is there a way to get a true responsive site without first learning php, css, js and then potentially mess up a perfectly working layout?

2. Is it really that hard to make inline images behave well in a responsive grid? I mean... images in websites are not exactly a new phenomena, right?

Cheers

Oh, one more thing... Maybe someone with +300 reputation can create a tag `inline_images´ ... the fact that it does not even exist, worries me a bit.

Answer 1

You could use Media (7.x-2.x branch) and some modules for managing responsive images (I use Picture).

You should enable this modules and:

• add the "media" button for Wysiwyg (I've tried both Tinymce and Ckeditor)
• configure media to use the "Picture" module for a custom display mode for files

So, when you add a media to a textarea you can choose the display mode for the file. For documentation about Picture please read this.

Obviously you could use also other modules, but the logic is the same: associates a responsive style for a display mode for images.

Answer 2

As an alternative, here is a step by step tutorial on how to do exactly what you're asking. It involves using CKEditor 4, wysiwyg, and the Picture module. It explains how to use those to make responsive inline images:

Pure Web Media - Responsive Inline Images with the Picture module and CKEditor 4