I’m working on this site which displays a variety of images in a thumbnail size. These images are ACF Image Fields within a Repeater Field.
The problem I have is that I can’t seem to locate any arguments to optimize those image sizes. As a result, it’s loading them at their full size and being shrunk by CSS, resulting in unnecessary load time.
Can anyone direct me? Thanks!
<ul class="tabs">
<?php while(the_repeater_field('holt_management')): ?>
<?php $position_rendered = strtolower( str_replace( ' ', '-', preg_replace('/[^A-Za-z0-9]/', ' ', get_sub_field('position') ) ) ); ?>
<li>
<a href="#<?php print $position_rendered; ?>">
<?php if( get_sub_field('profile_picture') ): ?>
<img src="<?php the_sub_field('profile_picture'); ?>" alt="" />
<?php endif; ?>
</a>
</li>
<?php endwhile; ?>
</ul>
From the looks of that code you’re not actually calling any ACF functions at all? For example, if your images are set within a repeater field then you should be using get_sub_field() to grab either the image object, Image ID or Image URL. I would recommend setting your image field within your repeater to use image object as that gives you the most flexibility.
If it was me, I would do the following. I’ve assumed that the code to initialise and stop the repeater come before and after this chunk of code). I am also running under the assumption that you have set your image field to use the image object and that you have set an image thumbnail size in your functions.php file e.g. add_image_size( ‘my-thumbnail’, 240, 240, true );
<li>
<?php
$image - get_sub_field('my_image_sub_field_name');
echo '<img src="'.$image['sizes']['my-thumbnail'].'" />';
?>
<div class="project-description">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="meta-info"><?php echo get_the_term_list( $post->ID, 'locations', '', ', ', '' ); ?></p>
<a href="<?php the_permalink(); ?>" class="et-zoom"><?php esc_html_e( 'Read more', 'Vertex' ); ?></a>
</div>
</li>
I’m sorry! I pasted the wrong code. I’ve just updated it with the correct code.
