Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • zimmertyzim 12 posts 92 karma points
    Apr 25, 2019 @ 16:35

    adding data attributes for images / pintrest nopin


    Do forgive any fundamental misunderstandings, I am very new to Umbraco.

    I am looking to prevent pintrest from picking up certain images added via the CMS. This is typically achieved by adding a nopin="nopin" attribute to any image on the site. Thus if a user is adding an image to a page via a Main Content or just an Image control, how can I allow them to set the nopin attribute?


  • Jonathan Distenfeld 105 posts 618 karma points
    Apr 26, 2019 @ 06:32
    Jonathan Distenfeld

    There are different ways to achive this:

    If you want to prevent this by the actual image (not depending on where the image is shown), you can add a property to the "image" media type. You can find it here: Settings -> Media Types -> Image. Then add a new property called "No Pinterest" and use the checkbox editor for this. In your Template you can then check for this property and add the attribut depending on the value of "noPinterest":

    // strongly typed image in order to access the property
    var image = Model.Image as Umbraco.Web.PublishedContentModels.Image;
    if(image != null)
        <img src="@Model.Image.Url" nopin="@(image.NoPinterest ? "nopin" : "")">

    if you want to prevent this depending on where the image is shown and not by the image itself, i would recommend to add a new doctype called "ExtendedImage" which has two Properties:

    1. A Media Picker wich holds the image and
    2. the NoPinterest Property mentionend above.

    In the DocTypes you want to give editors the opportunity to choose wheather to prevent pickung up or not, you can then add a property with the nested content editor and allow the ExtendedImage DocType.


  • zimmertyzim 12 posts 92 karma points
    Apr 26, 2019 @ 09:25

    Thanks Jonathan, it looks like I need to spend some more time working out how all of this fits together site wide.

    I actually did attempt the first approach you have mentioned, but couldn't really see how to access the property once it'd been added.

    I was hoping the user would add an image and then could select mark it as a pintrest image as necessary via the RTE:


  • Jonathan Distenfeld 105 posts 618 karma points
    Apr 26, 2019 @ 10:00
    Jonathan Distenfeld

    I don't think that this is an easy thing to do via the rte (not with a good solution anyway), since this is not an Umbraco-Thing, its tinyMCE.

    So to make that possible you probably would have to write a plugin for tinyMCE to change the way it saves images and add your custom attribute.

    Of course you could get the image-tags from rte via regex when rendering the content, get the media from umbraco and set the attribute there, but that would not be a good solution...

Please Sign in or register to post replies

Write your reply to: