Advanced custom fields and thumbnail size (WordPress)

1 Views

My client has a website which lists 3 thumbnails, this is great but I need to get a cropped version of the thumbnail rather than the default thumbnail. The thumbnail class is called “type-one”. 

<?php 
        $i = 0;
        //$query = new WP_Query( array('category_in' => array_merge(array('6'),$subcats)) );
        //$query = new WP_Query( 'post_type=page&post_parent=35&posts_per_page=3' );
        $query = new WP_Query( array(
            'post_type' => 'page',
            'post_parent' => 35,
            'post__not_in' => array( $post->ID ),
            'posts_per_page' => 3
            )
        );
        if ( $query->have_posts() ){
            while ( $query->have_posts() ){
                $query->the_post();
                $fields = get_fields();
                $i++;
    ?>
        <div class="large-4 medium-4 small-6 columns">
        <?php if( $fields['featured_image'] ) { ?>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php echo $fields['featured_image']['url']; ?>" alt="<?php echo $fields['featured_image']['alt']; ?>" class="margin-bottom" /></a>
        <?php } ?>
            <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
            <?php echo $fields['introduction']; ?>
        </div>

    <?php
    } // while
    } // if have posts
    ?>
Post Views: 1

Related posts

4 comments

  1. Print out the $fields array to see what you’re working with. With Advanced Custom fields there is a ‘sizes’ array on image fields –

    <?php echo $fields['featured_image']['sizes']['thumbnail']; ?>

  2. You can use set post thumbnail size for Crop the image feature image

    To be used in the current theme’s functions.php file. 

    add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );

    Note: This function will not resize your existing featured images.

    In your functions.php, paste one of these and adjust pixel width and height to your liking.

    Set the default Post Thumbnail size by resizing the image proportionally (that is, without distorting it): 

    set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

    Set the default Post Thumbnail size by cropping the image (either from the sides, or from the top and bottom): 

    set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

    Hope this help you well!

  3. Place this in function.php ,

    function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }
    $catalog = array(
        'width'     => '400',   // px
        'height'    => '400',   // px
        'crop'      => 1        // true
    );
    $single = array(
        'width'     => '600',   // px
        'height'    => '600',   // px
        'crop'      => 1        // true
    );
    $thumbnail = array(
        'width'     => '120',   // px
        'height'    => '120',   // px
        'crop'      => 0        // false
    );
    // Image sizes
    update_option( 'shop_catalog_image_size', $catalog );       // Product category thumbs
    update_option( 'shop_single_image_size', $single );         // Single product image
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Image gallery thumbs
}
add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );

Comments are closed.