Inserting sliders into responsive themes

  • cag8f

    (@cag8f)


    9 years, 9 months ago

    I am using a responsive theme (Hemingway), and recently tried to replace the static header image with a slider. The theme developer told me that this wasn’t possible without big changes to the theme, and insinuated that the reason was because the theme was responsive. His exact response,

    I’m afraid there’s no easy way to integrate a header slider with Hemingway. Since the header fills the entire width of the browser window and the proportions of it are variable, pretty extensive changes would have to be made both to the PHP and to the CSS (esp. if it’s going to work on mobile).

    This sounds plausible. If so, is this property something I can expect for most (all?) responsive themes? Or is this theme an anomaly in that respect?

    Also, if I wanted to try to implement this slider myself, what are my options? Am I resigned to learning myself some JS (of which I know nothing) and crawling under the hood myself? Or might there be a simpler (and free) solution?

Viewing 1 replies (of 1 total)
  • Maria Antonietta Perna

    (@antonietta456)

    9 years, 8 months ago

    Hi Cag8f,

    I respect what the theme author says. However, I don’t think sliders and responsiveness are incompatible. Actually, most sliders nowadays are responsive.

    What the theme developer must have meant, in my humble view, is that it takes some work with the template files to integrate a slider as a replacement for the header image. As it is, the header image can be set up using the Customizer (Appearance > Customize). However, if you don’t select any image, a default one will be displayed. The default header image is hard-coded in the header.php template file.

    If you want to add a slider, the best option would be to install a nice slider plugin of your choice. I use Soliloquy lite available on the WP.org repository. If you use this one, Soliloquy gives you a template tag after you create your slider that lets you add the slider inside a template file.

    You could create a child theme, duplicate header.php from the parent to the child, delete this line of code (which adds the header image) in header.php in the child theme:

    <div class="header section" style="background-image: url(<?php if (get_header_image() != '') : ?><?php header_image(); ?><?php else : ?><?php echo get_template_directory_uri() . '/images/header.jpg'; ?><?php endif; ?>);">

    and add the Soliloquy code in its place:

    <?php if ( function_exists( 'soliloquy' ) ) { soliloquy( '34' ); } ?>

    Of course your Soliloquy slider id would have a different number than 34.

    This adds the slider in place of the default header image (you can change the dimensions of the slider in the Soliloquy panel, Config section, to match the required Hemingway header image size (1280 x 416).

    You will then make adjustments to the layout regarding the logo and perhaps use some CSS.

    As you can see, you don’t need to learn JavaScript or code a slider from scratch. However, as the theme author pointed out to you, there’s some work to be done to achieve the result you want.

    I hope this helps and gives you an idea of what’s involved to carry out the desired modifications. Don’t hesitate to reach out if you come across any hurdles 🙂

    Cheers!
    – Maria Antonietta

Viewing 1 replies (of 1 total)
  • The topic ‘Inserting sliders into responsive themes’ is closed to new replies.