WordPress.org

Ready to get started?Download WordPress

Forums

PB Responsive Images
[resolved] Newbie Instructions Needed (7 posts)

  1. outtacontext
    Member
    Posted 1 year ago #

    Like Jacob Dunn, I am a designer, not a developer. That doesn't mean I know nothing. But I'm having trouble moving forward and I need a little help.

    I have installed the plugin. I see in my htaccess file this rewrite: RewriteRule ^slir/(.*)$ Is this correct?

    Now I need to know the next steps. Just a simple list of things I need to do. Would that be possible?

    BTW, I am using a responsive theme, however, I am working on a section of the site that needs to be outside the design so I'm working on responsiveness from scratch.

    My working URL is http://outtacontext.com/wp2/
    The page in question is http://www.outtacontext.com/wp2/about/past7/

    All the other pages in this section (take, for example, http://www.outtacontext.com/wp2/about/past6/ are working fine responsively (without your plugin) just with the media queries I've put into the custom.css file. I thought you're plugin might just make everything easier.

    Thanks.

    Jeff

    http://wordpress.org/extend/plugins/pb-responsive-images/

  2. Jacob Dunn
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  3. outtacontext
    Member
    Posted 1 year ago #

    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?

  4. Jacob Dunn
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  5. outtacontext
    Member
    Posted 1 year ago #

    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>
  6. Jacob Dunn
    Member
    Plugin Author

    Posted 1 year ago #

    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 ;-)

  7. Jacob Dunn
    Member
    Plugin Author

    Posted 9 months ago #

    Marking this as resolved, let me know if you're still having issues!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic