6

I can see that using styles on inline images have been left out for some reason. But when I need to make the site behave a little more responsive.

I have been looking after CKeditor plugins that could select a style for the image being include. But I haven't found any.

I have been looking after at comment on the Drupal 7 Picture module that should be what is the base for the implementation of Responsive Images in Drupal 8. But there is nothing about inline images to find - just old Drupal 7 demos on how it should work.

Any idea how to get responsive images or just a basic image style for images include in inline editor on Drupal 8?

closed as too broad by kiamlaluno Oct 20 '17 at 11:39

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • drupal.org/node/2061377 is the issue to fix it in core, there is a patch, might need reroll – larowlan Nov 17 '15 at 9:22
  • Yes I found that page to but it says "last submitted patch, 124: 2061377-124-wysiwyg-image-styles.patch, failed testing" - and Wim Leers rant pretty much says that it isn't there yet. – Jonasdk Nov 18 '15 at 8:23
  • This seems like the most precise answer and my conclusion right now is to wait with the proper resizing of the inline images and wait for the issue to be fixed in core. – Jonasdk Nov 18 '15 at 10:34
  • you could use drupal.org/project/inline_responsive_images This module does what you want – user62228 Jun 10 '16 at 6:22
1

The module Entity Embed will be able to do that. There is now a dev version available, but you better wait for the first alpha/beta-release.

Even longer it will take, until this is in core:

Allow image style/responsive image mapping to be selected in Text Editor's image dialog

This is postponed to drupal 8.1

Until then you can use jquery to move the image from an image field to an empty container in the body. To avoid flicker effects, add a style display:none in the twig template of that specific image field and show it after moving it into the body in jquery.

  • Do you have a example on how the solution with jquery is done? It does sound a little hard to get the order of the images in place, when you have a list of fields images and a number of placeholder in the content. On the other hand I am trying to achieve a progressive loading of the images too. And what you suggest sounds like it could be a part of a solution. – Jonasdk Nov 18 '15 at 8:18
  • First seperate each node with $('article').each, then transfer inside each article the image fields to the body with .find and append. If you have a lot of images, you better use custom tokens in the body, that you replace in a hook_entity_view with the empty container, that you can identify later in your jquery. So that the author only has to put the token in the body and the rest is done by your code. – 4k4 Nov 18 '15 at 8:41
  • It seems that the solution with Entity Embed is embedding a whole node - which from a performance standpoint is a step in the wrong direction. I will go with a fixed image size for now. And then make a poor mans responsive behavior with styling. And then wait for Drupal 8.1 to get it right. – Jonasdk Nov 18 '15 at 10:32
  • I've tested the dev version of Entity Embed some month ago. This will be a great module, when it is ready. It is not restricted to nodes. You can place all entities inline in CKeditior, including images and you can apply all kind of rendering that is availiable for the entitity, including image styles. – 4k4 Nov 18 '15 at 10:50
  • I'll have to try it one more time. Just embedding images sounds great. When I tested Yesterday the first step asked me for the name of the node I wanted to include. – Jonasdk Nov 19 '15 at 11:23
0

Add the css code into "/themes/bootstrap/css/3.3.x/overrides.min.css"

 img {
    display: Block;
    max-width: 100%;
    height: auto;
 }
-1

You can add the class="img-responsive" in the image tag it will responsive automatically. Hope its will work for you.

Not the answer you're looking for? Browse other questions tagged or ask your own question.