V8 Handling Trashed Images that are being used in the Content Section
I thought I'd post there here in case anyone runs into this...
When working with images in umbraco, the Getting Started guide does say to always check for nulls. ...wish I'd have found/looked at this info sooner.
When you select an image to use in the Content Section, Umbraco stores the image ID - not the actual image. So deleting items from the Media Section does not remove the ID from the Content Section. So you must ALWAYS check for null values.
Here's what I came up with...
Umbraco v8...
var image = Model.Value<IPublishedContent>("mainImage");
var imageId = image != null ? image.Id : 0;
var image = imageId =! 0 ? Umbraco.Media(imageId): null;
//Or...
var siteRoot = Model.Root();
var image = Model.Value<IPublishedContent>("mainImage");
var imageId = image != null ? image.Id : 0;
var image = imageId =! 0
? Umbraco.Media(imageId)
: siteRoot.Value<IPublishedContent>("defaultImage") ;
//Or maybe with Fallback...
var siteRoot = Model.Root();
var image = Model.Value<IPublishedContent>("mainImage", fallback: Fallback.ToAncestors);
var imageId = image != null ? image.Id : 0;
var image = imageId =! 0
? Umbraco.Media(imageId)
: siteRoot.Value<IPublishedContent>("defaultImage") ;
Hope this works for you and saves the countless hours spent pulling hair.
Nice one. Something to consider, Umbraco.Media can return null if the ID passed in does not represent a current media item (e.g. it might point to one in the recycle bin). As a result image at that point could be null.
In v8, PropertyValueConverters should be on so when you are doing this:
var image = Model.Value<IPublishedContent>("mainImage");
it will be doing the retrieval for you based on the ID of the image stored. so you'd be better doing this for simplicity:
var siteRoot = Model.Root();
var image = Model.Value<IPublishedContent>("mainImage") ??
siteRoot.Value<IPublishedContent>("defaultImage") ;
This will null check the value if mainImage and if null it will get the defaultImage. However, you will still need another check as defaultImage could also be null if it was deleted from the media section.
I didn't know about using ?? ...i'm still a litle old school. That will save me a line of code, some resource, and looks much neater.
I'm embarraced to say this null image in Umbraco stumped me for " many days".
At the end of your reply you said I could 'still' get a null value for the default image. True! This was/is my problem was/is in the first place. I've got an end user who is not computer savy so I have to come up with something. I implemented the default image in the siteRoot and created a folder in the Media Section called Default Images so my user can select a "required" default image. But it doesn't truly solve the problem.
Im also droping the image variable into the Url.GetCropUrl(mediaItem: image, cropAlias: "galleries", htmlEncode: true) method. (...although I'm now having issues with responsiveness and my images are being stretched when chaning screen sizes. argh)
I cannot seem to have a null image at all. So what is the solution when even my default image may return null? I've been following umbraco since 4.7 and I'm suprised that this is an issue, still. Would Umbraco be better off with not allowing the deletion of an image if it is being used in the Content Section? There was a helpful package called nexu to inform a user if they are deleted an image that is being used, but says it doesn't work in V8.
Thank you so much for your quick reply! I moved down to an island in Greece, so I'm truly on my own when troubleshooting. Any help is very much appreciated.
Okay so there is no way to guarantee that an item dependent on something in the media library is there. So, the approach I would take would be something like this:
var siteRoot = Model.Root();
var image = Model.Value<IPublishedContent>("mainImage") ??
siteRoot.Value<IPublishedContent>("defaultImage") ;
var imageUrl = image != null ? image.GetCropUrl("crop details here") : "/assets/image/ultimatefallbackimage.png";
This would mean you can define an explicit image you know will always be there if the rest of the fallback doesn't work.
Regarding the issue around responsive images and crop behaviours, I would suggest having a look at Slimsy. It's a very clever plugin for Umbraco (has both v7 and v8 versions) that makes using Src-sets and lazy loading for images much much easier. This allows you to have different image sizes on different screen sizes without too much hastle. If you went down this approach however, I wouldn't be using the "imageUrl" option described above, instead I'd have an
@if(image != null)
{
//render markup using slimsy here
}else
{
//render markup for ultimate fallback image here
}
That makes a lot of sense! Thank you! I will get to work on implementing this on all of my pages and I will research more about Slimsy as well.
The site I'm doing (for my mother lol) is mainly a Gallery site so every image needs to be displayed correctly on different devices; but first I will update the solution you provided through the site.
V8 Handling Trashed Images that are being used in the Content Section
I thought I'd post there here in case anyone runs into this...
When working with images in umbraco, the Getting Started guide does say to always check for nulls. ...wish I'd have found/looked at this info sooner.
When you select an image to use in the Content Section, Umbraco stores the image ID - not the actual image. So deleting items from the Media Section does not remove the ID from the Content Section. So you must ALWAYS check for null values.
Here's what I came up with...
Umbraco v8...
//Or...
//Or maybe with Fallback...
Hope this works for you and saves the countless hours spent pulling hair.
Best, Daniel
Hey Daniel,
Nice one. Something to consider, Umbraco.Media can return null if the ID passed in does not represent a current media item (e.g. it might point to one in the recycle bin). As a result image at that point could be null.
In v8, PropertyValueConverters should be on so when you are doing this:
it will be doing the retrieval for you based on the ID of the image stored. so you'd be better doing this for simplicity:
This will null check the value if
mainImageand if null it will get thedefaultImage. However, you will still need another check asdefaultImagecould also be null if it was deleted from the media section.Thanks
Nik
Hi Nik!
I didn't know about using ?? ...i'm still a litle old school. That will save me a line of code, some resource, and looks much neater.
I'm embarraced to say this null image in Umbraco stumped me for " many days".
At the end of your reply you said I could 'still' get a null value for the default image. True! This was/is my problem was/is in the first place. I've got an end user who is not computer savy so I have to come up with something. I implemented the default image in the siteRoot and created a folder in the Media Section called Default Images so my user can select a "required" default image. But it doesn't truly solve the problem.
Im also droping the image variable into the Url.GetCropUrl(mediaItem: image, cropAlias: "galleries", htmlEncode: true) method. (...although I'm now having issues with responsiveness and my images are being stretched when chaning screen sizes. argh)
I cannot seem to have a null image at all. So what is the solution when even my default image may return null? I've been following umbraco since 4.7 and I'm suprised that this is an issue, still. Would Umbraco be better off with not allowing the deletion of an image if it is being used in the Content Section? There was a helpful package called nexu to inform a user if they are deleted an image that is being used, but says it doesn't work in V8.
Thank you so much for your quick reply! I moved down to an island in Greece, so I'm truly on my own when troubleshooting. Any help is very much appreciated.
Best, Daniel
Hi Daniel,
Okay so there is no way to guarantee that an item dependent on something in the media library is there. So, the approach I would take would be something like this:
This would mean you can define an explicit image you know will always be there if the rest of the fallback doesn't work.
Regarding the issue around responsive images and crop behaviours, I would suggest having a look at Slimsy. It's a very clever plugin for Umbraco (has both v7 and v8 versions) that makes using Src-sets and lazy loading for images much much easier. This allows you to have different image sizes on different screen sizes without too much hastle. If you went down this approach however, I wouldn't be using the "imageUrl" option described above, instead I'd have an
Does that make sense?
Nik
Hi Nik!
That makes a lot of sense! Thank you! I will get to work on implementing this on all of my pages and I will research more about Slimsy as well.
The site I'm doing (for my mother lol) is mainly a Gallery site so every image needs to be displayed correctly on different devices; but first I will update the solution you provided through the site.
You are such a big help!
very best, Daniel
is working on a reply...