Docs

[waterbarry]

Hi ,

I’m using ethos for a woocommerce site.

Our product images are various sizes, but I want them to show the same size on listing pages

To that end I’ve used this bit of code:

ul.products li, .entry-product {
    height: 229px;
}

Which is a step in the right direction, but I want to middle align the images.

I’m looking to add a “helper” span per this instruction: http://jsfiddle.net/4RPFa/61/

Can you direct me to the php file where I could wrap the images in a span like that?

Alternatively if you had another suggestion for achieving this it would be greatly appreciated 🙂

[waterbarry]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! To wrap an image in a <span> then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$(".entry-product .entry-featured a img").wrap('<span class="imageWrap"></span>');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[waterbarry]

Hi Nabeel,

Thanks for the reply.

I’ll definitely use this, but I was hoping to avoid adding script if possible.

Could you point me to a php file that structures product listings, so I could maybe poke around in it and see what I can do?

[Rad]

Hi there,

You may add this code to your child theme’s functions.php with your changes

  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, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', 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;
      }

    }

  }

Example,

  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, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }

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

    }

  }

Thanks!

[Author]

Posts