How to show Image from link field

Hello @sellernine,

You need custom code to display an ACF link field as an image. Here is the code:

add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
  $field_name = $attributes['fieldName'] ?? '';

  if ( 'your_acf_link_field_name' === $field_name ) {
    $field_value = get_field('your_acf_link_field_name', $post_id);
    if ( $field_value && ( $field_value['url'] ?? '' ) ) {
      $block_content = sprintf('<img src="%1$s" alt="%2$s" />', esc_attr($field_value['url']), esc_attr($field_value['title'] ?? ''));
    }
  }

  return $block_content;
}, 10, 4);

You can find more snippets in the plugin description.

Best, Phi.

I did added this code on my snippets plugin function.php
after that how to show image on Elementor editor?

I’m bit newbie please guide

• This reply was modified 2 months ago by sellernine.
• This reply was modified 2 months ago by sellernine.

Hello @sellernine,

Thank you for the details. You can’t use this block to display ACF fields in Elementor. However, you can create a shortcode with similar code to display your field in Elementor. Here is the adjusted code:

add_shortcode('shortcode_for_link_to_image', function( $atts, $content = '' ) {
  global $post;
  $field_value = get_field('your_acf_link_field_name', $post->ID);
  if ( $field_value && ( $field_value['url'] ?? '' ) ) {
    $content = sprintf('<img src="%1$s" alt="%2$s" />', esc_attr($field_value['url']), esc_attr($field_value['title'] ?? ''));
  }
  return $content;
});

You can use the shortcode shortcode_for_link_to_image in your Elementor site.

Best, Phi.

• This reply was modified 2 months ago by Phi Phan.

Directly showing [shortcode_for_link_to_image] on frontend instead of image

You should checkout this guide https://elementor.com/help/how-to-use-shortcodes/