Skip to main content

Issue: when choosing thumbnail images for Learning Plans, it is notoriously easy to accidentally delete an image instead of choosing it. 

Anyone who has had the misfortune to do this will know the inordinate amount of trauma this simple miss-click causes. Basically, once deleted, a thumbnail is removed from any courses or LPs it was used for, and the only way to fix it is to go through the library looking for missing thumbnails and replacing them.

Solution: Luckily, the little ‘X’ that appears on the thumbnails when you hover over them can be targeted with CSS. And if it can be targeted, it can be made to go away!  This is the little #@!£ I am referring to:

To hide the delete icon from all thumbnails, and therefore prevent accidental deletion, you simply need to add the following CSS to your custom styles:

/* Hide the delete icon that appears on thumbnails in the Learning Plan settings panel */
.sub-item:hover span.deleteicon{
    display: none!important;
}

 

I hope this helps prevent a few traumatic experiences for some of you!

Alan

This is very helpful, thank you!

Thank you for sharing this with everyone.  I can attest this code has saved us from lots of heart ache in the past.  Granted it was only after someone deleted an icon that was associated to A LOT of learning plans. 

I’m looking in the Ideas Portal now, but do you know if anyone has submitted feedback about thumbnail management (folders sother than subdomain folders], organization, etc.)? 

I’m looking in the Ideas Portal now, but do you know if anyone has submitted feedback about thumbnail management (folders sother than subdomain folders], organization, etc.)? 

I don’t think so, it would be excellent though, a solid central management of all media of the system would be great, not have it based on user profiles which present long term challenges.

This is also a big problem in the Central Repository when assigning thumbnails to Learning Objects. I had gotten this code from another user awhile back that turns off the “delete” function there too:

 

/* Removes the "delete thumbnail" icon so it doesn't get accidentally used, only on course page */

.carousel.slide.thumbnails-carousel.custom-thumbnails-carousel .carousel-inner .item.active .sub-item .deleteicon {

        display: none;

}

/* Removes the "delete thumbnail" icon so it doesn't get accidentally used, only on Learning Path page */

.carousel.slide.thumbnails-carousel .carousel-inner .item .sub-item .deleteicon {

        display: none;

}

 

There used to be an idea on the old version of the Ideas page that asked for this to be fixed, at very least add a “warning, are you sure you want to delete this?” pop up so you can cancel an accidental delete click. I wonder if that idea got deleted when they updated the Community site and needs to be resubmitted, because it seems silly to me that we all have to use a workaround like this.

I should have read this post before creating my first learning plan today. I fell straight into the trap and deleted an image from multiple courses😂

This really needs to be fixed, so please upvote the following idea!

 

I should have read this post before creating my first learning plan today. I fell straight into the trap and deleted an image from multiple courses😂

This really needs to be fixed, so please upvote the following idea!

 

Thank you so much for recreating this idea, upvoted :)

Grateful for these two CSS codes! Thank y’all!

We also agree that a centralized media library would be SUPER helpful, and would love if the Central Repository image would mirror the side panel image management that’s in course management/properties and LP properties. That small scroll bar within the gray box is TOO small!

This is also a big problem in the Central Repository when assigning thumbnails to Learning Objects. I had gotten this code from another user awhile back that turns off the “delete” function there too:

 

/* Removes the "delete thumbnail" icon so it doesn't get accidentally used, only on course page */

.carousel.slide.thumbnails-carousel.custom-thumbnails-carousel .carousel-inner .item.active .sub-item .deleteicon {

        display: none;

}

/* Removes the "delete thumbnail" icon so it doesn't get accidentally used, only on Learning Path page */

.carousel.slide.thumbnails-carousel .carousel-inner .item .sub-item .deleteicon {

        display: none;

}

 

There used to be an idea on the old version of the Ideas page that asked for this to be fixed, at very least add a “warning, are you sure you want to delete this?” pop up so you can cancel an accidental delete click. I wonder if that idea got deleted when they updated the Community site and needs to be resubmitted, because it seems silly to me that we all have to use a workaround like this.

This hasn’t worked for me. Is this meant to hide the delete icon for the thumbnail on training > Additional Info? 

If not, does anyone have any code for that? We recently have a new admin in the system who deleted an icon used on 100s of courses. We’ve been adding it back to quite a few of the high traffic courses and now she has gone on today to replace it everywhere else and she deleted it again! Honestly it’s the worst UX ever. 

Thanks,

Aimee

I have got it to work now thank you!

 

Super helpful!! Thank you for sharing this. Wish I’d found it a month ago… 😂

Reply


Terms & ConditionsCookie settings