I thought I would share an update on my problem.
It actually turned out that the Jetpack Photon CDN worked with my original code. However, it broke the responsive image update in WP4.4 – only delivering the original size image.
I haven’t been able to figure out a way to fix this but looking at the code on my start page (not using the ACF-plugin) it returns the image with a resize “value” and on the pages using ACF it returns with a fit “value”. Don’t know if this has anything to do with it but someone else might have an idea?
Start page:
http://www.tor-bjorn.com
ACF page:
http://www.tor-bjorn.com/works/massage+context
<?php echo apply_filters( 'jetpack_photon_url',wp_get_attachment_image(get_field('hero_image_3'), 'full', 0, array('class' => 'bilder2'))); ?>
This code shows the site correctly but I’m not sure Photon actually is working? (PageSpeed gives me the same result as the original code)
Hi!
Could someone help me out with getting photon working for me. My code for ACF images looks like this:
<div id="section-2" class="wrapper">
<div class="wrapper2">
<?php echo wp_get_attachment_image(get_field('hero_image_2'), 'full', 0, array('class' => 'bilder2')); ?>
</div>
</div>
I understand that I need to add
apply_filters( 'jetpack_photon_url')
but I’m not really sure how.
Much appreciate some help!
Thank you for replying NatHobson!
I’m not really sure I understand exactly how the lazysizes-plugin works/will help me but I trust you do 😉 Will it handle the sizes attribute for me?
Right now I’m using this wordpress plugin for lazy load that I found works for custom fields which I then guess I won’t need anymore?
https://sv.wordpress.org/plugins/lazy-load-enhanced/
Right now the code I use to load the image field looks as follows:
<?php echo wp_get_attachment_image(get_field('hero_image_3'), 'full', 0, array('class' => 'bilder2')); ?>
I can’t figure out how to implement the code you provided in order for it to work on my website. The ID parameter is not in the code I use right now. Am I right thinking this is the issue?
Okay! I feel like a fool 🙂 That explains why me playing around with sizes in the Developer Tool didn’t change a thing.
Right now this is the values that I have for sizes
sizes="(max-width: 1920px) 100vw, 1920px"
I’m still trying to get my head around how the “break points?” actually work but I guess this is the reason why it’s either the 800×533 or the full size (1920) image that is being loaded?
Where in my code would I be able to customize this? The image size is always 75% so if I understand it correctly that should be my value for sizes?
Much appreciate all of the help!
Thank you for the feedback NatHobson. Something (cant’t remember what) was broken on that page. I haven’t implemented your code but the distortion is no longer there.
However, I’m still struggling to get a smaller size image to load. I have been playing around with the sizes-property but I’m starting to doubt that’s actually the issue here. I can see that the different image sizes is “loaded” under img scrset but the browser doesn’t seem to be able to access them.
What am I missing?
http://www.tor-bjorn.com/works/human-nature
Thank you so much! That took me somewhere!
However the resizing of the images doesn’t seem to work properly. The images seem to be stuck at a low resolution. Have I missed something?
http://www.tor-bjorn.com/works/human-nature
Hi,
This looks like it is exactly what I’m trying to do but I can’t seem to get it to work. I’m not a very experienced code writer. Sorry for that 🙂
I have added timstl’s function-code to my function.php and then in my template added:
<div class="wrapper">
<div class="wrapper2">
<img class="bilder2" src="<?php echo wp_get_attachment_image(get_sub_field('hero_image'), 'full'); ?> </div>
</div>
Also I have changed the field to return image ID. But it doesn’t seem to work for me.
Anyone who could point me in the right direction?
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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.