Support

Account

Home Forums General Issues Gutenberg Block : Image not showing

Helping

Gutenberg Block : Image not showing

  • 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

  • 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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.