Dynamic Content: choose image sizes?

Beta
#1

Hi,

The Looper is a great tool!

I’m experimenting with it now, and I’m wondering if there’s a way to set up the dynamic content in the Image or Featured Image elements to grab different media sizes (i.e., thumbnail, medium, full size etc) so that we can speed up load times with smaller images?

Thanks!
Carlos

#2

Hi Carlos,

Good point here. I’m going to add this as a feature request to dynamic content for images (since we’ve closed feature development) but it was a pretty quick adjustment for me to get in a stopgap that will work in the next patch. Once that’s out, try doing this:

  • Open up the Dev console (enable in Preferences)
  • Inspect your Image
  • Search the console for image_src
  • If you’re using Dynamic Content already, you should see something like: {{dc:post:featured_image_id}}
  • Add a size parameter like this: {{dc:post:featured_image_id size="small"}}

That size parameter will pull a thumbnail of the specified size for you. Again, won’t be in until the next patch, but hopefully that helps until we can take the time to build out some dynamic content controls to support it.

2 Likes
Featured Woocommerce image format in Archive Layout
#3

Fantastic!! Thanks!!

#4

You’re welcome!

#5

Hi

I have read the thread and managed to pull in the correct size using the Dev tool as suggested. Is this limited to the sizes that are set in the WordPress media settings?

I’ve added a custom size using the functions but when I try and use that size parameter i.e. {{dc:post:featured_image_id size=“large-square”}} it’s not working.

This is the function’s code

    // Additional Functions`Preformatted text`
// =============================================================================

add_theme_support( 'post-thumbnails' );
add_image_size( 'large-square', 1920, 1920, true ); // Hard Crop Mode

Is there something obvious I’ve done wrong here?

Thanks
Henry

#6

I think I found the solution

I added the function mentioned in this post and changed the name accordingly.

// Additional Functions
// =============================================================================

add_theme_support( 'post-thumbnails' );
add_image_size( 'square', 1400, 1400, true ); // Hard Crop Mode

function x_featured_image( $cropped = '' ) {

  $stack     = x_get_stack();
  $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

  if ( has_post_thumbnail() ) {

if ( $cropped == 'cropped' ) {
  if ( $fullwidth ) {
    $thumb = get_the_post_thumbnail( NULL, 'square-fullwidth', NULL );
  } else {
    $thumb = get_the_post_thumbnail( NULL, 'sqaure', NULL );
  }
} else {
  if ( $fullwidth ) {
    $thumb = get_the_post_thumbnail( NULL, 'square-fullwidth', NULL );
  } else {
    $thumb = get_the_post_thumbnail( NULL, 'square', NULL );
  }
}

switch ( is_singular() ) {
  case true:
    printf( '<div class="entry-thumb">%s</div>', $thumb );
    break;
  case false:
    printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
      esc_url( get_permalink() ),
      esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
      $thumb
    );
    break;
}

  }

}
#7

Hi @henrybag,

Glad you found it! That override is needed for the cases where the Layout builder isn’t being used.