Hello,
I need to remove the “No image selected” placeholder from the image uploader. As the text has no useful element around it to target with JS/CSS (just view.hide-if-value p), how can I remove it without also touching the upload acf-button inside the same element?
Thanks,
Kris
Hi @krishaamer
Maybe you can use this code:
function my_acf_admin_footer() {
?>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$(".acf-image-uploader p").each(function(){
$(this).replaceWith($(this).html().replace("No image selected", ""));
});
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'my_acf_admin_footer');
I hope this helps.
Thanks James, this works perfectly. I hope in the future though ACF will have a template system so we could customize before render. #FeatureRequest.
Cheers,
Kris
I was facing the same issue and came up with this more robust CSS-based solution which targets the relevant CSS class and will work across possible translations of the “No image selected”-string.
.hide-if-value :not(a) {
font-size: 0px;
color: transparent;
}
This selector can optionally be prepended with the .acf-image-uploader
or .acf-file-uploader
selector in case you want to target these fields specifically.