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!
Well, I sort of get it. I understand media queries. That’s no problem and I’ve coded them on other sites.
What I don’t understand is where would this code go:
Media Query: all
SLIR Query: w150
My theme is already responsive. So I don’t have to worry about theme author inserted images. My problem is just with the images on this page: http://www.outtacontext.com/wp2/about/past7/
So, as you said my .htaccess file seems fine to go. Now, I just need to know where to insert any other code that will make your plugin work. Do you know what I’m saying?
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?
Manually. For example, here is my code for one page (remember, this isn’t in the theme per se. I created another template just for this section. So I’m putting in the images in a new folder and linking to them in the html. Like this:
<div id="table">
<div class="row">
<div class="cellleft"><a class="nounderline" href="http://outtacontext.com/wp2/past8"><img alt="Dance Lesson illustration" src="http://outtacontext.com/wp2/wp-content/themes/sentence/images/past/past7a.jpg" border="0" /></a></div>
<div class="cellmiddle">
I majored in Political Science and my first roommate's name was Rick Gates. He was from <a title="DeTour Village" href="https://maps.google.com/maps?q=DeTour+Village,+Michigan&hl=en&ll=45.984558,-83.873062&spn=0.157687,0.382118&sll=38.899672,-77.024424&sspn=0.022077,0.047765&hq=DeTour&hnear=Michigan,+Nelson,+North+Dakota&t=m&z=13">DeTour Village</a>, Michigan (on the tip of the Upper Peninsula). Back then, the golf course on nearby Drummond Island doubled as the airport.
Rick was tall and lanky and I was, well, not. Yet, no one in our dorm could tell us apart. Everyone called me Rick. This was my first identity crisis. Little did I know my name and looks would lead me to others...
</div>
<div class="cellright"><a class="nounderline" href="http://outtacontext.com/wp2/past8"><img alt="Dance Lesson illustration" src="http://outtacontext.com/wp2/wp-content/themes/sentence/images/past/past7b.jpg" border="0" /></a></div>
</div>
</div>
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="http://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 😉
Marking this as resolved, let me know if you’re still having issues!
