Forums

Responsive IMAGE

Permalink
Hi all - Is it possible to insert images from editor as responsive ?
 
mnakalay replied on at Permalink Reply
mnakalay
Actually, they are.
When inserting an image in your editor, it first gets some information from your theme.

Your theme, in the file page_theme.php has the possibility to use the function getThemeResponsiveImageMap() to output responsive image or picture tags to be more precise

If you look at the core elemental theme you'll see that function looks like this
public function getThemeResponsiveImageMap()
    {
        return [
            'large' => '900px',
            'medium' => '768px',
            'small' => '0',
        ];
    }

What this does is tell the system that by default the image size to use is "small". For screen sizes above 768px use the image size "medium" and for screen sizes above 900px use image size "large"

Those image size names correspond to thumbnail types' handles. Thumbnail types can be created in your dashboard and they define image sizes to be used in your content. You could create a thumbnail type with handle xs_small_editor_image, for instance, to be used for screen sizes above 320px and add this to your function: 
public function getThemeResponsiveImageMap()
    {
        return [
            'large' => '900px',
            'medium' => '768px',
            'xs_small_editor_image' => '320px',
            'small' => '0',
        ];
    }

In the absence of that function the editor will output a simple non-responsive image