Responsive images (srcset) and WordPress 4.7

[davidvandenbor]

How can this bug be reproduced?

• Fresh install of FoundationPress (dec 26 2016)
• Latest version of WordPress (4.7)
• activate FoundationPress theme in admin
• Upload an image via the WordPress admin (either through te image uploader or when editing a post or page)

What I expected to happen?
WordPress generates the differently sized versions of the image in the uploads folder

What happened instead?
WordPress just uploads the original image exactly as is, and doesn't generate the different image sizes(?)

Is this the default out-of-the-box behaviour of FoundationPress? Should I change a default setting somewhere? Are the different image sizes not needed?

Kind regards and thanxx in advance :-)
David van den Bor

[olefredrik]

Hi @David-van-den-Bor

It should work as you describe. I just uploaded a big image to a fresh install, running on WordPress 4.7. In my wp-content/uploads, I can see different sizes of the image I just uploaded.

If you haven't modified functions.php or responsive-images.php this should work out of the box for new uploads.

Please note that enabling FoundationPress will not do anything to your existing images that's already in your wp-content/uploads directory. I will recommend using a plugin such as Regenerate Thumbnails (1+ million active installs, 4.7 rating). This plugin is very handy if you're switching to a new theme with different image settings.

[davidvandenbor]

Hi Ole!
Thanx for your fast reply. OK, I see, it should work out of the box. Weird. Maybe there's a problem with my dev environment (localhost server, or PHP setup or AMPPS configuration) This is the second site i've build with Foundationpress with the multiple image generation problem.

I'll keep looking into it.
Thanxx, David!

[davidvandenbor]

OK, just checked: the problem ONLY occurs when I'm developing localhost in AMPPS (Mac Osx Sierra) When I migrate sites to online (from local to online) the IMAGE generation WORKS online!

hmm. I'll keep looking into this.
Thanxx, David!

[dantahoua]

So seems GD extension is not active on your local PHP settings! :)

[davidvandenbor]

Hey Ole!
CONFIRMED! You were right :-)

Image versions are generated and are loaded depending on viewport size. I take it that SRCSET is a different approach from Foundations Interchange.js? I have Interchange disabled, but SRCSET still works, because it uses PHP to conjure up and display the generated images.

Regards and thanxxx!
David!

[olefredrik]

@David-van-den-Bor : Great! Interchange uses media queries to dynamically load responsive content that is appropriate for the user's device. For images, I think that using srcset is a better approach. But interchange can still be used for html and background images.