I'm going to try my best describe the nightmare this has been, and hope there's a solution.

Using the media module, when you add an image, the text inserted looks like this:

[[{"fid":"64","view_mode":"file-wysiwyg","type":"media","attributes":{"height":"200","width":"400","class":"media-element file-default"},"link_text":null}]]

Makes sense, and seems extremely useful. You can specify the view mode, and you'll be able to adjust all images that are using "default" in the future by just updating that particular view mode.

We had problems with this though.

  1. The entire view mode contains a lot more html than just an tag. If you try to right or left align, it'll align the image... but the rest of the divs/etc. stretch out and effectively make it useless.
  2. Our client wanted captions on pictures. My first thought (despite knowing how bad of a practice it is) was to just tell them to use tables; top row the image, second row the caption. The problem with that seemed to be that when rendered, it would pull the image out of the table.
  3. We had all kinds of issues trying to resize the image, since it relied on the view mode; but, that makes sense and I could easily see limiting them to a set number of sizes.

1 wasn't terrible, and we might have looked for some kind of CSS solution (say, overriding any float:clear), but since caption wasn't an option, we went with the CKEditor image2 plugin. The problem was that as soon as you added a caption (it actually used the and structure for those), it would turn the whole thing into HTML instead of the media tokens. So, that above snippet would turn into:

<figure class="image media-element file-wysiwyg">
  <img alt="" data-fid="64" data-media-element="1" height="200" src="http://example.com/image/path" width="400" />

This is where everything goes haywire from a user standpoint. The users have no clue what a view mode or media tokens are, and even if they did, there's no way to go back to the media token aside from removing and reading it. They don't understand the differences in behavior between media tokens and HTML, and it's not something to easily explain. But, it's also something that seems so basic that I'm hoping someone has a better solution for all this, because I can't find anything to fix this. Any solutions I can think of are stop gaps that kill off some other function; for instance, if there was any way for Media not to use tokens, it'd be easier for the users to understand, but then we'll have users manually resizing 3mb images to thumbnail sizes...

Naturally, this is also an issue with audio and video, but images is where the problem comes up the most.

  • How invested are you in using the media module? It has many, many problems unfortunately, and I think development efforts have moved to the D8 version. If you can switch, Scald is a much more user-friendly, and stable, sort-of-alternative – Clive Mar 18 '16 at 18:16
  • Fairly committed, at least legacy-wise. We need the nice, pretty media library look of it for users to find images. I remember looking into Scald a while back, might need to again. I have a hard time blaming Media or CKEditor alone, they just don't seem to work well together. – UnsettlingTrend Mar 18 '16 at 18:38
  • So the question here is - how to make a decent intuitive interface for users to add caption to the image without loosing the ability to specify image view mode (while using media + ckeditor)? – oksana-c Mar 19 '16 at 16:37
  • Um. Sorta? Sorry, just so many moving parts and requirements with this project. We ended up just trying to go full media token on the site, and adding a "caption" field to images that will display on certain view modes. I'll try to make a more complete answer when I get a chance, or if someone wants to beat me to it and get the cred... – UnsettlingTrend Mar 29 '16 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.