Gutenberg Block : Image not showing

• jeremy_o

• November 4, 2020 at 10:03 pm

Hi,

I’ve created a Gutenberg Block using ACF register Block which displays the entries of a custom post type (‘vibes’). When using the block (frontend and backend) I can’t see the image field (‘image’). The weird thing is, the image is correctly displayed when I visit the single ‘vibes’ page…

Below is my php files to register block and the template used to display the blocK :

// Register a display cpt blocks.
function sp_display_vibes_reg_blocks() {
  // check function exists.
  if( function_exists('acf_register_block_type') ) {
    acf_register_block_type(array(
      'name'            => 'display-vibes',
      'title'           => __('Display Vibes'),
      'description'     => __('A custom block to display Vibes.'),
      'render_template' => plugin_dir_path( __FILE__ ) . 'template.php',
      'category'      => 'formatting',
      'icon' 		=> 'lightbulb',
      'align'	        => 'center',
      'supports'	 => array(
        'align' => true,
        'mode' => false,
        'jsx' => true
      ),
      'enqueue_assets' 	=> function(){
        wp_enqueue_style( 'display-vibes', plugins_url( '/assets/css/styles.css', __FILE__ ), array(), '1.8.1' );
      },
    ));
  }
}
add_action('acf/init', 'sp_display_vibes_reg_blocks');
?>

<?php
/**
 * Block Name: Vibes
 *
 * This is the template that displays the vibes loop block.
 */

$argType = get_field( 'loop_argument_type' );
if( $argType == "count" ) :
  $args = array( 
    'orderby' => 'title',
    'post_type' => 'vibes',
    'posts_per_page' => get_field( 'vibe_count' )
  );
else:
  $vibes = get_field( 'select_vibes' );
  $args = array( 
    'orderby' => 'title',
    'post_type' => 'vibes',
    'post__in' => $vibes
  );
endif;

$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

$the_query = new WP_Query( $args );
  if ( $the_query->have_posts() ) : 
  ?>
    <div class="vibes <?php the_field('vibe_style') ?>">
    <?php
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <div class="vibe">
        <?php the_post_thumbnail('post-thumbnail'); ?>

        <div class="">
          <?php 
          if( $image ) {
              echo wp_get_attachment_image( $image, $size );
          } ?>
        </div>

        <h3>
          <?php the_title(); ?>
        </h3>
        <?php the_field('vibe_subtitle'); ?>
        <?php the_content(); ?>
      </div>
    </div>
    <?php endwhile; ?>
<?php endif;?>

I’ve tried different variants (array, ID, url) to display the image… same result in the block. Is anybody has an idea?
Thanks by advance

• dareadel

• December 19, 2020 at 12:32 pm

I don’t know if you resolve this already but I have a similar problem and this is what I used the ID variant for this line of code:

<?php echo wp_get_attachment_image( $image, 'full' ); ?>

This finally worked for me.