Skip to content

Instantly share code, notes, and snippets.

@prasetyop
Last active March 13, 2023 13:33
Show Gist options
  • Star 23 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save prasetyop/f686a827bc0f4ca9089de7d115d3fa9c to your computer and use it in GitHub Desktop.
Save prasetyop/f686a827bc0f4ca9089de7d115d3fa9c to your computer and use it in GitHub Desktop.
Flexible Content Preview Pop Up
.acf-fc-popup .preview {
position: absolute;
right: 100%;
margin-right: 0px;
top: 0;
background: #383c44;
min-height: 100%;
border-radius: 5px;
align-content: center;
display: grid;
}
.acf-fc-popup .preview .inner-preview {
padding: 10px;
}
.acf-fc-popup .preview img {
display: block;
}
jQuery(function($) {
$(document).on('hover', '.acf-fc-popup li a', function() {
var $this = $(this)
var parent = $this.parents('.acf-fc-popup');
var filename = $this.attr('data-layout');
if (parent.find('.preview').length > 0) {
parent.find('.preview').html('<div class="inner-preview"><img src="' + theme_var.upload + filename + '.jpg"/></div>')
} else {
parent.append('<div class="preview"><div class="inner-preview"><img src="' + theme_var.upload + filename + '.jpg"/></div></div>')
}
})
})
// REGISTER CSS & JS
add_action( 'admin_enqueue_scripts', 'acf_flexible_content_thumbnail' );
function acf_flexible_content_thumbnail() {
// REGISTER ADMIN.CSS
wp_enqueue_style( 'css-theme-admin', get_template_directory_uri() . '/css/admin.css', false, 1.0 );
// REGISTER ADMIN.JS
wp_register_script( 'js-theme-admin', get_template_directory_uri() . '/js/admin.js', array('jquery'), 1.0, true );
wp_localize_script( 'js-theme-admin', 'theme_var',
array(
'upload' => get_template_directory_uri().'/img/acf-thumbnail/',
)
);
wp_enqueue_script( 'js-theme-admin');
}
@prasetyop
Copy link
Author

This will create a preview for Flexible Content field when you hovering the block name:

30908025-909effb6-a3a6-11e7-8518-a3d890838e0a

Explanation:
This script will try to load image from wp-content/themes/your-themes/img/acf-thumbnail/your_block_name.jpg as a preview

Please put:
admin.js to wp-content/themes/your-themes/js/admin.js
admin.css to wp-content/themes/your-themes/js/admin.css
And add the function to register script on your functions.php

The image name should be exactly same as your block name.
example:
image
If your block name is standard-banner then you should put the wp-content/themes/your-themes/img/acf-thumbnail/standard-banner.jpg

I recommend the width of the image 520px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment