1 00:00:00,000 --> 00:00:05,000 Our Products section of the Web site has a series of somewhat static pages. 2 00:00:05,001 --> 00:00:09,001 There is a bunch of text on these pages and there's an image associated 3 00:00:09,002 --> 00:00:11,002 with that particular block of text. 4 00:00:11,003 --> 00:00:15,003 We can go and we can click through all of these and you'll see there are just 5 00:00:15,004 --> 00:00:19,004 lots and lots of images, there are little bits of text here and there. 6 00:00:19,005 --> 00:00:23,005 What I'd like to do is I'd like to improve the look of these pages 7 00:00:23,006 --> 00:00:27,006 by adding a little bit of style, a little pizzazz to the images themselves. 8 00:00:27,007 --> 00:00:32,007 This is new in Joomla!. Because this version of Joomla! 9 00:00:32,008 --> 00:00:36,008 is built with Bootstrap and because this template is integrating Bootstrap 10 00:00:36,009 --> 00:00:42,009 as part of its design, we can leverage any of Bootstrap's classes that are 11 00:00:42,010 --> 00:00:46,010 contained, and provided that we apply that class in the way the Bootstrap 12 00:00:46,011 --> 00:00:49,011 is expecting, we can apply those styles to our Web pages. 13 00:00:49,012 --> 00:00:54,012 One of the most striking ways that we can do this is where our images are concerned. 14 00:00:54,013 --> 00:00:59,013 So right now these images are just square images that have come right down and out 15 00:00:59,014 --> 00:01:02,014 of Photoshop and they are appearing here in our Web page. 16 00:01:02,015 --> 00:01:06,015 But Bootstrap has three different ways you can style images. 17 00:01:06,016 --> 00:01:12,016 And that is in the Bootstrap documentation, so if you go to getbootstrap.com, 18 00:01:12,017 --> 00:01:14,017 you'll wind up on this home page. 19 00:01:14,018 --> 00:01:20,018 And if you go to the base CSS navigation item and then click on images down here, 20 00:01:20,019 --> 00:01:25,019 you'll wind up seeing a little demonstration of the way that Bootstrap 21 00:01:25,020 --> 00:01:27,020 can style these images for you. 22 00:01:27,021 --> 00:01:34,021 So by applying a class of img-rounded you will get rounded corners on the edges 23 00:01:34,022 --> 00:01:38,022 of your image, and that class you have to apply to the image tag. 24 00:01:38,023 --> 00:01:43,023 If you have img-circle applied to the image tag, you'll actually get your image 25 00:01:43,024 --> 00:01:45,024 displayed in a circle. 26 00:01:45,025 --> 00:01:50,025 And finally if you apply a class of img- polaroid, you'll get your image with a 27 00:01:50,026 --> 00:01:55,026 nice little border around it and this little space in between is a white fill. 28 00:01:55,027 --> 00:01:59,027 Not necessarily obvious here on a white background, but I have looked at this 29 00:01:59,028 --> 00:02:03,028 effect on pages where the background was not white and that will be a white wrap 30 00:02:03,029 --> 00:02:07,029 around that picture followed by the little gray border after that. 31 00:02:07,030 --> 00:02:13,030 So I want to show you how we can apply these three classes to our images inside of Joomla!. 32 00:02:13,031 --> 00:02:16,031 So here in the back end of Joomla! 33 00:02:16,032 --> 00:02:22,032 I'm going to go to Content>Article Manager and I am just going to work with 34 00:02:22,033 --> 00:02:26,033 my Products, Articles right now so I am going to Filter by category and go to 35 00:02:26,034 --> 00:02:30,034 Products and here are my Products pages for this particular Web site. 36 00:02:30,035 --> 00:02:35,035 So let's say I start here with the Energy Bulbs, if I click on that, I have 37 00:02:35,036 --> 00:02:39,036 this picture of this woman here who is looking at light bulbs at the store. 38 00:02:39,037 --> 00:02:44,037 What I really need to do is click on the image itself to select it and then here 39 00:02:44,038 --> 00:02:50,038 using the little tree icon here in TinyMCE if I click on that, this will allow 40 00:02:50,039 --> 00:02:52,039 me to apply the class that I want to apply. 41 00:02:52,040 --> 00:02:56,040 I've not shown you how to use this for inserting images because it doesn't have 42 00:02:56,041 --> 00:03:00,041 an interface for uploading images into the Media Manager and you have to know 43 00:03:00,042 --> 00:03:04,042 the URL for the image in order to include it in your Webpage, 44 00:03:04,043 --> 00:03:07,043 which is definitely less convenient than the Image button at the bottom of the screen 45 00:03:07,044 --> 00:03:11,044 which is what we've been using to work with images to this point. 46 00:03:11,045 --> 00:03:16,045 However, this tree icon has the interface for putting a class inside of an image tag 47 00:03:16,046 --> 00:03:19,046 and that is what we're going to do right now. 48 00:03:19,047 --> 00:03:24,047 So if I switch over to the Appearance tab here for our pictures, here is where 49 00:03:24,048 --> 00:03:30,048 I can apply my Class, this is the CSS Class and right now it's set to Not Set. 50 00:03:30,049 --> 00:03:36,049 So what I want to do is pick value from right here which will allow me to type something in. 51 00:03:36,050 --> 00:03:42,050 So if I type in img-rounded no dot in front of it and say Update, absolutely 52 00:03:42,051 --> 00:03:45,051 nothing is going to happen in TinyMCE. 53 00:03:45,052 --> 00:03:50,052 The reason why is TinyMCE is currently not hooked up to any of our Bootstrap 54 00:03:50,053 --> 00:03:55,053 styling, so it's not going to show right here inside of TinyMCE. 55 00:03:55,054 --> 00:03:59,054 One of the advanced things you could do with TinyMCE is have it pull 56 00:03:59,055 --> 00:04:04,055 a stylesheet, may be that stylesheet contains these three image classes in it, 57 00:04:04,056 --> 00:04:06,056 so that you could just pick them from the dropdown. 58 00:04:06,057 --> 00:04:09,057 That would be a great way to handle this for your client. 59 00:04:09,058 --> 00:04:14,058 But you're not going to see the styling here inside of TinyMCE at the moment 60 00:04:14,059 --> 00:04:20,059 because TinyMCE doesn't know what img-rounded happens to do with this particular image. 61 00:04:20,060 --> 00:04:26,060 But once we hit Save and we go to the front end of the Web site and we go to the 62 00:04:26,061 --> 00:04:30,061 Energy Bulbs page, you'll see that we now have an image with rounded corners. 63 00:04:30,062 --> 00:04:32,062 So that's quite nice. 64 00:04:32,063 --> 00:04:36,063 If we go to the Low-Flow Showerhead, I think this one might look good with a 65 00:04:36,064 --> 00:04:40,064 circle around it so let's hop into the back end of Joomla! 66 00:04:40,065 --> 00:04:44,065 now I am going to hit Save & Close and I am going to go to the Low-Flow 67 00:04:44,066 --> 00:04:48,066 Showerhead article, once again click on the Low-Flow Showerhead and click on 68 00:04:48,067 --> 00:04:53,067 the tree icon here in TinyMCE, switch to the Appearance tab, in the Class 69 00:04:53,068 --> 00:04:58,068 dropdown choose value and this time for the value I am going to type in 70 00:04:58,069 --> 00:05:00,069 img-circle and say Update. 71 00:05:00,070 --> 00:05:06,070 Again I won't see it here in TinyMCE, but if I say Save & Close and I refresh 72 00:05:06,071 --> 00:05:12,071 my Low-Flow Showerhead page, I now have my image displayed in the circle style. 73 00:05:12,072 --> 00:05:16,072 Now this particular image was a little bit wide in terms of a rectangle, 74 00:05:16,073 --> 00:05:20,073 so it's applied the rounded corners to the edges and it looks kind of a like a oval. 75 00:05:20,074 --> 00:05:23,074 But I have another page where this particular circle works really well, 76 00:05:23,075 --> 00:05:29,075 it's over on the About page, this particular image is sized more like a square 77 00:05:29,076 --> 00:05:33,076 and when you apply the circle style to it, it looks really good. 78 00:05:33,077 --> 00:05:40,077 So if I do that now and I go to my About Articles and I click on the About 79 00:05:40,078 --> 00:05:46,078 article and I click on this image and I click on the tree, click on Appearance, 80 00:05:46,079 --> 00:05:51,079 click on value here in the Class dropdown and type in img-circle and say Update 81 00:05:51,080 --> 00:05:56,080 and Save & Close, here on the About page you'll get a sense of a real circle for 82 00:05:56,081 --> 00:05:57,081 this particular image. 83 00:05:57,082 --> 00:06:01,082 So let me show you what the Polaroid effect does now. 84 00:06:01,083 --> 00:06:06,083 So let's go to the Products page and you see here we have this picture of this 85 00:06:06,084 --> 00:06:10,084 girl holding a light bulb, I am going to go back to my back-end of Joomla!, 86 00:06:10,085 --> 00:06:16,085 go back to my Products and click on the actual Products page itself. 87 00:06:16,086 --> 00:06:22,086 I'm going to select this image right here inside of my editor, click on the 88 00:06:22,087 --> 00:06:28,087 tree icon and under Appearance, under Class, under value I'm going to type in 89 00:06:28,088 --> 00:06:34,088 img-polaroid and say Update, and Save & Close. 90 00:06:34,089 --> 00:06:38,089 And when I refresh the Products page here you'll see that we have this lovely 91 00:06:38,090 --> 00:06:43,090 Polaroid effect, so you have the little bit of white space here with the nice 92 00:06:43,091 --> 00:06:44,091 little border around it. 93 00:06:44,092 --> 00:06:48,092 Now I wouldn't necessarily advise you to use all three effects all over every 94 00:06:48,093 --> 00:06:50,093 page of your Web site. 95 00:06:50,094 --> 00:06:53,094 I would recommend that you would pick one of these effects maybe, and use it 96 00:06:53,095 --> 00:06:56,095 consistently or maybe two of these effects. 97 00:06:56,096 --> 00:07:00,096 So like the circle effect is really quite eye-popping, maybe you want to use 98 00:07:00,097 --> 00:07:04,097 that sparingly on a handful of pages and then every other image on your site 99 00:07:04,098 --> 00:07:08,098 maybe you treat with the Polaroid or the rounded corner effect, that would be a 100 00:07:08,099 --> 00:07:11,099 nice treatment for your Web site, rather than just sort of sprinkling these three 101 00:07:11,100 --> 00:07:13,000 effects anywhere they happen to appear. 102 00:07:13,001 --> 00:07:15,001 But I did want to show you how all of them work. 103 00:07:15,002 --> 00:07:19,002 So if you remember from Bootstrap in the documentation, img-rounded, img-circle 104 00:07:19,003 --> 00:07:27,003 and img-polaroid, you can add those to your image tags inside of your HTML and 105 00:07:27,004 --> 00:07:31,004 get some great effects for your Web site.