U4-10865 - Prevent Pintrest plugin buttons appearing on media images in the back office

Created by Pete Duncanson 19 Jan 2018, 14:59:52 Updated by Pete Duncanson 25 Jan 2018, 10:09:42

Had a odd chat with a client wanting to know why the back office was always linking to Pintrest. Turns out they had the plugin install without knowing about it and its injects buttons over any image it finds on the page.

I can't think of any reason why anyone would want to share an image behind a login screen so lets just hide the button from all back office images.

This is easy to do by just adding a data-pin-nopin attribute to any images we render out in the back office:

<img src="whatever.jpg" data-pin-nopin="true" />

See: https://developers.pinterest.com/docs/widgets/save/?#nopin

This should be added to any of the templates/partials that do the rendering out

Areas to look into/think about:

  • Images injected into RTE
  • Media section, browsing through images
  • Back Office search? Not sure if we show images there?

For the RTE you'll need to go digging into this method: https://github.com/umbraco/Umbraco-CMS/blob/2d53da55a7c32b110987f142374e45a66f0e0ac2/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js#L86

Comments

Steve 20 Jan 2018, 19:02:52

Do you really expect the Umbraco developers to fix the annoying behavior of a browser extension by updating all img elements in the backoffice? If the user doesn't like a label on each image (s)he can disable that behavior easily in the options menu.


Pete Duncanson 22 Jan 2018, 11:25:52

Hi Steve,

Thanks for you comment. No I don't expect HQ to fix it. I log it here to open a discussion on it or allow someone (including myself) to do a Pull Request (PR) for it. You can't do a PR without an issue see.

Having it here means we can have a discussion about if it should even be in core or what other options might be available which you've just engaged in, thank you! I didn't know you could change it via the settings, I wonder if this is per site or for the whole thing. Something for me to dig into.

My side of the story is should users even have to worry about making these changes? Is it not just another distraction or possible confusion (as I saw in my client and second time I've seen this myself). Why not just dis-allow it out the box. I'm a little un-comfy about making a change for this single service but it does inject itself into the back office and clearly isn't going anywhere for the foreseeable future. As you said yourself its "annoying behavior" which we can easily fix for all in a very prominent and ubiquitous plug in.

Pete


Pete Duncanson 22 Jan 2018, 11:28:24

Sees you can disable it sitewide with a simple meta tag too, might be a quick win: https://help.pinterest.com/en/articles/prevent-people-saving-things-pinterest-your-site

Alternatively I think we would only need this added on media pickers and the media section only so I only envision this being needed in 3 img tags or so. The meta tag might be a quicker catch all though.


Pete Duncanson 23 Jan 2018, 15:10:40

PR created: https://github.com/umbraco/Umbraco-CMS/pull/2416


Sebastiaan Janssen 24 Jan 2018, 14:53:56

I hate that this is necessary.. but ok. :)

Thanks for the PR!


Pete Duncanson 25 Jan 2018, 10:09:42

Awesome! And we've made the back office a little more confusion free. Bravo all, especially you Steve, you pushed me to get it done. Thanks!


Priority: Normal

Type: Bug

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version: 7.7.10

Sprint:

Story Points:

Cycle: