Installed the module on an 8.0.58.0.6 system. Activated the module per instructions.

On first pass through ckeditor configuration I chose to both display image styles and responsive image styles. Two check boxes. Configuration seemed happy with that. But when I created content in a content type I've set up just for testing this and tried to insert an image the insert image box just froze and the image wasn't inserted.

Realizing that the instructions say display image styles or responsive image styles I unchecked the display image styles.

Now the image saves, using the chosen responsive image style.

Perhaps the ckeditor configuration code could be modified to indicate that the user may select one or the other box but not both.

I am happy to test this for you since not having the ability to select an image style is a BIG deficiency for content authors.

Just noticing too that in the drop down box for responsive image styles only a narrow image style shows up. I have two responsive image styles defined: narrow and wide.

Comments

fkelly created an issue. See original summary.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

Looking at the configuration of responsive image styles it appears that the option "Select multiple image styles and use the sizes attribute" Needs to be selected in the 1x Viewport sizing area in order for the wide style to show in the content entry image drop down box. I'm not sure what's involved there but it should be noted in the documentation somewhere.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

Also; there is a setting in ckeditor configuration for allow file uploads. However, even if I uncheck this, when the configuration is saved it does not save the unchecked status. Instead the next time I look at ckeditor config the allow file uploads is checked. And the image button insists that I upload an image in order to add content.

It may be out of scope of this project but it would be good to allow the image button to access styles for images that are already present in the content. So, if I select image x in the textarea and then click on the image button I could change the image style (thereby changing the image size).

I also use IMCE to access images that are already uploaded on my web site. These images are used in a series of image galleries I have set up. I'd like to be able to use them in other content types too. IMCE browses quite intelligently for the files (as long as they are in the public area) but there is no ability to style these images.

I realize this latter part may also be out of scope. But there should be some way in content authoring to BOTH use images that are already on the site AND upload them and to be able to style (and thus resize and position) images.

mitchalbert’s picture

mitchalbert CreditAttribution: mitchalbert at Betawerk commented

Hi fkelly,

Tnx for testing and reporting the issue's. I will look into it.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented
Issue summary: View changes
fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

Saw 8.x-2.x-dev so I installed it.

When I have display image styles checkbox selected in ckeditor config I don't get any dropdown to enter an image style with the image button on ckeditor.

When I have display responsive image styles selected I do see a dropdown to enter a responsive image style.

Not sure if I was jumping the gun by installing this; let me know when you want further testing or if you have questions. My site is just a "vanity" site for experimenting until Drupal 8 gets straightened out generally, especially the image parts of ckeditor.

mitchalbert’s picture

mitchalbert CreditAttribution: mitchalbert at Betawerk commented

Hi Fkelly,

I looked at your feedback and here are my results:

  • responsive style, not able to select wide;needed to slect 1x
  • I did a fresh install of 8.0.6 and i didnt had this issue; i consider this not as a issue
  • IMCE integration
  • This is a new feature that i may look into later when this module is more stable
  • change images that are allready in content
  • You can dubble click a image and you can change the style of it
  • Not able to select image style, no dropdown
  • I fixed this issue in the new dev release

i appreciate you testing the module, keep in mind this is still under development.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

Just let me know if I get ahead of things. I've been looking at the order of Enabled Filters on the ckeditor config screen. At first it puzzled me that they kept moving around, then I realized that they are presented in the order set by Filter processing order down below on the screen. At least that's what I've concluded after trying various permutations. May want to note this in documentation when you are ready to go live with this ... or if it's moved to core.

Is the intent to allow BOTH responsive image style and "normal" image style to be selected? I didn't think so. If not, perhaps the ckeditor config screen should be modified to make the choice an either/or (or none)?

On a content type where I have initially input an image with a responsive image style I am unable to change it to just use an image style. If I change ckeditor to use an image style I don't get any style drop down on the image either double clicking it or selecting it and then clicking the image button. And if I add another image to the one that's already in the body field I don't get a drop down for image style. Here's the source view of what happens:

<img alt="riverbank" data-align="center" data-entity-type="file" data-entity-uuid="4fe08a19-b04f-471f-bc2f-88e7be330db2" data-image-style="" data-responsive-image-style="narrow" height="67" src="/drupal8/sites/default/files/styles/thumbnail/public/inline-images/riverbank.jpg?itok=XbqeTxGw" width="100" />
<p><img alt="ff" data-entity-type="file" data-entity-uuid="bfceb5c8-4473-4f2c-8ea8-b8d54c0b07ea" data-image-style="" src="/drupal8/sites/default/files/inline-images/tropicalforest_1.jpg" /></p>

Note there are two images, one which has a data-image-style blank and a responsive-image-style narrow and the second, which was added after I modified the ckeditor config from responsive image style to data image style, just has a blank data image style (no drop down presented to enter one).

Just thinking outside the box a bit, would it make sense to allow the user to always be able to choose either type of image style?

mitchalbert’s picture

mitchalbert CreditAttribution: mitchalbert at Betawerk commented

@fkelly, looks like your using a older release.

Please re-download the dev version. There are some things fixed.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

Okay, I thought I had the latest but just went and re-downloaded it. So, no I have a body area with a "narrow" responsive image style in it. Source below:

<img alt="riverbank" data-align="center" data-entity-type="file" data-entity-uuid="4fe08a19-b04f-471f-bc2f-88e7be330db2" data-image-style="" data-responsive-image-style="narrow" height="67" src="/drupal8/sites/default/files/styles/thumbnail/public/inline-images/riverbank.jpg?itok=XbqeTxGw" width="100" />
<p>&nbsp;</p>

When I try to change it to a wide responsive image style and click save, nothing happens. It isn't saved. Also, the show preview shows the balloons you see when you set up the styles, not the image itself.

Now that above was in a situation where I had set ckeditor config to show both image styles and responsive image styles. Turning image styles off in ckeditor config and going back to the content, I was able to save the changeover from the responsive image style narrow to the wide one.

So, fixing up ckeditor config to just have image style checked. Go back into the content. Double click on the image and get the image style drop down. Now the preview shows the balloons but that's functional, it shows a wider set of balloons on the left and a narrower set for a narrower style I selected on the right. Okay. Save it and it works ... the new image style replaces the responsive image style that was in there. But actually, looking at the source you see this:

<img alt="riverbank" data-align="center" data-entity-type="file" data-entity-uuid="4fe08a19-b04f-471f-bc2f-88e7be330db2" data-image-style="large" data-responsive-image-style="wide" height="320" src="http://fkelly.org/drupal8/sites/default/files/styles/large/public/inline-images/riverbank.jpg?itok=PC2Cvvtf" width="480" /> ... there is both a data-image-style and a data-responsive-image-style in the code.

Seems strange. I hope this isn't overkill but:
Step 1. I have an image with a responsive image style of wide in it: the source looks like this:

<img alt="riverbank" data-align="center" data-entity-type="file" data-entity-uuid="4fe08a19-b04f-471f-bc2f-88e7be330db2" data-image-style="" data-responsive-image-style="wide" height="1422" src="/drupal8/sites/default/files/styles/wide/public/inline-images/riverbank.jpg?itok=LCoW4eUF" width="2136" />

Step 2, I confirm the ckeditor config is set to just show image style, not responsive image style. Done. Go in and edit the content piece and verify source is as shown in step 1. Now edit the image (double-click). The image style drop down box lets me choose a "large image style" that's set at 480x480. Preview works. Save appears to work. Image appears okay. But looking at source I see:
Step 3, <img alt="riverbank" data-align="center" data-entity-type="file" data-entity-uuid="4fe08a19-b04f-471f-bc2f-88e7be330db2" data-image-style="large" data-responsive-image-style="wide" height="320" src="http://fkelly.org/drupal8/sites/default/files/styles/large/public/inline-images/riverbank.jpg?itok=PC2Cvvtf" width="480" />

So, while it's replacing the responsive image style named "wide" which had a width of 2136 and a height of 1422 with an image style of "large" ... the height is now set to 320 and the width to 480. Just to confirm I went into administer/media/imagestyles and looked at the settings for the large style and it is set for 480 x 480. I would think we would want to NOT set the height and width in the source code but rely on the style to set it.

Again hope that's not overkill.