Responsive Theme Design: how have slideshow on desktops/tablets and static photo on mobile using same template?

2 Views

I am building my first responsive WP site with my own custom WP Theme. The primary templates are part fluid, part fixed. This enabled me to create only 3 “versions”, a desktop, tablet and mobile version. All changes happen due to media queries. (Sizes are 768 to 1200 px for desktop, 530 to 767 for tablet, 300 to 529 for mobile.)

The homepage (which has it’s own template) will show a slideshow. The slideshow claims to be responsive (I haven’t set it up yet) and I am anticipating it working through the tablet sizes. But when I get to the mobile size I just want to have a static photo.

Read More

I don’t want to just use “display:none” for the slideshow as it will still eat up space/power for the mobiles. I DO want to keep all the versions on the same templates, so I’m thinking I’m going to need some php or javascript to make this happen. (Unless there’s some other way, which I’d be thrilled to hear about!)

Can anyone help with the code? I have a slideshow div in the CSS: 

#slideshow { 
height: 296px; 
margin: 20px 20px 10px 20px; 
padding: 0;
background-color: #f00;
}/*by not setting a width the sshow box fills the space minus the margins*/

and in the template the slideshow shortcode or template code will go between the open and close slideshow div tags. But I would also want to place a photo there for the mobile version. So I think I would need some kind of “if 529px or more, get slideshow; if less, get photo” right? I’m not a php or javascript programmer, tho I’m great at cutting and pasting!

The site is viewable at http://66.147.244.110/~rdbikeco/ — we are now at the stage of adding page content and the blog needs attention and the sidebars need work, etc. But shell pages are up and content is getting loaded as I write.

Help greatly appreciated!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Do not use server side browser sniffing. It will fail:

    The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can’t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, these are easily spoofed in browsers, so they can’t be relied upon, and they don’t tell the truth, anyways. “Browser sniffing” has a justifiably bad reputation, so is often renamed “device detection” these days, but it’s the same flawed concept.

    The $is_iphone variable @kaiser recommends is flawed (sorry, kaiser, hope you don’t mind :)).

    Let the browser decide instead, use the really available space.
    First add a meta element to your document head to make sure the visible width matches the device width:

    <head>
    <!-- other stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi">
</head>

    Then set a target for your slider content:

    <div id="dynamicimgaes">
    <img id="slideshow" src="path/to/default/image" alt="" />
</div>

    In JavaScript you can use the device width now to decide if you show the slider.

    Here is a jQuery example (untested, feel free to edit until it works):

    <script type='text/javascript'>
if ( 480 < jQuery( window ).width() )
{
    jQuery(document).ready( function()
    {
        jQuery.get(
            'http://path/to/slider/content',
            function( data )
            {
                jQuery( "#slideshow" ).replaceWith( data );
            }
        );
    });
}
</script>

  2. This answer is only here for historical reasons (and because it’s mentioned in @toschos answer). tl;dr Don’t rely on what you can read below. And don’t use wp_is_mobile().

    switch with a core global:

    if ( $is_iphone ) 
    // do stuff for mobile
else
    // do stuff for non-mobile.

    basically that´s a simplified version of user agent sniffing.