Is it possible to add thumbnails to the post_object field?
I’ve tried:
function test_my_post_object_result( $title, $post, $field, $post_id ) {
$title = '<img src="https://www.google.pl/logos/doodles/2016/2016-doodle-fruit-games-day-5-5688836437835776-hp.gif"/>' . $title;
return $title;
}
add_filter('acf/fields/post_object/result', 'test_my_post_object_result', 10, 4);
Adding text works well, but images just doesn’t show on the select list.
Hi @jmarceli
If you look at the sourcecode are there any reference to the image tag?
No images has to be filtered before by some code. Either ACF or Select2 I’m not sure.
I’ve investigated this further and find out that images are in place in the Ajax response which is returned after clicking on the Select2 control. So it’s probably something with the select2 itself.
EDIT:
The root of this problem is ACF Javascript decode_data function (inside acf-input.js file). It usesacf.decode()which strips all the markup with.text() function.
My current solution is to monkey patch the acf.select2 object with the following code:
// Enable markup in ACF options
acf.select2.decode_data = function( data ) {
// bail ealry if no data
if( !data ) return [];
//loop
$.each(data, function(k, v){
// text
data[ k ].text = v.text; // HERE IS THE CHANGE
// children
if( typeof v.children !== 'undefined' ) {
data[ k ].children = acf.select2.decode_data(v.children);
}
});
// return
return data;
};
But I think that there should be some filter for the decode_data as my solution is not (and can’t be) future proof.
I’ve addressed this to Elliot on Github as a feature request.
In my opinion it’d probably be better to change the sanitation to allow certain HTML markup to pass through.
Thanks. It would be nice to have an option to define which tags are allowed to avoid such problems in the future.
Hi guys
Thanks for the topic!
I’ll add this to my t-do and look into adding HTML compatibility, however, I remember the acf.decode() function was added to allow search results matching of special characters such as ‘&’
perhaps there is another way to allow the correct search results + HTML markup!
Cheers
E
Hi guys
great news. I was able to solve the issue and have released a new version including the fix!
Please update to 5.4.5 and let me know how you go
Thanks for your assistance, but still without monkeypath mentioned earlier I’m unable to get images in Select2 for post_object fields.
Is there any way to view your modifications diff? I’m not sure what has been changed so maybe I should adjust my code somehow.
Hi @jmarceli
The repo is private but here’s a screenshot of the changes made according to the commit history 🙂
https://www.dropbox.com/s/ltw6tdrctioaasp/Sk%C3%A4rmklipp%202016-09-13%2012.25.17.png?dl=0
Thanks. I see this change now but I have no idea how it’s supposed to solve this problem. decode method still removes all HTML tags by using text() function.
Hi guys
The use of a textarea element (instead of a div) allows for HTML elements to remain intact when using the .text() function
My local testing shows this has worked a treat, but if the issue persists, I can continue to look into this problem.
please provide me with login details to your website if you run into this issue so I can test
Thanks
Elliot
Hi guys,
trying to create thumbnails in my input post_object fields with post_object result filter
function post_object_with_avatar( $title, $post, $field, $post_id ) {
$post_thumbnail_url = get_the_post_thumbnail_url($post->ID);
$avatar = '<div class="post_ava_prefilter_wrapper" title="'.$title.'">';
$avatar .= '<div class="ava_prefilter_wrapper"><img class="ava_square" src="'.$post_thumbnail_url.'" /></div>';
$avatar .= '</div>';
return $avatar;
}
add_filter('acf/fields/post_object/result/name=users_with_avatars_list', 'post_object_with_avatar', 10, 4);
everything works fine except one thing, I see this html code ($avatar variable returns) in the Title tag in every li.select2-selection__choice element, I understand why, because post_object_with_avatar function should return text instead of html code.
To be clear, every li has tag title=”<div class=”post_ava_prefilter_wrapper” title=”…”…>Could you suggest any solution please how to avoid inserting html in title tags ?
Everything works great I see thumbnails, except title tags.
Thank you
