Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 2 – Provide Support for the Orbit Slider

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, what we’re going to start doing is providing support for the Orbit Slider in our Thesis 2 responsive skin. The Orbit Slider is a plugin that’s on the WordPress Repository and it was one of the first slider plugins that was responsive and it works quite well from my perspective. I’ve seen lately some people complaining about it but I haven’t had any difficulties myself so we’re going to continue to use this, WP Orbit Slider.

This has worked fine in Thesis 2 for me and has worked fine in my tests of WordPress 3.5 Beta so the fact that it’s compatible with 3.2.1 shouldn’t bother you, the author just has upgraded that.

This is the site that we’re going to install and it requires that the featured images be activated which if you remember from the Thesis Child Theme class, we actually had to add the featured images to Thesis because it wasn’t there. But Thesis 2 does activate featured images already so we don’t have to do that here but we do need to add a custom image size that matches our skin and we do need to see how this thing is added.

Add Orbit Slider Using a Shortcode

Now, the way the Orbit Slider is added is using a shortcode. The easiest part of it is just Orbit Slider as it’s shortcode but it also can take a category name so that if you’ve got more than one category of slides, you can have a slider for one category and another slider for another category so it can take a category name and it can also take a number of posts.

Select a Category for the Slider

As a practical matter, I feel like you can regulate the number of post by simply changing the number of slides you have. I don’t really see how that is useful to us but we are going to include the ability to select the category for the slider from within the skin even though the slides that I have right now aren’t in the position to be categorized. That is, I don’t have enough slides to have slide categories but we’re still going to do that.

Use PHP to Place the Slider

We’re going to end up using this function echo do_shortcode(‘[orbit-slider]’) in a box in order to place the orbit slider when we place it because we’re going to use PHP rather than using the shortcode all by itself.

Featured Images

WordPress 3.0 or 2.9 has this thing called featured images which came after Thesis had featured images. Thesis had featured images back in 2.7 or 2.8 and that was the post image and thumbnail stuff.

Most of you, if you’ve worked in Thesis, have been using the Thesis post images and the Thesis thumbnails for quite some time. The WordPress featured image is essentially, the WordPress version of what Thesis came up with first.

Add Image Size to Match Available Space

Thesis 2 does add support for featured images but what we need to do is add the image size that matches the space that we’re going to have for our slides. I want the slides on the skin to be 950 pixels wide and 320 pixels tall. I want to add that image size so that I can tell the Orbit Slider to use that image size.

If I’m going to tell the Orbit Slider to use that image size, I have to name that image something very specific so what I have to do is name it Orbit Custom. They’ve got this piece of code down here for you to use and it uses the add image size then gives the name of the image size then gives the width and the height and a cropping parameter.

Let’s look at this syntax more closely. Google “add image size” and go over to the WordPress codex so it’s add_image_size, parameter 1 is the same, parameter 2 is the width, parameter 3 is the height and parameter 4 is the crop. Width and height are integers so you don’t need to include them in quotes and you don’t say px after them, it’s just the integer value and crop is either true or false.

Crop true means that if the image is bigger than the space available so if the image is bigger than 950 x 320, it will scale the image down till the smallest dimension fits and it will crop generally from the middle the long dimension down. If you use false there for crop, what it will do is just scale the image down to a size that fits in the 950 x 320 so if the image is taller, it’ll just proportionately resize the image which can result in an image that doesn’t actually fit in the space.

We’re going to use the hard crop is true in this case but what you really going to do is encourage your user to upload an image exactly the right size rather than having to be cropped at all but we’re going to leave the abillity to crop in here and we’re going to make it in explicit hard crop just to make sure that the slider always works properly so we’re just going to grab that little piece of code and we’re going to open up our skin files.

Right now, we are working in lesson_5_responsive_blue_masters so we open up skin.php. The place we’re going to add this image size is inside of our construct function so we’ll just paste that there, add image size now remember that the Orbit Slider needs this to be called Orbit Custom and I’m saying that I want it to be 950 pixels wide by 320 pixels tall and for crop, I’m going to say true.

Notice true is not in quotation mark that’s because it’s a boolean so it’s a switch, it’s either yes or no, 1 or 0, true or false. In any case, it doesn’t require any quotation marks around it and because this is an integer rather than a string. It also requires no quotation marks but this automatically adds that image, Orbit Custom, to our list of image sizes and that’s all there is to that really, just adding this image size.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment