adding data attributes for images / pintrest nopin
Hi,
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?
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:
A Media Picker wich holds the image and
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.
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...
adding data attributes for images / pintrest nopin
Hi,
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?
Thanks.
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":
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:
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.
Jonathan
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:
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...
is working on a reply...