1
00:00:00,790 --> 00:00:05,620
In this video you'll be comparing a premium plug in to it's light version.

2
00:00:05,620 --> 00:00:11,650
First you'll install soliloquy light into your local photography site and configure it then you'll open

3
00:00:11,650 --> 00:00:16,630
the premium version inside your students sandbox site and check out the differences.

4
00:00:16,630 --> 00:00:22,510
This is one example of how a plug in developer can offer such a powerful free version in cases like

5
00:00:22,510 --> 00:00:23,030
this.

6
00:00:23,050 --> 00:00:26,580
It's fine to use the light version if it serves the needs of the project.

7
00:00:27,880 --> 00:00:33,670
First make sure that your local development environment is open and you're logged into your Wordpress

8
00:00:33,670 --> 00:00:42,640
dashboard and you can navigate to plugins add new and then search for the word soliloquy the soliloquy

9
00:00:42,670 --> 00:00:47,640
light plug in should be one of the first that comes up and go ahead and click Install now.

10
00:00:49,200 --> 00:00:55,080
Once you've activated the plug in you can see that it gives you a control menu down here and if you

11
00:00:55,410 --> 00:01:02,010
roll over and click soliloquy it will bring you to your soliloquy sliders page one of the ways that

12
00:01:02,010 --> 00:01:09,600
this works differently from native and those tiled galleries inside of the Wordpress dashboard is that

13
00:01:09,690 --> 00:01:15,960
for photographers and those that want to display groups of images and sliders in different places on

14
00:01:15,960 --> 00:01:23,430
the Web site it enables you to make slider's and list them here under soliloquy and then you can use

15
00:01:23,490 --> 00:01:31,350
short codes to insert them anywhere you want into posts into pages into the sidebar widgets of your

16
00:01:31,350 --> 00:01:35,140
site or any other place that your site allows.

17
00:01:36,250 --> 00:01:40,780
You'll get a feel for what I mean as we play with the plug in here in our local environment.

18
00:01:42,130 --> 00:01:49,870
Click Add new at the top or down under the menu where it says add new under soliloquy and we'll create

19
00:01:50,440 --> 00:01:55,470
a slider by titling it slider one or anything you like.

20
00:01:55,480 --> 00:01:58,850
And let's just publish that slider for now to save it.

21
00:01:59,910 --> 00:02:05,570
Great It shows you where you can get the codes to place the slider in different places on your website

22
00:02:05,590 --> 00:02:08,600
by opening this overlay dialog here.

23
00:02:09,280 --> 00:02:16,270
And one of the things you'll notice right away is that the soliloquy pro version lets you access the

24
00:02:16,270 --> 00:02:22,090
media library media library support means that we can bring images that are already into our mean in

25
00:02:22,090 --> 00:02:29,290
our media library into the slider's and save them and associate them with different sliders in the light

26
00:02:29,290 --> 00:02:38,120
versions case you're going to have to select and upload images for each slider that you want to make.

27
00:02:38,120 --> 00:02:44,690
So how can we easily get the images that we need on our computer to upload right here.

28
00:02:44,690 --> 00:02:49,850
Well because this is our local development environment they're already here on our computer.

29
00:02:49,850 --> 00:02:56,770
They're not at an external server that we would need to FCP over to to download the images.

30
00:02:56,780 --> 00:03:04,760
So if I just go select images I can go directly into where I have Seacole and under map as you'll be

31
00:03:04,760 --> 00:03:13,830
familiar with HD docs and here's the site NWP content in the uploads folder I should be able to get.

32
00:03:13,850 --> 00:03:20,050
Ah I see they're divided into folders by the year.

33
00:03:20,060 --> 00:03:20,840
There we go.

34
00:03:20,840 --> 00:03:28,310
And I have these are a few of the images in here these are sized for different image sizes.

35
00:03:28,340 --> 00:03:30,000
Let's see what I have here.

36
00:03:30,050 --> 00:03:37,990
I might go and look and see which of these images is the right size 12 80 by 960.

37
00:03:38,010 --> 00:03:40,190
That final one looks like the large one.

38
00:03:40,190 --> 00:03:44,950
So I'll upload that one and let's see.

39
00:03:45,070 --> 00:03:47,220
These have the sizes on them here.

40
00:03:48,120 --> 00:03:50,610
The biggest one is the 600.

41
00:03:50,640 --> 00:03:54,970
So it's looks like it's the last image in each of the lists.

42
00:03:55,020 --> 00:03:59,900
Control and select these two first and had open.

43
00:04:00,060 --> 00:04:08,080
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.

44
00:04:08,770 --> 00:04:19,480
For this slider 0 in 2011 0 7 there were some more yes I recognize these images OK now that I have all

45
00:04:19,480 --> 00:04:26,590
those images selected for now I'll go ahead and click Update and just save that slider for now and we

46
00:04:26,590 --> 00:04:32,440
can look at the configuration if we just look at the default configuration.

47
00:04:32,440 --> 00:04:37,770
Let's take a look at what the slider looks like by default from soliloquy light.

48
00:04:37,780 --> 00:04:42,680
I'm just going to leave all the settings as they are grab from this overlay.

49
00:04:42,820 --> 00:04:52,590
One of the short codes I'm hearing Control-C to copy it and then I'm going to go into pages all pages

50
00:04:52,630 --> 00:04:58,990
and I want both of these open in my browser so I'm going to open the pages tab inside the dashboard

51
00:04:59,000 --> 00:05:09,550
in another tab and open the portfolio page and I'll put my slider there below the portfolio that we

52
00:05:09,550 --> 00:05:11,030
had created before.

53
00:05:11,230 --> 00:05:17,800
So if I just put my cursor there and it enter I'll just head it put a heading

54
00:05:20,600 --> 00:05:22,070
of the name of the slider.

55
00:05:22,070 --> 00:05:25,060
This is just a reference to see what this looks like.

56
00:05:25,100 --> 00:05:30,390
I'll take control V and copy that slider code and hit update.

57
00:05:30,530 --> 00:05:34,880
And let's open that portfolio page and see what it looks like.

58
00:05:40,010 --> 00:05:51,340
There it is looks like I've got navigation below it begins to play and I can also use.

59
00:05:51,460 --> 00:05:59,080
Now you can see that the size of this is as we had seen in the configuration area.

60
00:05:59,220 --> 00:06:06,810
And if you notice the slider dimensions 960 by 300 and that's designed for say a page header or something

61
00:06:06,810 --> 00:06:12,210
like that at the top of a page and we can make it match our theme.

62
00:06:12,400 --> 00:06:15,820
You can click through to any of the dots.

63
00:06:16,000 --> 00:06:19,560
The images are cropped instead of stretched or shrunken.

64
00:06:19,570 --> 00:06:21,920
So that's good it keeps the proportions the same.

65
00:06:22,900 --> 00:06:24,720
And that is a nice looking slider.

66
00:06:25,900 --> 00:06:33,040
Let's fix it to fit it on this page so if we wanted to have a slider of our correctly proportioned or

67
00:06:33,040 --> 00:06:40,740
full size images as the photographer instead of or in addition to a portfolio or a gallery excuse me

68
00:06:40,810 --> 00:06:41,820
like this.

69
00:06:42,040 --> 00:06:45,410
Let's see we have to make this a little bit wider.

70
00:06:45,700 --> 00:06:48,440
And I would make them taller as well.

71
00:06:48,460 --> 00:06:56,470
Now I kind of find out the width of my column here as I got it set to full screen instead of having

72
00:06:56,470 --> 00:06:57,430
the sidebar.

73
00:06:57,610 --> 00:06:59,920
That's how what I want the slider to be.

74
00:06:59,920 --> 00:07:08,660
So I'm going to use the web developer tools again within Firefox see if I click the inspector rule over

75
00:07:08,660 --> 00:07:09,720
that area.

76
00:07:09,980 --> 00:07:17,650
It's a paragraph type format and 10 68 by 144 is that.

77
00:07:17,650 --> 00:07:21,120
So it's ten sixty eight is the width that I'm looking for.

78
00:07:22,500 --> 00:07:30,450
I can put 10 68 pixels inside of the width but what should I have as the height if I want to find out

79
00:07:30,450 --> 00:07:37,440
what ten sixty eight would be proportional to in terms of the height of each of my images I could open

80
00:07:37,440 --> 00:07:44,420
Photoshop and open an image and do a little resizing.

81
00:07:44,460 --> 00:07:49,000
So it's the inside of my computer.

82
00:07:49,960 --> 00:07:58,940
In the map folder in Seacole and HD docs live site W.P. content uploads.

83
00:07:58,990 --> 00:08:00,090
Here we go.

84
00:08:00,160 --> 00:08:03,170
Now if I find this large one.

85
00:08:03,190 --> 00:08:12,540
Let's go ahead and open it in Photoshop and what I'll do is change it to ten sixty eight pixels wide

86
00:08:12,840 --> 00:08:19,580
and then look at the height and this will work best if all of the photos are the same proportions.

87
00:08:19,730 --> 00:08:29,440
But even if they're not you don't make the slider a consistent width and height.

88
00:08:29,560 --> 00:08:39,340
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

89
00:08:39,340 --> 00:08:40,430
proportions.

90
00:08:41,720 --> 00:08:50,540
So I'll go back to the silly little soliloquy slider configuration screen and choose 800 and I'll go

91
00:08:50,540 --> 00:08:58,630
over to the portfolio page and hit refresh.

92
00:08:58,640 --> 00:09:05,830
There you go that's the right width and it looks like I have the full height you can make it whatever

93
00:09:05,830 --> 00:09:14,410
you like in terms of how big or how tall you want the slider to be depending on where you want to fit

94
00:09:14,410 --> 00:09:14,740
it.

95
00:09:16,810 --> 00:09:25,720
A couple of more of the features I can see here in the soliloquy light of plug in is under the images

96
00:09:25,780 --> 00:09:33,010
tab if you click the edit or this eye button under any of the images you can change the title the alt

97
00:09:33,070 --> 00:09:33,810
text.

98
00:09:33,940 --> 00:09:40,420
And this is an interesting thing to work with with an image slider especially if you use it for advertising

99
00:09:40,420 --> 00:09:46,050
or for marketing at maybe the the header or the heading of a web site or on the home page.

100
00:09:46,060 --> 00:09:52,150
You can make a link happen for each of the slaughter images that links to a specific place that you

101
00:09:52,150 --> 00:09:52,510
want.

102
00:09:52,510 --> 00:09:54,710
You can even have it open in a new tab.

103
00:09:54,850 --> 00:10:03,130
And it's there's also an image caption area that you can do for each of your images in the slider.

104
00:10:03,130 --> 00:10:10,720
Another thing I've noticed if I refresh the page in this portfolio page again and we scroll down to

105
00:10:10,720 --> 00:10:18,550
the image slider the image slider starts out with an automatic slideshow happening.

106
00:10:18,850 --> 00:10:25,630
Now the images wait a certain amount of time and they fade into the next image and we can control the

107
00:10:25,630 --> 00:10:32,800
properties of that whether we use fade is the only option but the transition duration and the transition

108
00:10:32,800 --> 00:10:35,700
speed are all possible to set.

109
00:10:35,740 --> 00:10:40,500
But we can't turn off that automatic slide show from working.

110
00:10:40,690 --> 00:10:43,620
Some of these features we'll see in the Pro version.

111
00:10:44,550 --> 00:10:51,590
Now let's move over to your student sandbox at whatever your user name is Dot W.P. of course dot com.

112
00:10:51,600 --> 00:10:59,700
You can go to students W.P. of course dotcom and then log in with your username and if you open up your

113
00:10:59,700 --> 00:11:02,130
Wordpress dashboard.

114
00:11:02,300 --> 00:11:08,940
Let's open up plug ins and let's just look at the list of plug ins to start with.

115
00:11:09,050 --> 00:11:16,160
You may have noticed in this list as you get down to the S's the soliloquy is already active and that's

116
00:11:16,160 --> 00:11:19,910
why we have a menu item over here called soliloquy.

117
00:11:19,910 --> 00:11:26,150
But then there are these additional soliloquy add ons that come with the premium version where you can

118
00:11:26,150 --> 00:11:29,760
do it's own light box out of the slideshows.

119
00:11:29,780 --> 00:11:36,890
There's some other scheduling there's different themes there so newcomers add on if you're doing e-commerce

120
00:11:36,890 --> 00:11:38,910
and selling products.

121
00:11:38,940 --> 00:11:45,500
There's Instagram you can pull images from an external service like Instagram or Pinterest and that

122
00:11:45,500 --> 00:11:46,210
sort of thing.

123
00:11:46,370 --> 00:11:52,100
So there's a lot of different add ons that you can add to soliloquy if we just look in the soliloquy

124
00:11:52,100 --> 00:11:57,910
settings panel you can see there's a license key in here that is there for you.

125
00:11:57,990 --> 00:12:02,670
That is my developer license key so don't erase that you won't be able to get it back.

126
00:12:02,890 --> 00:12:09,480
Then if we click add ons and click refresh add ons you'll see that all of these are present within the

127
00:12:09,480 --> 00:12:12,690
plugin list and they're not activated yet.

128
00:12:12,690 --> 00:12:21,420
So with any of these premium add ons you can actually add these as one offs instead of adding every

129
00:12:21,420 --> 00:12:25,270
single one and use the ones that you like.

130
00:12:27,810 --> 00:12:32,280
Let's start by creating a soliloquy slider of our own.

131
00:12:32,280 --> 00:12:37,820
Let's look at the soliloquy page and click add new.

132
00:12:38,030 --> 00:12:42,340
And this is slightly familiar.

133
00:12:42,440 --> 00:12:49,760
I'll call this one slider one and you can see that you can either select files from your computer just

134
00:12:49,760 --> 00:12:55,970
like we had done before but also we can click here to insert from other image sources which might be

135
00:12:56,300 --> 00:13:02,900
the media library load more images from the library.

136
00:13:02,940 --> 00:13:07,940
Of course I only have these three images within the media library here at my students Sandbach site.

137
00:13:08,070 --> 00:13:14,490
But if I click this one and that one and I can just click insert slides into the slider and there they

138
00:13:14,490 --> 00:13:17,940
are very quickly in config.

139
00:13:17,970 --> 00:13:20,490
You can see this looks fairly familiar.

140
00:13:20,530 --> 00:13:23,990
There's a few more slighter transition options.

141
00:13:24,060 --> 00:13:30,900
There's a few other options here and these checkboxes are all not present in the light version.

142
00:13:30,900 --> 00:13:37,470
So if I want to disable autostart like we had discussed in the last small section pause on hover is

143
00:13:37,470 --> 00:13:44,040
interesting if your mouse is hovered over the slide and you want to look at it it'll pause the slide.

144
00:13:44,070 --> 00:13:49,830
I'm not starting the slide show automatically so I don't need that one but there's a lot more options

145
00:13:50,040 --> 00:13:57,850
inside of this premium version of soliloquy rather than just the other light version.

146
00:13:59,450 --> 00:14:02,500
So I'll just hit publish to start with.

147
00:14:02,700 --> 00:14:07,430
And let's look at what that default soliloquy slider looks like.

148
00:14:07,510 --> 00:14:16,550
I'll just hit control-C to copy the short code and then I'm going to create a new page inside of my

149
00:14:16,550 --> 00:14:19,000
sandbox site.

150
00:14:19,370 --> 00:14:24,870
I'll just call it slider and I'll paste that code directly in there and hit publish.

151
00:14:27,950 --> 00:14:30,210
And let's see what that looks like.

152
00:14:30,230 --> 00:14:38,060
I can just click the permalink right here and I'll clip right click and open it in a new tab and there

153
00:14:38,060 --> 00:14:50,480
is my slider 960 by 300 looks nice and it looks like it's conforming to the full width of my page right

154
00:14:50,480 --> 00:14:51,530
here.

155
00:14:51,560 --> 00:14:58,180
I want to take a look at my open web developer inspector again let's see what I have here.

156
00:14:58,230 --> 00:15:09,930
This is only 740 pixels wide 740 is the width of the parallax Parow main column and so that shows that

157
00:15:10,710 --> 00:15:19,550
this slider is mobile responsive if you drag your your window to the left you'll see that it conforms

158
00:15:19,550 --> 00:15:27,490
and makes itself to the size of the outside of the border let's make two changes and illustrate some

159
00:15:27,490 --> 00:15:34,060
of the differences between the light plug in and the pro or commercial premium version if I go back

160
00:15:34,060 --> 00:15:42,800
into the dashboard of my sandbox say let's go back into soliloquy and edit this slider a little bit

161
00:15:45,500 --> 00:15:48,930
or go into the slider one and under config.

162
00:15:48,960 --> 00:15:57,170
I'm going to leave that fact I'm going to go to the same proportions as I had before.

163
00:16:00,510 --> 00:16:09,240
And update that slider now to make my image taller but most likely if I refresh the page right now it'll

164
00:16:09,250 --> 00:16:17,920
stay constrained within the 7 140 pixel wide column and sliders will always do that so that they don't

165
00:16:18,250 --> 00:16:25,660
go over sidebar content or make the theme look bad by overlapping some other content that might be on

166
00:16:25,660 --> 00:16:26,860
the same page.

167
00:16:27,400 --> 00:16:30,040
But let's add one of the add ons.

168
00:16:30,040 --> 00:16:42,330
In fact if we go to the to the settings and then add ons let's look at this carrousel add on a carousel

169
00:16:42,420 --> 00:16:43,850
is activated now.

170
00:16:43,860 --> 00:16:55,940
And so if I go to my soliloquy slider list again and hit slider one I can go to the carousel tab which

171
00:16:55,940 --> 00:16:57,860
has now been enabled.

172
00:16:57,860 --> 00:17:05,910
So on slider one just this one slider I can enable the carousel add on if I want to.

173
00:17:06,020 --> 00:17:09,650
And let's see the slide with the slide height

174
00:17:13,710 --> 00:17:16,630
so Max with let's take a look.

175
00:17:16,700 --> 00:17:22,770
Ten sixty eight point eight hundred and update and let's just see what that looks like.

176
00:17:26,050 --> 00:17:31,120
I'll go over to the page and refresh the page.

177
00:17:31,220 --> 00:17:35,570
Now that is a carousel that is doing the same proportions.

178
00:17:35,580 --> 00:17:44,560
But now if I had a long list of items they could be within that carousel inside of the page OK.

179
00:17:44,570 --> 00:17:47,000
But how about one more option.

180
00:17:47,000 --> 00:17:50,060
Let's disable that carousel and let's go.

181
00:17:50,060 --> 00:17:52,120
Actually I didn't save that but that's OK.

182
00:17:52,160 --> 00:17:57,600
Let's go back into the add ons and let's look at the light box add on.

183
00:17:57,620 --> 00:18:05,900
So I've activated light box and I'll go back to the soliloquy page and choose my slider one.

184
00:18:06,140 --> 00:18:12,770
If I go back to carrousel and disable it and go over to light box and enable the light box slider let's

185
00:18:12,770 --> 00:18:21,530
just leave it at its default settings and hit update.

186
00:18:21,530 --> 00:18:24,340
Now let's take a look at how that has configured itself.

187
00:18:27,890 --> 00:18:35,770
Right now that's the normal slider like we've had without the light box but if I click the photo it

188
00:18:35,830 --> 00:18:43,700
opens some thumbnails at the bottom and a light box display right out of that slider.

189
00:18:43,760 --> 00:18:50,660
That's a good way to make a small thumbnail slider to be clickable and open up larger versions of the

190
00:18:50,660 --> 00:18:51,420
images.

191
00:18:53,740 --> 00:18:59,800
In this video you explored both the light version and the premium version of a plug in the soliloquy

192
00:18:59,800 --> 00:19:04,200
slider plug in while the light version is functional enough for some purposes.

193
00:19:04,270 --> 00:19:08,650
The premium version might be the answer for our client sites specific needs.

194
00:19:08,890 --> 00:19:14,230
However because the premium version exists the light version gets the benefit of updates and developer

195
00:19:14,230 --> 00:19:17,040
support and you can trust it to work into the future.

196
00:19:17,920 --> 00:19:22,350
In the next video will tour the premium plug ins inside your students sandbox.

197
00:19:22,480 --> 00:19:27,350
We'll be using them throughout the rest of the course as we build more Web site projects in the sandbox.