Home › Forums › Bug Reports › SVG's don't abide by the preview size › Reply To: SVG's don't abide by the preview size
Obviously a long time since this was posted but I’ve had the same problem quite a lot, especially when it comes to icons for elements and making them editable by the client and using SVG.
I decided to have a crack at a solution. It’s not pretty but it works after the first time the SVG has been uploaded/chosen.
Stick in your functions.php;
function unleash_enqueue_scripts( $hook ) {
if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
return;
wp_enqueue_script(
'resizeSvg', // Handle
'/path/to/theme/js/resizeSVG.js', // Path to file
array( 'jquery' )
);
}
add_action( 'admin_enqueue_scripts', 'unleash_enqueue_scripts', 2000 );
Then create a file in your JS folder called resizeSVG.js and add in the following;
jQuery(document).ready(function() {
jQuery('.acf-image-image').each(function(){
if(jQuery(this).attr('src').indexOf('.svg') > 0) {
jQuery(this).css('width', '128px');
}
});
});
This basically resizes any acf-image that has .svg in it down to 128px, obviously you can change that as needed.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🚀 This week’s session of ACF Chat Fridays dips into the preliminary results of our first ever user survey. Don’t miss it! https://t.co/3UtvQbDwNm pic.twitter.com/kMwhaJTkZc
— Advanced Custom Fields (@wp_acf) May 9, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.