Cheesetoast » slideshow http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Add a Responsive Slideshow to your WordPress Theme http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/ http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/#comments Tue, 16 Oct 2012 18:50:03 +0000 http://www.cheesetoast.co.uk/?p=879 Add a responsive slideshow to the front end of your Wordpress theme and to the admin area, so users can add their own slides. Continue reading

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
I’ll walk through how you can add a JQuery responsive slideshow to both the front end of your WordPress theme and to the admin area, so users can add their own slides.

An instance of the slideshow as viewed from a tablet.

The Slideshow Files

In searching for a slideshow I wanted to find one that not only looked great but met the following criteria:

  • I wanted it to be open source.
  • It had to be responsive so that it worked well with mobile devices.
  • I wanted to be able to add HTML text which overlaid the images (and remained responsive).
  • It needed to come with options so that I could customize the timing and effects.

Finding a slideshow the delivered on all of these counts took me a while but I eventually found what I was looking for with the excellent responsive slideshow from Codrops. Codrops not only provides the necessary download files but includes a step by step walk through for all the HTML markup, CSS and javascript code.

Include the Files in Your Theme Header

Download the slideshow files and add them to your WordPress theme folder. If you want to create a child theme but aren’t sure how, take a look at the WordPress codex section on child themes.

Now that you have the slideshow files in your folder you need to include them into your theme. There are a couple of ways to do this. One way is to manually add the <script src=”…”></script> code to your header file, but the recommended way to is use the WordPress functions wp_enqueue_script() & wp_enqueue_style().

For directions on how to do this read my previous post on how to safely include scripts in the WordPress header. Make sure to include all the necessary javascript and CSS files that come with the slideshow.

Adding Slides to the WordPress Admin Panel

To make it easy for users to add their own slides we’ll create a new post type in WordPress. To do this we use the register_post_type() function in our functions.php file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php).

Add the following code:

// Creates Slides post type
register_post_type('slides', array(
'label' => 'Slides',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'slides'),
'query_var' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'revisions',
'thumbnail',
'author',
'page-attributes',)
) );

A new 'Slides' menu has been added to the WordPress admin panelOnce created, this new post type will show up in the admin menu and will act separately from regular posts (they won’t appear in your blog or your RSS feed, etc.).

Now you can make your own slides in the same way you’d create a new post. The image for your slides comes from assigning a ‘featured image’ to each post. The title and content will make up the overlaid text on each slide.

The next step is to create a page template that combines the slideshow files and the newly created slide posts to display them on your site.

Creating a Page Template

Open up a new file in your editor and paste in the following code:

<?php
/*
Template Name: Slideshow
*/
get_header();
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<?php
//This is for our custom Slides menu
$args = array( 'post_type' => 'slides', 'orderby' => 'menu_order');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
   <li>
      <?php the_post_thumbnail('full');?>
      <div class="ei-title">
         <h2><?php the_title(); ?></h2>
         <?php the_excerpt(); ?>
      </div>
   </li>
<?php
endwhile;
?>
</ul>
<ul class="ei-slider-thumbs">
   <li class="ei-slider-element">Current</li>
      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
   <li><a href="#"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div><!-- ei-slider -->

/* Include any code you want in your page */

<?php the_sidebar(); ?>
<?php the_footer(); ?>

In that snippet I’ve taken the Codrops slideshow markup and modified it to generate the slides dynamically using the WordPress loop. I also used the new post type (slides) for the WP_Query.

The slideshow template is now available from the page attributes panel.Save the file as template-slideshow.php and keep it in your theme folder. You’ll now be able to select the template for any of your pages.

Side Note: because we’re displaying the content of the post on our slideshow we don’t want it to be so long that it’ll run off the bottom of the slide. That’s why, to limit the length of the output, I used the_excerpt() function instead of the_content(). This will trim the content if it gets too long. You can also read how to limit the word length of the excerpt further if you need to.

Not so fast. Updating the Slideshow Files

We’re almost there but there’s one catch with using WordPress to display the slides. The slideshow is configured to display it’s text as h2 and h3 elements. When we display the content of our post, however, we use the_excerpt() function which displays the basic content as paragraphs. To make sure these paragraphs are displayed properly in the slideshow we need to open up one of the javascript files and tinker a little.

Go into your the folder containing the slideshow files and open /js/jquery.eislideshow.js
Look  for this block of code:

// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

Add the following after the last line of that block of code:

.find('div.ei-title > p')
.css( 'margin-left', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginLeft : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

This will ensure that paragraphs are displayed properly on the slides.

Give it a Try

Now that all the code is together go ahead and try it out. Make sure you assign the template to one of your pages then add a slide post with a featured image.

You can also edit the file [slideshow folder]/css/style.css to play around with the styling of the slides. Have fun!

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/feed/ 0
Responsive Web Design – A 3 Column Layout http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/ http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comments Sun, 15 Apr 2012 23:58:48 +0000 http://www.cheesetoast.co.uk/?p=337 Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices. This post will talk about future-proofing websites with responsive design. I'll demonstrate an example of a 3 column front page design, complete with JQuery slideshow.
Continue reading

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
With different browsers and monitor sizes to take into consideration, web page layouts have always been unpredictable. These days it’s not just desktop computers but phones and tablets to think about as well. Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices.

In his recent newsletter “Mobile Site Vs. Full Site“, usability expert Jakob Nielsen recommends that developers “build a separate mobile-optimized site” to accompany their full screen websites. Google, for example, has a mobile-optimized version of it’s homepage. This approach allows designers to fine-tune the site for screen sizes and peripherals (for example, drop down menus are often removed on mobile versions because they don’t work well with touch screens). Nielsen recommends trimming or deferring content (e.g. reduce words), enlarging interface options, and cutting out features that aren’t  necessary.

The Responsive Approach

Responsive Design - Layout that adapts to different screen sizes.

For those who can’t afford to dedicate the time and energy developing an entirely separate mobile-optimized website there is always responsive web design. Responsive web design makes use of the CSS media query which allow the developer to specify styling for different screen sizes. Just try resizing your browser window now and you should see this webpage respond to the new dimensions.

If you’re new to responsive layouts and want to learn more then I recommend reading Nick La’s (of Web Designer Wall) article “Responsive Design in 3 Steps“. He also has a more in-depth tutorial called “Responsive Design with CSS3 Media Queries” which is well worth reading.

The 3 Column Design

A 3 column layout that responds to the screen size

Having experimented with Nick La’s demo layout I decided to modify it to include 3 columns instead of 2.

View 3 column responsive layout

or play with it on codepen

This new 3 column design displays all columns on the largest screens as equal widths. As the screen gets smaller it will move the sidebar (third column) under the other two columns.  Instead of removing the sidebar (third column) from the smallest screen I displayed all 3 columns on top of one another.

I also added an awesome responsive JQuery slideshow plugin, courtesy of Viljami Salminen.

Lastly, to get the responsive images, I used a handy little snippet of code in the CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

[Updated]: Is Responsive Design important? Read my other post about the pros and cons of responsive layouts.

If you decide to play around with the layout further then please leave a comment and let me know how you got on.

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/feed/ 11