My images will re-size according to the image styles I set up when I upload them in an image field, but not if I insert them into a body field. I checked the "Apply responsive images and styles to this field " (the body field) when I set up the content type. I tried this in both the most recent stable and the dev version but no luck getting it to work. Any suggestions, thanks

sinagod

Comments

jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented

How are you inserting the images in to this field? Is it through an external url? Because if it is, it won't work. It works best using the Media Module.

sinagod2’s picture

sinagod2 commented

Hi Jelle_S,
Thank you for your quick reply.

I was inserting the images into the body field using the IMCE Bridge plugin for the TinyMCE editor with the wysiwyg api. When inserted this way it generated the standard html img tag with an absolute URL.

The image shows up but it's not responsive.

I did like you suggested and added the images using the media module's media browser and I get this code inserted before the standard html tags with a relative URL.

[[{"type":"media","view_mode":"media_responsive","fid":"10","attributes":{"alt":"","class":"media-image","typeof":"foaf:Image"}}]]

Now the image shows up and it is responsive.
Moreover, it generated a image for each of the image styles I set up.

Could you explain the syntax of that code.
Is this being passed to the responsive images and styles module and then generating the html code?

Thanks for your help

jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented

No, the media module generates the HTML Code. All we do is in hook_entity_view_alter we do a regex search for images and replace the image style in the url (image styles get their own folder, so we can replace that folder with the folder of the style corresponding to the current width of the screen).

I hope this helps, feel free to aks any questions you might still have ;-)

PS: You can find the code here

attiks’s picture

attiks commented
Component: Miscellaneous » Documentation
Category: support » task
Issue tags: +Needs documentation
attiks’s picture

attiks commented
Status: Active » Fixed

Automatically closed -- issue fixed for 2 weeks with no activity.