I have an image style (scale to 750px and apply watermark), while using this style on an inserted image, during the node preview both scaled image and watermark on the image are present. Once node is published, only the scaled size remains, watermark is not displayed. Any idea what is going on?

Module: 8.x-1.0-alpha1
Drupal version 8.3.1

Comments

Tytest created an issue. See original summary.

Snater’s picture

Not sure why this should not work out because the Insert module does not really dig into image rendering processes. Which module do you use to attach the watermark to an images style?

Rewted’s picture

The watermark is created using the Image Effects module. For example, I have a Image Style type called XL which applies scaling and watermark. Both the scale and watermarked appear on the inserted image during Edit, but watermark is gone when published.

Even though the inserted image is using the correct Image Style, the URL path is to the original image (../sites/default/files/image.jpg), typically Image Styles are "copies" of the original and saved in their own dir eg: (../sites/default/files/styles/xl/public/image.jpg)

This may be the problem as the original images do not get the Image Effect applied and only Image Styles do. It appears while editing the Image Style copy is displayed, but once published it scales the original.

Should the inserted image be using the original image instead of the Image Style copy selected during insert?

Please advise.

Snater’s picture

Title: Insert style looses watermark » Output images do not use image style
Assigned: Unassigned » Snater
Priority: Normal » Major

Good analysis, thanks. Currently, the Insert module adds the entity's (image's) uuid to the <img> tag. That is done for keeping compatibility with the drupalimage CKEditor plugin which is one of the options to align images. Some more info here: https://www.drupal.org/node/2867225

Yet, the result which I was not aware of is, in the output, core replacing the url of the styled image with the url of the original entity/image when the uuid is specified. Maybe having styled images in the body is just out of core's spec.

I might have to remove the compatibility to drupalimage again - it seems pretty useless anyway by causing such an undesired effect - or implement a more or less redundant config option. I will have some thought about it...

Rewted’s picture

Assigned: Snater » Unassigned
Priority: Major » Normal

It would be perfect if the insert used the selected Styled Image copy (including path). Shoot me a message if you'd like me to test any revisions.

  • Snater committed 40dc128 on 8.x-1.x
    Issue #2872520: Output images do not use image style
    
Snater’s picture

Assigned: Unassigned » Snater
Priority: Normal » Major

The bug is caused in combination with core editor module's editor_file_reference filter (see "Track images uploaded via a Text Editor" in text format configuration). The filter grabs the uuid and retrieves the (original) URL of the image and overwrites the src attribute to ensure the most current image version is used.

The fix, which is more like a work-around, is to only insert the correct uuid when images are inserted using the "original" style setting. In other cases, a "fake" uuid is supplied in order to retain compatibility with the drupalimage CKEditor plugin.

This bug has major priority as it affects all module users not just in terms of image style but regarding bandwidth as well. I assigned it to me to indicate to others that I actively work on this ticket.

Thanks for filing this ticket. I will set the issue to "fixed" as soon as I have tagged another alpha release during the next couple of days. If you would like to test the behaviour, you might want to try the dev release. I added a test, but it would be great to get some confirmation before tagging the release.

Rewted’s picture

Assigned: Snater » Unassigned
Priority: Major » Normal

Evaluated 8.x-1.x-dev dated 2017-Apr-26. I've successfully tested inserting two different Image Styles, both render correctly as per Image Style configurations, both in Edit mode and published. Additionally, the paths are correct too.

Prior to this release, when editing a page which contained an Inserted image, the load time was rather lengthy (10+ seconds) this is now gone. I would say the original issue is now resolved. Excellent work.

A few other things while I have your attention.

1. If an image has already been Inserted and Alternative text (ALT) is added to the file, the ALT text isn't applied to the content. Is this expected behavior?

2. As per my "Manage display" options, this particular Image Style is set to use magnific popup (img can be clicked and will display a larger Image Style), but isn't applied to Inserted images. Is there an option to set the behavior on Inserted images?

Snater’s picture

Thanks for evaluating.

As for the additional points:

1. Good catch. Currently, alternative (and title) texts of inserted images are not updated when the alt text is changed. It would be good to have that feature, though. Feel free to create an issue for it.

2. The "Manage display" options of the content type influence the native field output only. Retrieving those options is out of scope for the Insert module and would probably cause more conflicts than benefits.
For applying some gallery/pop-up I added a pseudo image effect (see Drupal 8 > New features on https://www.drupal.org/project/insert) which can be applied to image styles to wrap the images in <a> tags. Then, a gallery/pop-up script can be applied quite easily by adding necessary JavaScript code to the theme.

Rewted’s picture

1. Submitted.

2. I don't quite understand how to implement the image effect, Is there further documentation or a howto?

Snater’s picture

Go to admin/config/media/image-styles, edit an image style and add the "Link (Insert)" effect. But, as mentioned before, you will have to do a little bit of JS coding in your theme according to the third-party gallery/pop-up functionality you would like to apply.
Please submit a new issue if problems occur, so other module users can find such information which might help them as well. Thanks.

Snater’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

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