I received several complaints from users who struggle to identify uploaded images in the File Uploads section of blogs. This happens because pasted images get cryptic filenames like editor_image_ + UUID, making it challenging to identify and delete unused images.
Blogs upload view
To solve this problem, I used the customizer to load additional JavaScript that adds more information to this view, helping users make informed decisions about which images can be safely deleted.
No support or warranty is provided for the code. Use at your own risk.
JSON to import in customizer
{
"name": "Blog File Uploads",
"title": "Add preview and counter to Blog File Uploads",
"description": "Adding a bit more value for users to Blogs File Uploads",
"services": [
"Connections",
"Customizer"
],
"state": "enabled",
"extensions": [
{
"name": "Blogs",
"type": "com.ibm.customizer.ui",
"payload": {
"include-files": [
"stoeps-customizer-css/blog-upload-preview.js",
"stoeps-customizer-css/blog-upload.css"
],
"match": {
"url": "roller-ui/authoring/uploadFiles.do"
},
"cache-headers": {
"cache-control": "max-age=0"
}
},
"path": "blogs",
"state": "enabled"
}
]
}
There is a very good article
on the different options of Customizer payloads. I used it to find the "match":{"url": "roller-ui/..."} option to include the JavaScript and CSS only for the upload URL.
Installation Files
Download these files and copy them to the customizer NFS share (/pv-connections/customizer) in the folder stoeps-customizer-css (or adjust paths in the customizer app):
How It Works
After injecting blog-upload-preview.js, a new button appears that lets users add a preview column to the images and displays a counter showing how often each image is used within the blog.
Blogs upload view with the new button to toggle count and preview
When you click the button, the view transforms:
This script only checks for image usage within the current blog! If content was copied between blogs, an image might be used elsewhere, so the counter isn’t 100% reliable.
View of uploaded blog images with added count and preview, sorted by usage count
You can view any image at its full size by clicking on it. The enlarged view closes when you click anywhere outside the image.
Overlay display showing image at original size
With this enhancement, you can easily identify unused images and directly select them for deletion, making blog maintenance significantly easier.
