In the end I have gone with option 1 – tedious but effective
Hi John
Ah I see – I completely mis-understood
Thanks
Sheree
EDIT –
It actually is working sorry! It wasn’t displaying for an entirely different reason
Apologies
*** original question ***
Hi John
I know this solution is really old but is it still valid?
I am trying to get it to work with a slider using a repeater field from an ACF options page like below but it returns nothing?
I cant see what I am doing wrong
<section class="latest-publications">
<h2>Latest Publications</h2>
<div class="pink-divider"></div>
<div class="publications-row">
<div class="posts-carousel">
<?php if (have_rows('publication', 'option' )) {
$count = 1;
while (have_rows('publication', 'option')) {
the_row();
?>
<div class='publication-slide'>
<a href="/publications#<?php echo sanitize_title( get_sub_field( 'publication_title' )); ?>" target="_blank"><?php the_sub_field( 'publication_title' ); ?></a></h4>
<?php the_sub_field( 'publication_description' ); ?>
<p class="icon-date"><?php the_sub_field( 'date' ); ?></p>
</div>
<?php $count++;
if ($count > 3) {
break;
}
}
}
?>
</div>
</div>
</section>
Yeah maybe, though the doesn’t explain why it differs when using the thumbnail size. Very strange!
Hi john,
When you inspect it, if you hover over each URL a wee dialogue box shows the details of the image including the natural (intrinsic) size if the image.
I have changed the bottom one to ‘Thumbail’ for the size to demonstrate. You will see that now when you hover over the URL it shows the intrinsic size as 150 x 150 because that is the size of the ….150×150.jpg image it’s using
But if you look at the sizes on the upper image which is set to medium, it always shows the dimensions for the largest image, almost as if it’s not actually using the smaller one. It does the same for my custom image sizes and I can’t work out why.
Hi John
Thanks so much for that code, I added it today and it’s fetching the title which is brilliant.
I am still struggling with the srcset images though.
If you look here (it’s a tiny url to bypass the coming soon page and to stop the domain coming up in search results)
tinyurl.com/8kvx77u8
You’ll see the 2 identical images of food stacked on top of eachother. When you inspect them, the size is listed as 741 x 1000 which is correct BUT when you look at the src image, even though the file name has -741×1000.jpg at the end of it, the intrinsic size is actually the full size? It’s the same for every image listed in the srcset?
it does this if I have it set to medium or home_portrait but not if I switch it to thumbnail
I’m sorry if the answer to this is in the comments you have already made but I jusy don’t get why? If I copy one of the URLS and paste it in a new window, the dimensions of the image appear to be correct so I don’t get why the intrinsic size seems to be listed wrong?
Am I missing something here?
Hi John,
My image dimensions aren’t 1000×1000, it’s actually just a portrait image but I wanted it to display with a max height of 1000px and I figured the width could then never exceed that given it’s taller than it is wider so I just did a max width of the same. I have read somewhere that you can do 1000 x 9999 aswell?
I just wanted a max height of 1000px and I don’t care what the width is because I am using object fit:cover anyway.
If I add more sizes that all use 9999 as the width, will they be considered the same ratio and show up?
If not, because I am using object fill for all my images except in the gallery, I suppose I could just make them all an equal ratio that was good enough anyway, close to 1:1 but maybe something a little more in line with Landscape or portrait.
Sorry, I appreciate your patience.
Hi John,
Sorry for my confusing posts!
I will have to try this in the morning, but to start, I made my custom image 1000px by 1000px. Even though this is a different ratio from the original size, this seems to work now?
I thought it would just choose which hit 1000px first (the width or the height) and the other would be proportionate. For example, one of my ACF fields uses my custom image size and now outputs this which seems to be doing as I described
img width=”741″ height=”1000″ src=”https://www.website.com/wp-content/uploads/2021/08/website-image-741×1000.jpg” alt=”Image of dish” followed by all the other sizes
I need to make the other images sizes more custom, they are all theme defaults except the home_portriat one of 1000px by 1000px. Is this not correct?
I have found the whole responsive images side of ACF incredibly confusing. I understand srcset and retina image when defining set images in html but I can’t get my head around how to use them with ACF.
I was expecting it to be something that looked a little more like media queries, a bit like
$home_portrait[‘sizes’][‘medium’]
@media (max-width:480px) {
$home_portrait[‘sizes’][‘small’]
}
that kind of thing (I realise this code is just completely invented but it’s just to illustrate how I thought it would work)
I also would have preferred more control because I am using object fit for images which complicates things a little.
I got this working in the end by changing my functions php to:
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop
// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'home_portrait' => __( 'Home Portrait' ),
) );
Though I am still unsure why the initial code did not work
After understand Srcset a bit more I see I don’t really need to do anything – the srcset attributes are generated automatically.
However I still can’t understand why my custom image size is not working
Hi John
I am very sorry, I did not see this reply until just now!
I found a solution but not a great one, so I will try this.
Sheree
After all that – I realised I had the field value set to label not value!
Solved – I had missed a closing bracket AND entered a value for the last if/else statement
Apologies the undefined function is not the error – it is a critical error that takes the site down
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.