-
Hi,
My scenario is that I want to allow the user to either add an image or a video to a section via an ACF custom field.
The configuration I have so far in ACF is:
– ACF Group field called Hero Media
– Inside Hero Media is a Radio Button field called Media Type. This has 2 values Image or Video.
– Inside Hero Media is a Image field called Hero Image which is configured to be conditionally visible when Image is selected in the Media Type field
– Inside Hero Media is a File upload field called Hero Video which is configured to be conditionally visible when Video is selected in the Media Type field.Now to output these in the Generatepress template I assumed I need to use a GB Query Block. And I believe the correct syntax for displaying a ACF Group field would be hero_media.hero_image. However, when I tested this by uploading an image to the Hero Image field nothing was displayed on the frontend.
I’m not sure I have the right settings in the Query Block, these are my main settings:
However, I don’t have anything in the Loop Item, should there be something in there?
Thanks.
-
Hi there,
Simply use a GB image block, and set its dynamic tag to
{{post_meta key:hero_media.hero_image}}.And make sure in ACF, the image field’s return format is set to URL.
-
Thank you this works great, I added the {{post_meta key:hero_media.hero_image}} to the inline background image for the container. I then used the display conditions to hide/show the container depending on if the field had a value or not.
How would I achieve the same for a background video on the container? -
I think you will need to add a text block into the container, and use the text block to pull the video, and absolute positon the text block inside the container.
You can pull the video first. Once it’s pulled, let me know; I can take a look at the positioning.
-
I’m using the File field for the video and trying to output it in the Text field Dynamic tag with {{post_meta key:hero_media.hero_video}} but nothing is displaying.
The return value is set to File Array in the ACF File Field settings.
-
Hum…In this case, I think the text block can only pull the URL of the video if you set the return format to URL, but it can not output a video, unfortunately!
-
Yes it does output the URL. Just wondering how we could use that URL and add it to a video player. Would a video tag work inside a HTML block, like so?
HTML Block <video><source src="{{post_meta key:hero_media.hero_video}}" type="video/mp4"></video>I’m guessing not.
-
The dynamic tag can not be used in HTML block.
Try this PHP code to generate a new dynamic tag called Hero video, apply it to a text block, and set the text block’s HTML tag to
div.add_action('init', function () { // Check if the GenerateBlocks dynamic tag class exists if (! class_exists('GenerateBlocks_Register_Dynamic_Tag')) { return; } // Register the dynamic tag new GenerateBlocks_Register_Dynamic_Tag([ 'title' => __('Hero Video', 'generateblocks'), 'tag' => 'Hero video', 'type' => 'post', 'supports' => [], 'description' => __('Displays hero video file.', 'generateblocks'), 'return' => function () { // Get the ACF video field value $video_url = get_field('hero_media_hero_video'); // If no video exists, return nothing if (empty($video_url)) { return ''; } // Return video HTML return sprintf( '<video loop muted autoplay playsinline class="background-video"> <source src="%s" type="video/mp4"> </video>', esc_url($video_url) ); } ]); }); -
Thanks so much that has worked!
Only small isue now is when there is no video file selected there is still a white gap where the video would be displayed, its 157px tall. Not sure if the video tag inside the text block/div is expanding the height even when empty?
-
Can you show me a screenshot of the empty space on your site? thanks!
-
Please have a look at the URL in the private information. The space sits above the Google map about half way down the page.
-
I’ve updated the code, can you give the new code a try?
-
Perfect, thank you.
-
No Problem 🙂
- You must be logged in to reply to this topic.