Jacob Dunn

Heh – you should be good to go on all points in the thread, actually ^_^

If you want to manually set options for this plugin in your theme, all you have to do is specify them via the RIP::set_options($options); method.

Example:

$formats = array(
   array("media"=>"" ,"query"=>"w368","fallback"=>true),
   array("media"=>"(min-device-pixel-ratio:2)" ,"query"=>"w736"),
   array("media"=>"(min-width:420px)" ,"query"=>"w833"),
   array("media"=>"(min-width:420px) and (min-device-pixel-ratio:2)" ,"query"=>"w1000"),
   array("media"=>"(min-width:885px)","query"=>"w1000"),
);

RIP::set_options($formats);

There’s also a RIP::reset_options(); function, if you’d like to reset settings to what’s in the admin, similar to how wp_reset_query() resets the query after a custom loop.

However, if you want to disable the admin page, the following code should do the trick:

$config = RIPConfig::get_instance();
remove_action('admin_menu',array(&$config,'admin_menu'));

You may have to execute that in the init hook, so keep in that in mind, as I haven’t tested it.

Let me know if that works!

**stealth edit: fixed code, syntactical sugar.

The css classes from the original image are instead applied to the wrapping span. Make it so your selectors are no longer img specific, but instead specific to an img inside that selector, and you’ll be good to go.

In retrospect, applying those classes to the generated image would not have been too difficult and probably would not have broken anything, but I was attempting to replicate the proposed standard – a bit too vigorously, it seems. I’d add it as an update, but it would be a breaking change at this point. I may add it as an optional toggle in the admin later on.

Marking this as resolved, let me know otherwise.

K gents,

I’ve released a new version of the plugin that should resolve all the issues with debug mode. Let me know if 1.4 doesn’t do it.

Enjoy!

Looking at those settings, you don’t actually serve retina specific images to iPhones at the moment. You only have one “min-device-pixel-ratio” query and it’s for screen sizes 640px and higher (iPhones weigh in at 320px wide).

Typically speaking, if you want to do high-res assets, you provide a counterpart “min-device-pixel-ratio” query for every single one of your media queries, so that you can get high res assets at any ratio. So, if you added the following below the “all” query:

media: (min-device-pixel-ratio:2) query:w600

That would get you high res assets for iPhone4+.

The other thing that may be causing issues is the actual size of the image. Is the image having to scale up at the screen-sizes you’re looking at? For example, at 419 pixels wide, you’re serving assets that are only 300 pixels wide – do you have 59.5 pixels of padding to either side of those images? It’s better as far as clarity goes for images to scale down, rather than up. So you should look at the largest size that will occur for any of your media queries, and set the image size accordingly. For example, if your images were to have 10px of padding on either side of the content, I’d set the “all” media query to:

media: all query:w400

Since your next media query is at 420px. (Technically I’d almost bump it up to 421px, as well, as the image is still sized correctly AT 420px. Minor quibbles at that point, though)

Hope that helps!

Heh. Well, if you’re editing the content in a php file, you’re more or less editing the theme. Regardless, in PHP, you’d use the following to achieve the example above:

$image = '<img alt="Dance Lesson illustration" src="https://outtacontext.com/wp2/wp-content/themes/sentence/images/past/past7b.jpg" border="0" />';

$formats = array(
   array("media"=>"" ,"query"=>"w150","fallback"=>true),
   array("media"=>"(min-width:767px)" ,"query"=>"w300",),
);

echo RIP::get_picture($image,$formats);

All of this is in the contextual help, as well ??

No other code should be necessary, if those images are in the post content. If that’s the case, then if you have the plugin active, those images should have been replaced with span tags with data attributes, though. How are you inserting those images?

Hey Jeff,

I’m more the other way around, actually – more developer than designer. Either way, if you have mod_rewrite enabled on your server (which, from your URLS, it appears you do) you should be good to go on the .htaccess. It’s only if no images show up after configuration that you should start to worry.

As far as the basics go, you’ll need a good grasp of CSS Media Queries to grasp the power of this plugin. You’ll use the media queries to specify how large the output images should be at any given screen size. We then use SLIR to dynamically resize those images on the server. That’s where the SLIR query on the right comes in.

So, as an example, we’ll construct two basic queries. We’ll go with mobile first, as that’s the best way to go, in general:

Media Query: all
SLIR Query: w150

This will size all images to a maximum width of 150. Don’t worry, we’ll size them up with:

Media Query: (min-width: 767px)
SLIR Query: w300

That pairing will size all images to a maximum of 300 pixels wide when the screen is above 767px in width.

You’d want to customize that for your design in general, I’m sure. As a note, all of the settings in the admin are only applied to images inserted via the_content(). For theme author inserted images, you’ll need to use one of the utility methods provided. I can give further details, but you should check out the help menu on the upper right of the settings screen to see if it can help you out first.

Hope that helps!

Glad I could help!

Cool. I’ll pull the latest build into debug mode and see if I can take care of those issues. Thanks for the heads up!

I updated to the latest version of WordPress locally, and am seeing no errors as of yet.

Were there any other plugins installed on the previous iteration? There may have been a conflict. The other cause is you may have been running WordPress in debug mode – I’ll test in that here shortly to confirm.

However, all of that aside – I’m changing the call location of wp_register_script to suppress that notice, should that have been the cause of the issues. Once I’m done testing the rest of my changes, I’ll push an update this weekend at some point.

That’s the very thing this plugin was built for! You provide media queries for the image resizes in the same way you do for stylesheets. From the contextual help:

(min-width:420px) and (min-device-pixel-ratio:2)

The above query matches any retina display (2x pixel density) device with a minimum browser width of 420px. Additionally, the min-device-pixel-ratio query will automatically have vendor prefixes applied to it.

All you have to do is make sure your original image is sized correctly for retina, and this plugin will take care of sizing it down for all other resolutions and sizes.

Hope that helps!

Sure – it’s in active development, I just haven’t had time to push any updates lately. I’ve got a couple of other features in the works, just need to test them across environments.

As to your error – I haven’t seen that before. When I have a moment tonight I’ll see if I can reproduce it with the latest version of WordPress.

Ok, well that clears it up. It’s working in IE9, but IE8 is in fact failing – an oversight on my part. The reason I hadn’t noticed on my site is we keep the media query on the fallback image blank, which works in IE8 and below. I’ll take a look at your merge for sure, and see if there’s a way to integrate it with the functions and administration. Thanks for the feedback!

I just did a check with the current build and it all checked out on IE6/7/8. Do you have a live link showing your issue? And what version of IE are you seeing this on?