Tip:
Highlight text to annotate it
X
{QTtext}{timescale:100}{font:Verdana}{size:20}{backColor:0,0,0} {textColor:65280,65280,65280}{width:960}{justify:center}
{plain}
[00:00:00.61] Our Products section of the Web site
has a series of somewhat static pages.
[00:00:05.13] There is a bunch of text on these pages
and there's an image associated
[00:00:09.25] with that particular block of text.
[00:00:11.29] We can go and we can click through all
of these and you'll see there are just
[00:00:15.61] lots and lots of images, there are
little bits of text here and there.
[00:00:19.11] What I'd like to do is I'd like to
improve the look of these pages
[00:00:23.61] by adding a little bit of style, a
little pizzazz to the images themselves.
[00:00:27.43] This is new in Joomla!.
Because this version of Joomla!
[00:00:32.00] is built with Bootstrap and because
this template is integrating Bootstrap
[00:00:36.00] as part of its design, we can leverage
any of Bootstrap's classes that are
[00:00:42.20] contained, and provided that we apply
that class in the way the Bootstrap
[00:00:46.40] is expecting, we can apply
those styles to our Web pages.
[00:00:49.87] One of the most striking ways that we can
do this is where our images are concerned.
[00:00:54.73] So right now these images are just square
images that have come right down and out
[00:00:59.75] of Photoshop and they are
appearing here in our Web page.
[00:01:02.25] But Bootstrap has three
different ways you can style images.
[00:01:06.51] And that is in the Bootstrap documentation,
so if you go to getbootstrap.com,
[00:01:12.31] you'll wind up on this home page.
[00:01:14.56] And if you go to the base CSS navigation
item and then click on images down here,
[00:01:20.39] you'll wind up seeing a little
demonstration of the way that Bootstrap
[00:01:25.84] can style these images for you.
[00:01:27.69] So by applying a class of img-rounded
you will get rounded corners on the edges
[00:01:34.49] of your image, and that class
you have to apply to the image tag.
[00:01:38.64] If you have img-circle applied to the
image tag, you'll actually get your image
[00:01:43.60] displayed in a circle.
[00:01:45.17] And finally if you apply a class of img-
polaroid, you'll get your image with a
[00:01:50.65] nice little border around it and this
little space in between is a white fill.
[00:01:55.09] Not necessarily obvious here on a
white background, but I have looked at this
[00:01:59.20] effect on pages where the background was
not white and that will be a white wrap
[00:02:03.81] around that picture followed by
the little gray border after that.
[00:02:07.80] So I want to show you how we can apply these
three classes to our images inside of Joomla!.
[00:02:13.18] So here in the back end of Joomla!
[00:02:16.33] I'm going to go to Content>Article Manager
and I am just going to work with
[00:02:22.46] my Products, Articles right now so I am
going to Filter by category and go to
[00:02:26.21] Products and here are my Products
pages for this particular Web site.
[00:02:30.05] So let's say I start here with the
Energy Bulbs, if I click on that, I have
[00:02:35.05] this picture of this woman here who is
looking at light bulbs at the store.
[00:02:39.12] What I really need to do is click on the
image itself to select it and then here
[00:02:44.25] using the little tree icon here in
TinyMCE if I click on that, this will allow
[00:02:50.08] me to apply the class that I want to apply.
[00:02:52.83] I've not shown you how to use this for
inserting images because it doesn't have
[00:02:56.34] an interface for uploading images into
the Media Manager and you have to know
[00:03:00.68] the URL for the image in order to
include it in your Webpage,
[00:03:04.43] which is definitely less convenient than the
Image button at the bottom of the screen
[00:03:07.86] which is what we've been using
to work with images to this point.
[00:03:11.20] However, this tree icon has the interface
for putting a class inside of an image tag
[00:03:16.36] and that is what
we're going to do right now.
[00:03:19.79] So if I switch over to the Appearance
tab here for our pictures, here is where
[00:03:24.66] I can apply my Class, this is the CSS
Class and right now it's set to Not Set.
[00:03:30.10] So what I want to do is pick value from right
here which will allow me to type something in.
[00:03:36.13] So if I type in img-rounded no dot in
front of it and say Update, absolutely
[00:03:42.81] nothing is going to happen in TinyMCE.
[00:03:45.51] The reason why is TinyMCE is currently
not hooked up to any of our Bootstrap
[00:03:50.54] styling, so it's not going to
show right here inside of TinyMCE.
[00:03:55.19] One of the advanced things you could
do with TinyMCE is have it pull
[00:03:59.46] a stylesheet, may be that stylesheet
contains these three image classes in it,
[00:04:04.62] so that you could just pick
them from the dropdown.
[00:04:06.48] That would be a great way to
handle this for your client.
[00:04:09.48] But you're not going to see the styling
here inside of TinyMCE at the moment
[00:04:14.03] because TinyMCE doesn't know what img-rounded
happens to do with this particular image.
[00:04:20.32] But once we hit Save and we go to the
front end of the Web site and we go to the
[00:04:26.49] Energy Bulbs page, you'll see that we
now have an image with rounded corners.
[00:04:30.73] So that's quite nice.
[00:04:32.82] If we go to the Low-Flow Showerhead,
I think this one might look good with a
[00:04:36.23] circle around it so let's hop
into the back end of Joomla!
[00:04:40.07] now I am going to hit Save & Close
and I am going to go to the Low-Flow
[00:04:44.32] Showerhead article, once again click
on the Low-Flow Showerhead and click on
[00:04:48.49] the tree icon here in TinyMCE,
switch to the Appearance tab, in the Class
[00:04:53.47] dropdown choose value and this time
for the value I am going to type in
[00:04:58.21] img-circle and say Update.
[00:05:00.71] Again I won't see it here in TinyMCE,
but if I say Save & Close and I refresh
[00:05:06.71] my Low-Flow Showerhead page, I now have
my image displayed in the circle style.
[00:05:12.09] Now this particular image was a little
bit wide in terms of a rectangle,
[00:05:16.52] so it's applied the rounded corners to the
edges and it looks kind of a like a oval.
[00:05:20.18] But I have another page where this
particular circle works really well,
[00:05:23.88] it's over on the About page, this
particular image is sized more like a square
[00:05:29.58] and when you apply the circle
style to it, it looks really good.
[00:05:33.05] So if I do that now and I go to my
About Articles and I click on the About
[00:05:40.38] article and I click on this image and
I click on the tree, click on Appearance,
[00:05:46.14] click on value here in the Class dropdown
and type in img-circle and say Update
[00:05:51.91] and Save & Close, here on the About page
you'll get a sense of a real circle for
[00:05:56.85] this particular image.
[00:05:57.85] So let me show you what
the Polaroid effect does now.
[00:06:01.29] So let's go to the Products page and
you see here we have this picture of this
[00:06:06.14] girl holding a light bulb, I am going
to go back to my back-end of Joomla!,
[00:06:10.86] go back to my Products and click on
the actual Products page itself.
[00:06:17.35] I'm going to select this image right
here inside of my editor, click on the
[00:06:22.15] tree icon and under Appearance, under
Class, under value I'm going to type in
[00:06:28.35] img-polaroid and say Update, and Save & Close.
[00:06:34.81] And when I refresh the Products page
here you'll see that we have this lovely
[00:06:38.78] Polaroid effect, so you have the
little bit of white space here with the nice
[00:06:43.14] little border around it.
[00:06:44.39] Now I wouldn't necessarily advise you
to use all three effects all over every
[00:06:48.20] page of your Web site.
[00:06:50.00] I would recommend that you would pick
one of these effects maybe, and use it
[00:06:53.60] consistently or maybe two of these effects.
[00:06:56.43] So like the circle effect is really
quite eye-popping, maybe you want to use
[00:07:00.71] that sparingly on a handful of pages
and then every other image on your site
[00:07:04.46] maybe you treat with the Polaroid or
the rounded corner effect, that would be a
[00:07:08.01] nice treatment for your Web site, rather
than just sort of sprinkling these three
[00:07:11.78] effects anywhere they happen to appear.
[00:07:13.90] But I did want to show you how all of them
work.
[00:07:15.87] So if you remember from Bootstrap in
the documentation, img-rounded, img-circle
[00:07:19.83] and img-polaroid, you can add those to
your image tags inside of your HTML and
[00:07:27.34] get some great effects for your Web site.
[00:07:31.40]