Outputting custom image size

• martindm

• April 8, 2014 at 8:25 am

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'); ?>" />
							
				</li>
				
<?php endwhile; ?>
						
		</ul>
					 
<?php endif; ?>
					

	</div>

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

http://imgur.com/puSq8OE
http://imgur.com/km57S9L

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

Thanks. Martin.

• l.pirondini

• April 8, 2014 at 9:49 pm

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]; ?>" />

//or
<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

http://wordpress.org/plugins/manual-image-crop/

it does a good job.

• martindm

• April 9, 2014 at 2:10 am

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.

• l.pirondini

• April 9, 2014 at 2:39 am

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; ?>

• martindm

• May 10, 2014 at 10:18 am

Thanks for this snippet – it did the job! Appreciated. Martin