Thumbnail Preview Image Selection backend (javascript)

Mga tutorials at tips sa pagdisenyo gamit ang CMS at iba pa
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Fri Dec 23, 2016 6:22 am

Thumbnail Preview Image Selection backend (javascript)

Post by rollmeister » Sat Jan 07, 2017 9:26 pm


A client wanted to see the thumbnail without mousing over the eye icon on image selection so I made a javascript hack. Use at your own risk, no warranty given.

It works in Joomla 3.5.1, probably other versions also, on any image selection view in the backend e.g. Menu - Link Type, DjImageSlider component/module editor etc.

jQuery(document).ready(function() {
/*when file selection input value changes, update thumbnail in adjacent preview element*/
jQuery(".media-preview + input").change(function() {
jQuery(this).closest('.controls').find('.media-preview').css('background','url('+jQuery(this).closest('.controls').find('.media-preview + input').attr('data-basepath')+jQuery(this).closest('.controls').find('.media-preview + input').val()+') top center no-repeat').css('background-size','contain');
/*iterate through each image selection preview, to update the background image of the adjacent preview element*/
jQuery.each(jQuery('.controls .media-preview'), function(index, element) {
var imageurl = jQuery(this).closest('.controls').find('.media-preview + input').attr('data-basepath')+jQuery(this).closest('.controls').find('.media-preview + input').val();
jQuery(this).css('background','url('+imageurl+') top center no-repeat').css('background-size','contain');
/*set width and height of preview element for which selected image is set as background*/
jQuery('.controls .media-preview').css('width','170px').css('height','100px');

Only problem I found was adding it to all pages of the backend template. I added it to the administrator section isis template.js which is not a good solution.

In return for this little hack, if someone can point me to Joomla plugin that allows adding javascript text. I did try the module method, sometimes worked sometimes didn't depending on the javascript code so I gave up on it - I need something that accepts what I type raw and not sanitize it.



Return to “Design Tips and Tricks”