Simplify the ebl_image_edit plugin
In this tip I will show you how to simplify the ebl_image_edit plugin and make it much more user friendly.
What we will do is to add two pieces of codes to the ebl_image_edit
plugin, together with some CSS and Jquery that combined will create a custom menu to easily select the predefined sizes, instead of using the regular select-box. Of course you can style it however you want to.
For a better understanding take a look at the before and after image, and corresponding video:
An image:
Or a link to a video explanation.
So lets get to it!
Step 1
Go to Admin > Plugins then click on Edit next to ebl-image-edit, look for the closing /style> tag and add the next CSS code before it:
#eblcontainer .eblpsmenu { padding-bottom:10px; }
#eblcontainer .eblpsmenu ul, #eblcontainer .eblpsmenu li { list-style:none; padding:0; margin:0; }
#eblcontainer .eblpsmenu li { display:inline-block; }
#eblcontainer .eblpsmenu a { display:inline-block; padding:5px 9px; font-size:12px; font-weight:bold; text-transform:capitalize; color:#663300; background: #ffd83f; background: -moz-linear-gradient(top, #ffd83f 0%, #ffd83f 50%, #ffcc33 51%, #ffcc33 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd83f), color-stop(50%,#ffd83f), color-stop(51%,#ffcc33), color-stop(100%,#ffcc33)); background: -webkit-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%); background: -o-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%); background: -ms-linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd83f', endColorstr='#ffcc33',GradientType=0 ); background: linear-gradient(top, #ffd83f 0%,#ffd83f 50%,#ffcc33 51%,#ffcc33 100%); -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; text-decoration:none; -moz-box-shadow:1px 1px 2px #999; -webkit-box-shadow:1px 1px 2px #999; box-shadow:1px 1px 2px #999; margin:1px 11px 6px 1px; }
#eblcontainer .eblpsmenu a:hover { background: #ffcc33; background: -moz-linear-gradient(top, #ffcc33 0%, #ffcc33 49%, #ffd83f 50%, #ffd83f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc33), color-stop(49%,#ffcc33), color-stop(50%,#ffd83f), color-stop(100%,#ffd83f)); background: -webkit-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%); background: -o-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%); background: -ms-linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc33', endColorstr='#ffd83f',GradientType=0 ); background: linear-gradient(top, #ffcc33 0%,#ffcc33 49%,#ffd83f 50%,#ffd83f 100%); -moz-box-shadow:1px 1px 2px #333; -webkit-box-shadow:1px 1px 2px #333; box-shadow:1px 1px 2px #333; }
#eblcontainer .eblpsmenu a:focus, #eblcontainer .eblpsmenu li.active a { color:#777; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #fffcf4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fffcf4)); background: -webkit-linear-gradient(top, #ffffff 0%,#fffcf4 100%); background: -o-linear-gradient(top, #ffffff 0%,#fffcf4 100%); background: -ms-linear-gradient(top, #ffffff 0%,#fffcf4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffcf4',GradientType=0 ); background: linear-gradient(top, #ffffff 0%,#fffcf4 100%); border:1px solid #777; -moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999; margin:0 10px 5px 0; cursor:default; }
#eblcontainer .eblpsmenu a:focus { -moz-box-shadow:0 0 3px #777 inset; -webkit-box-shadow:0 0 3px #777 inset; box-shadow:0 0 3px #777 inset; }
#eblcontainer input[type="button"], #eblcontainer input[type="submit"] { padding:5px 9px; font-weight:bold; color:#666; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); background: linear-gradient(top, #ffffff 0%,#efefef 100%); border:1px solid #777; box-shadow:0 0 3px #999; text-decoration:none; margin:1px; cursor:pointer; }
#eblcontainer input[type="button"]:hover, #eblcontainer input[type="submit"]:hover { background: #efefef; background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #efefef 0%,#ffffff 100%); background: -o-linear-gradient(top, #efefef 0%,#ffffff 100%); background: -ms-linear-gradient(top, #efefef 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 ); background: linear-gradient(top, #efefef 0%,#ffffff 100%); box-shadow:0 0 6px #999; }
Step 2
Look for the showCoords funcion: function showCoords(c)
, now before that function you will see the closing of jQuery: });
, then you will need to add my jQuery code just before that closing, for example:
});
// simplify code goes here!
});
// not here!
function showCoords(c) {
The code
// start simplify code -------------------------- var customOptions = $('#eblcropdata, #ebltmbctrl p:eq(3)');
$('#eblcropctrl p:eq(0), #ebltmbctrl p:eq(1)').hide();
// Predefined sizes menu $('#eblcontainer p:eq(0)').after('<div class="eblpsmenu"><ul></ul></div>'); $('.eblpsmenu').hide();
$('#eblcontainer p:eq(0) a').click(function(){ $('#eblcontainer p:eq(0) a').removeClass('active'); $(this).addClass('active'); $('.eblpsmenu ul').html(''); var id = $(this).attr('id'); if(id == 'eblcroplnk' || id == 'ebltmblnk'){ removeCrop(); $(customOptions).hide(); $('.eblpsmenu').show(); var c; if(id == 'eblcroplnk'){ c = '#eblcropctrl'; } else { c = '#ebltmbctrl'; } $(c+' select[name="customsize"] option').each(function(){ var name = $(this).html().split(' : '); $('.eblpsmenu ul').append('<li><a href="#">'+name[0]+'</a></li>'); }); } else { $('.eblpsmenu').hide(); } });
$('.eblpsmenu a').live('click', function(event){ event.preventDefault(); addCrop(); $('.eblpsmenu li').removeClass('active'); var id = $('#eblcontainer p:eq(0) a.active').attr('id'); var sindex = $(this).parent().index(); var select; if(id == 'eblcroplnk'){ select = '#eblcropctrl select[name="customsize"]'; } else { select = '#ebltmbctrl select[name="customsize"]'; } $(select+' option:eq('+sindex+')').prop('selected', true); $(select).change(); $(this).parent().addClass('active'); if($(this).html() == 'Custom'){ $(customOptions).show(); } else { $(customOptions).hide(); } });
$('#eblimgcrop, #ebltmbcrop').val('Create');
$('#ebltmbctrl select[name="customsize"]').change(function(){ var id = $('#eblcontainer p:eq(0) a.active').attr('id'); var value = $(this).val().split('x'); if(value == 'Custom'){ $('#eblcontainer input[type="checkbox"]').prop('checked', false); if(id == 'ebltmblnk'){ $('#ebltmbW, #ebltmbH').val(''); } } else { $('#eblcontainer input[type="checkbox"]').prop('checked', true); if(id == 'ebltmblnk'){ $('#ebltmbW').val(value[0]); $('#ebltmbH').val(value[1]); } } }).change(); // end simplify code --------------------------
Then click on Save and you are done! Enjoy :)