Copied to clipboard

Flag this post as spam?

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


  • Daniel Gillett 72 posts 149 karma points
    Mar 04, 2020 @ 09:58
    Daniel Gillett
    0

    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.

    Best, Daniel

  • Nik 1299 posts 5501 karma points MVP 3x c-trib
    Mar 04, 2020 @ 10:22
    Nik
    0

    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:

    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.

    Thanks

    Nik

  • Daniel Gillett 72 posts 149 karma points
    Mar 04, 2020 @ 10:44
    Daniel Gillett
    0

    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

  • Nik 1299 posts 5501 karma points MVP 3x c-trib
    Mar 04, 2020 @ 10:57
    Nik
    100

    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:

    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
    }
    

    Does that make sense?

    Nik

  • Daniel Gillett 72 posts 149 karma points
    Mar 04, 2020 @ 11:24
    Daniel Gillett
    1

    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

Please Sign in or register to post replies

Write your reply to:

Draft