Home Forums Front-end Issues Outputting custom image size


Outputting custom image size

  • Hey!

    I know there’s a similar thread on this, but I’m none-the-wiser and all the solutions for other cases don’t work for me. It’s quite a simple thing I’m trying to do.

    I have a custom thumb size set in WP functions called ‘slide-thumb’ and have set it up as a separate field to specify as it seems the only way, but ACF still won’t output it.

    My ACF loop is:

    <div class="flexslider">
    	<?php $thumb = wp_get_attachment_image_src(get_sub_field('thumb'), 'slide-thumb' ); ?>
    	<?php if(get_field('activity_slider')): ?>
                <ul class="slides">
    	<?php while(has_sub_field('activity_slider')): ?>
    <li data-thumb="<?php $image = get_field('photo'); echo($image['sizes']['slide-thumb']); ?>">
    <img src="<?php the_sub_field('photo'); ?>" alt="<?php the_sub_field('photo_title'); ?>" />
    <?php endwhile; ?>
    <?php endif; ?>

    Image field is set to Image ID and the thumb size shows as selected:

    Any help appreciated on getting the square thumbnail to be output.

    Thanks. Martin.

  • Hi,

    I had some issues with that to i actually set 3 different sizes
    “custom-thumb”, “feature-img” and “main-img” infunction.php but unlike what you said I use a single field which generate all 3 sizes.

    I set the return value to image ID

    and I am able to get the images in the front end like that:

    $attachment_id = get_field('you_field_name');
    //in the $custom_thumb var i get the custom_thumb infos replace "product-thumb with the name of your custom size you set in function.php
    $custom_thumb = wp_get_attachment_image_src( $attachment_id,"product-thumb" );
    //then you are able to output the following values from the $custom_thumb var:
    // the url: $custom_thumb[0];
    // the width: $custom_thumb[1];
    // the height: $custom_thumb[2];   
    //use these variable as you like on your html
    <img src="<?php echo $custom_feature[0]; ?>" />
    <img src="<?php echo $custom_thumb[0]; ?>" width="<?php echo $custom_thumb[1]; ?>" height="<?php echo $custom_thumb[2]; ?>" />
    //you can do the same with any other custom sizes or with the original sizes
    //just change the last argument "product-thumb" to what you need on that line (the $attachement_id should be declared as seen above).
    $your_var = wp_get_attachment_image_src( $attachment_id,"your-custom-size" );
    //then $your_var shoud have the data you want.

    you can still have different fields to upload your images and declare 3 times
    $attachment_id_1 = get_field(‘you_field_thumb’);
    $attachment_id_2 = get_field(‘you_field_feature’);
    $attachment_id_3 = get_field(‘you_field_custom’);

    but that’s only necessary if the images are different if it’s the same image the 3 sizes gets generated when you upload the first time.

    then to control the crop you can add that little plugin

    it does a good job.

  • Pirondini

    Thanks for the help! Your time is much appreciated.
    I’m still getting nothing returned in the src=”” field of the image.

    I have the image field in question set up as a set up as a repeater field. It’s a child of the main group called ‘activity_slider’ with the image field called ‘photo’. So,
    My code reads like this:

    $attachment_id = get_sub_field('photo');
    // the name of the sub field. Also tried without 'sub'.
    $custom_thumb = wp_get_attachment_image_src( $attachment_id,"slide-thumb" );
    // this is the name of the thumbnail size in functions.php
    <img src="<?php echo $custom_feature[0]; ?>" />

    Nothing is returned. Tried using $custom_thumb too, but no avail.
    This is what you said to do right?

    Thanks again. Martin.

  • is the following line missing in your code?

    while ( have_rows('your_repeater_row') ) : the_row();

    so you may want to try like that to get the sub field:

    <?php while ( have_rows('your_repeater_row') ) : the_row(); 
     $attachment_id = get_sub_field('photo');
     $custom_feature = wp_get_attachment_image_src( $attachment_id, "slide-thumb" );
     <img src="<?php echo $custom_feature[0]; ?>" />	
    <?php endwhile; ?>
  • Thanks for this snippet – it did the job! Appreciated. Martin

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

The topic ‘Outputting custom image size’ is closed to new replies.