Adaptive Images

1

Does anyone use the adaptive images solution by Matt Wilcox successfully? Or another solution to scale images also weight-wise?

2

I used https://github.com/tubalmartin/riloadr on a few sites, tricky but decent if you don’t mind a JS solution.

3

Thx cfx. Looks pretty complicated compared to the adaptive images solution at first sight. I’llhave a closer look at it shortly.

4

I have started to use picturefill some time ago, you can maybe check it out: http://scottjehl.github.io/picturefill/

This is what I found as simplest thing for me to use, I have wrote a blog post on how I use it while developing WP themes, check it here: http://www.bobz.co/responsive-images-picturefill-wordpress-theme-development/

Anyway I end up in creating a bunch of images, retina, responsive… f** man, life was easier few years ago :slight_smile:

5

Thanks, bobz_zg, I#ll check that one out too!

6

There was actually a WP plugin wrapper for adaptive images (pulled due to GPL/CC3 license incompatibilities) that I tried to implement recently but was conceptually stumped on how to deal with retina thumbnail sizes. I’d like to give it another shot as I’ve learned a bit since then but I had to move on. For now, I’m serving ginormatron images smaller screens. Sorry small screens.

No. Doubt. When you add the art direction component to responsive images, things get out of control quickly. If art direction and retina support is required, you can’t use libraries like TimThumb for crops and Matt Wilcox’s solution caused pains.

On http://www.ecotrust.org we’re using:

  1. WP Retina 2x for retina sizing
  2. Ajax Thumbnail Rebuild vs the classic Regenerate Thumbnails because it allows you to regenerate specific sizes alone and we have about 10 registered sizes that seemed to change a lot during development/design
  3. Manual Image Crop to manually draw the crops for specific sizes. Totally required for art direction.
  4. Theia Smart Thumbnails to automatically set the ‘focal point’ for image crops. This $12 plugin is very cool. Ensures the key elements of an image are in all crops. With 10 sizes, we couldn’t manually crop all of them (nor do we need to) and this plugin ensures that at the very least the focal point of the image is in the auto crop.
  5. Enable Media Replace to swap out images (handy for authors but they have to regenerate the images and the crops)
  6. plus a few custom JS solutions for different bits around the site.

IT IS TOTALLY OUT OF CONTROL! Then add SVG and wahhhh. I think I spent more than a quarter of my development time dealing with images. Granted, it’s an image heavy site but dayum.

I hope WP4 addresses images deep in core. I hate to see core blow up and love the idea of extensibility but images, responsive images and retina screens are here to stay. I feel like the functionality we added with those 5 plugins should all basically be a part of the media library. There’s nothing crazy there.

Sorry for the tangent.

7

Great info @willthemoor , will have a look at your solutions shortly!

8

@will​themoor OMG :frowning:
I personally don’t like plugins, I try to include everything in theme files, I have my fork of roots with everything I need included.
For retina I have set it up like in tutsplus tutorial: http://code.tutsplus.com/tutorials/ensuring-your-theme-has-retina-support--wp-33430

9

I’ve traditionally not been a huge fan of plugins either, particularly on 100% custom sites for organizations where you’re pretty sure no one is going to play around with new themes (and lose all the functionality you baked into the theme).

I changed that to some extent on this site for a few reasons.

  1. There was a lot of functionality that I built for this site that I know I will want to use again for other Ecotrust sites. I put as much of that as I could into a few (semi-bloated) plugins. Really just the same thing as functions.php but totally theme independent and requiring zero hackery/cut-and-pastery® to include in the next site. Hat tip to the Roots team for making functions.php a module loader — that set my mind in the right place to begin with though custom.php grew a little out of control towards the end. : )

  2. To a very large extent, I’m hands off on the actual day-to-day running of this site. Plugins allow you to expose a lot of functionality to WordPress admins and authors. As an example, the manual method you linked to for creating retina images is sweet but it doesn’t offer any feedback to uploaders or admins if the image they uploaded isn’t big enough to create a retina version. WP Retina gives an indicator for every image in the library at every image size registered. Coupled with the Replace Media plugin, it’s easy for someone to spot a trouble image and replace it with a larger one.

  3. Time. I just don’t have the time or budget (or skills in some cases) to create something like a graphical image cropping plugin!

PS. Another thing I’d love to see in WP4 core is the ability to register image sizes per post type.

10

Let me know if you want a copy of the Adaptive Images wrapper for WP. I can email it or something.

11

We use the adapative images script on:

http://www.macpactor.co.uk

Works a treat for the mobile viewport!