In this video you'll be comparing a premium plug in to it's light version.
First you'll install soliloquy light into your local photography site and configure it then you'll open
the premium version inside your students sandbox site and check out the differences.
This is one example of how a plug in developer can offer such a powerful free version in cases like
this.
It's fine to use the light version if it serves the needs of the project.
First make sure that your local development environment is open and you're logged into your Wordpress
dashboard and you can navigate to plugins add new and then search for the word soliloquy the soliloquy
light plug in should be one of the first that comes up and go ahead and click Install now.
Once you've activated the plug in you can see that it gives you a control menu down here and if you
roll over and click soliloquy it will bring you to your soliloquy sliders page one of the ways that
this works differently from native and those tiled galleries inside of the Wordpress dashboard is that
for photographers and those that want to display groups of images and sliders in different places on
the Web site it enables you to make slider's and list them here under soliloquy and then you can use
short codes to insert them anywhere you want into posts into pages into the sidebar widgets of your
site or any other place that your site allows.
You'll get a feel for what I mean as we play with the plug in here in our local environment.
Click Add new at the top or down under the menu where it says add new under soliloquy and we'll create
a slider by titling it slider one or anything you like.
And let's just publish that slider for now to save it.
Great It shows you where you can get the codes to place the slider in different places on your website
by opening this overlay dialog here.
And one of the things you'll notice right away is that the soliloquy pro version lets you access the
media library media library support means that we can bring images that are already into our mean in
our media library into the slider's and save them and associate them with different sliders in the light
versions case you're going to have to select and upload images for each slider that you want to make.
So how can we easily get the images that we need on our computer to upload right here.
Well because this is our local development environment they're already here on our computer.
They're not at an external server that we would need to FCP over to to download the images.
So if I just go select images I can go directly into where I have Seacole and under map as you'll be
familiar with HD docs and here's the site NWP content in the uploads folder I should be able to get.
Ah I see they're divided into folders by the year.
There we go.
And I have these are a few of the images in here these are sized for different image sizes.
Let's see what I have here.
I might go and look and see which of these images is the right size 12 80 by 960.
That final one looks like the large one.
So I'll upload that one and let's see.
These have the sizes on them here.
The biggest one is the 600.
So it's looks like it's the last image in each of the lists.
Control and select these two first and had open.
OK so I found those two images and now hit select Let's go and do a few more maybe I'll make six images.
For this slider 0 in 2011 0 7 there were some more yes I recognize these images OK now that I have all
those images selected for now I'll go ahead and click Update and just save that slider for now and we
can look at the configuration if we just look at the default configuration.
Let's take a look at what the slider looks like by default from soliloquy light.
I'm just going to leave all the settings as they are grab from this overlay.
One of the short codes I'm hearing Control-C to copy it and then I'm going to go into pages all pages
and I want both of these open in my browser so I'm going to open the pages tab inside the dashboard
in another tab and open the portfolio page and I'll put my slider there below the portfolio that we
had created before.
So if I just put my cursor there and it enter I'll just head it put a heading
of the name of the slider.
This is just a reference to see what this looks like.
I'll take control V and copy that slider code and hit update.
And let's open that portfolio page and see what it looks like.
There it is looks like I've got navigation below it begins to play and I can also use.
Now you can see that the size of this is as we had seen in the configuration area.
And if you notice the slider dimensions 960 by 300 and that's designed for say a page header or something
like that at the top of a page and we can make it match our theme.
You can click through to any of the dots.
The images are cropped instead of stretched or shrunken.
So that's good it keeps the proportions the same.
And that is a nice looking slider.
Let's fix it to fit it on this page so if we wanted to have a slider of our correctly proportioned or
full size images as the photographer instead of or in addition to a portfolio or a gallery excuse me
like this.
Let's see we have to make this a little bit wider.
And I would make them taller as well.
Now I kind of find out the width of my column here as I got it set to full screen instead of having
the sidebar.
That's how what I want the slider to be.
So I'm going to use the web developer tools again within Firefox see if I click the inspector rule over
that area.
It's a paragraph type format and 10 68 by 144 is that.
So it's ten sixty eight is the width that I'm looking for.
I can put 10 68 pixels inside of the width but what should I have as the height if I want to find out
what ten sixty eight would be proportional to in terms of the height of each of my images I could open
Photoshop and open an image and do a little resizing.
So it's the inside of my computer.
In the map folder in Seacole and HD docs live site W.P. content uploads.
Here we go.
Now if I find this large one.
Let's go ahead and open it in Photoshop and what I'll do is change it to ten sixty eight pixels wide
and then look at the height and this will work best if all of the photos are the same proportions.
But even if they're not you don't make the slider a consistent width and height.
So if I make it 10 68 and the height is 8 0 1 so 8 800 is probably a good height to keep this in its
proportions.
So I'll go back to the silly little soliloquy slider configuration screen and choose 800 and I'll go
over to the portfolio page and hit refresh.
There you go that's the right width and it looks like I have the full height you can make it whatever
you like in terms of how big or how tall you want the slider to be depending on where you want to fit
it.
A couple of more of the features I can see here in the soliloquy light of plug in is under the images
tab if you click the edit or this eye button under any of the images you can change the title the alt
text.
And this is an interesting thing to work with with an image slider especially if you use it for advertising
or for marketing at maybe the the header or the heading of a web site or on the home page.
You can make a link happen for each of the slaughter images that links to a specific place that you
want.
You can even have it open in a new tab.
And it's there's also an image caption area that you can do for each of your images in the slider.
Another thing I've noticed if I refresh the page in this portfolio page again and we scroll down to
the image slider the image slider starts out with an automatic slideshow happening.
Now the images wait a certain amount of time and they fade into the next image and we can control the
properties of that whether we use fade is the only option but the transition duration and the transition
speed are all possible to set.
But we can't turn off that automatic slide show from working.
Some of these features we'll see in the Pro version.
Now let's move over to your student sandbox at whatever your user name is Dot W.P. of course dot com.
You can go to students W.P. of course dotcom and then log in with your username and if you open up your
Wordpress dashboard.
Let's open up plug ins and let's just look at the list of plug ins to start with.
You may have noticed in this list as you get down to the S's the soliloquy is already active and that's
why we have a menu item over here called soliloquy.
But then there are these additional soliloquy add ons that come with the premium version where you can
do it's own light box out of the slideshows.
There's some other scheduling there's different themes there so newcomers add on if you're doing e-commerce
and selling products.
There's Instagram you can pull images from an external service like Instagram or Pinterest and that
sort of thing.
So there's a lot of different add ons that you can add to soliloquy if we just look in the soliloquy
settings panel you can see there's a license key in here that is there for you.
That is my developer license key so don't erase that you won't be able to get it back.
Then if we click add ons and click refresh add ons you'll see that all of these are present within the
plugin list and they're not activated yet.
So with any of these premium add ons you can actually add these as one offs instead of adding every
single one and use the ones that you like.
Let's start by creating a soliloquy slider of our own.
Let's look at the soliloquy page and click add new.
And this is slightly familiar.
I'll call this one slider one and you can see that you can either select files from your computer just
like we had done before but also we can click here to insert from other image sources which might be
the media library load more images from the library.
Of course I only have these three images within the media library here at my students Sandbach site.
But if I click this one and that one and I can just click insert slides into the slider and there they
are very quickly in config.
You can see this looks fairly familiar.
There's a few more slighter transition options.
There's a few other options here and these checkboxes are all not present in the light version.
So if I want to disable autostart like we had discussed in the last small section pause on hover is
interesting if your mouse is hovered over the slide and you want to look at it it'll pause the slide.
I'm not starting the slide show automatically so I don't need that one but there's a lot more options
inside of this premium version of soliloquy rather than just the other light version.
So I'll just hit publish to start with.
And let's look at what that default soliloquy slider looks like.
I'll just hit control-C to copy the short code and then I'm going to create a new page inside of my
sandbox site.
I'll just call it slider and I'll paste that code directly in there and hit publish.
And let's see what that looks like.
I can just click the permalink right here and I'll clip right click and open it in a new tab and there
is my slider 960 by 300 looks nice and it looks like it's conforming to the full width of my page right
here.
I want to take a look at my open web developer inspector again let's see what I have here.
This is only 740 pixels wide 740 is the width of the parallax Parow main column and so that shows that
this slider is mobile responsive if you drag your your window to the left you'll see that it conforms
and makes itself to the size of the outside of the border let's make two changes and illustrate some
of the differences between the light plug in and the pro or commercial premium version if I go back
into the dashboard of my sandbox say let's go back into soliloquy and edit this slider a little bit
or go into the slider one and under config.
I'm going to leave that fact I'm going to go to the same proportions as I had before.
And update that slider now to make my image taller but most likely if I refresh the page right now it'll
stay constrained within the 7 140 pixel wide column and sliders will always do that so that they don't
go over sidebar content or make the theme look bad by overlapping some other content that might be on
the same page.
But let's add one of the add ons.
In fact if we go to the to the settings and then add ons let's look at this carrousel add on a carousel
is activated now.
And so if I go to my soliloquy slider list again and hit slider one I can go to the carousel tab which
has now been enabled.
So on slider one just this one slider I can enable the carousel add on if I want to.
And let's see the slide with the slide height
so Max with let's take a look.
Ten sixty eight point eight hundred and update and let's just see what that looks like.
I'll go over to the page and refresh the page.
Now that is a carousel that is doing the same proportions.
But now if I had a long list of items they could be within that carousel inside of the page OK.
But how about one more option.
Let's disable that carousel and let's go.
Actually I didn't save that but that's OK.
Let's go back into the add ons and let's look at the light box add on.
So I've activated light box and I'll go back to the soliloquy page and choose my slider one.
If I go back to carrousel and disable it and go over to light box and enable the light box slider let's
just leave it at its default settings and hit update.
Now let's take a look at how that has configured itself.
Right now that's the normal slider like we've had without the light box but if I click the photo it
opens some thumbnails at the bottom and a light box display right out of that slider.
That's a good way to make a small thumbnail slider to be clickable and open up larger versions of the
images.
In this video you explored both the light version and the premium version of a plug in the soliloquy
slider plug in while the light version is functional enough for some purposes.
The premium version might be the answer for our client sites specific needs.
However because the premium version exists the light version gets the benefit of updates and developer
support and you can trust it to work into the future.
In the next video will tour the premium plug ins inside your students sandbox.
We'll be using them throughout the rest of the course as we build more Web site projects in the sandbox.