Hi @rongvang, I tried several things. Maybe my results can help you further (I guess there is also an AFC url casting function like in my approach C).
In short:
getting the image url is possible but my approach is still not working correctly (see approach C below). But I got something else working with the built-in Featured Image (see approach B below). I will see how far I come with it to serve my requirements --> inside the wordpress loop for 1 to many posts it should be okay at the moment.
I apprechiate any suggestions and corrections of my code, due to coding is not my area of expertise and I guess there could be side effects I cannot see.
In more Detail:
the following is a summary of testing several approches.
A) using custom field (type: custom image) (this is the issue we try to solve)
Pro: using Blocs nativ without “hacking”
Con: not working => custom image field returns id instead of the url
- create custom post type within Blocs (export theme to make it accessible in wordpress)
- create custom field with image type inside wordpress with AFC, Metabox, …
- assign custom field with image type inside wordpress to custom post type
- in Blocs declare your custom image field
- set the column Wordpress Loop to your custom post type and for your image data source choose your custom image field
B) using built-in featured image (currently the only working way for me)
Pro: using Blocs nativ without hacking
Con: no custom image types possible, just one image usable
- create custom post type within Blocs (it has “featured image” like normal posts, that my Metabox Plugin has not)
- in wordpress just use featured image for inserting your image
- in Blocs set the column Wordpress Loop to your custom post type and for your image data source choose “Featured Image”
C) using code bric to re-assign image source url (still trying to get it working)
Pro: (if working) using custom image types until Blocs has native support
Con: not native Blocs, semi-working-> problems with active lazyload, native wordpress function call issuses, change php files manually for working
- create custom post type within Blocs (export theme to make it accessible in wordpress)
- create custom field with image type inside wordpress with AFC, Metabox, …
- assign custom field with image type inside wordpress to custom post type
- in Blocs set the column Wordpress Loop to your custom post type and for your image data source choose “Local”
- insert a code bric below your image bric
- set the id of your image bric to be able to address it inside the code bric
(in my example id = testimage)
- using the code that fits for you:
a) use Metabox helper functions
put the code inside script tags
var image = document.getElementById('testimage');
image.src="<?php echo rwmb_meta( 'event_image', array( 'size' => 'medium' ) )['url']?>";
b) or Wordpress helper functions
put the code inside script tags
var image = document.getElementById('testimage');
image.src="<?php echo wp_get_attachment_image_url( get_post_meta(get_the_ID(), 'event_image', true), 'medium' );?>";
remaining issues approach C):
-
works only with deactive lazy load => Workaround: instead of using script, set the code manually to the “img src” attribute inside the corresponding php file (need to be done after each export).
-
by using wordpress helper functions the last post has the same image like the first post => I guess it has something to do with the wp loop and code execution timing.
Thank you