Our Products section of the Web site has a series of somewhat static pages.
There is a bunch of text on these pages and there's an image associated
with that particular block of text.
We can go and we can click through all of these and you'll see there are just
lots and lots of images, there are little bits of text here and there.
What I'd like to do is I'd like to improve the look of these pages
by adding a little bit of style, a little pizzazz to the images themselves.
This is new in Joomla!. Because this version of Joomla!
is built with Bootstrap and because this template is integrating Bootstrap
as part of its design, we can leverage any of Bootstrap's classes that are
contained, and provided that we apply that class in the way the Bootstrap
is expecting, we can apply those styles to our Web pages.
One of the most striking ways that we can do this is where our images are concerned.
So right now these images are just square images that have come right down and out
of Photoshop and they are appearing here in our Web page.
But Bootstrap has three different ways you can style images.
And that is in the Bootstrap documentation, so if you go to getbootstrap.com,
you'll wind up on this home page.
And if you go to the base CSS navigation item and then click on images down here,
you'll wind up seeing a little demonstration of the way that Bootstrap
can style these images for you.
So by applying a class of img-rounded you will get rounded corners on the edges
of your image, and that class you have to apply to the image tag.
If you have img-circle applied to the image tag, you'll actually get your image
displayed in a circle.
And finally if you apply a class of img- polaroid, you'll get your image with a
nice little border around it and this little space in between is a white fill.
Not necessarily obvious here on a white background, but I have looked at this
effect on pages where the background was not white and that will be a white wrap
around that picture followed by the little gray border after that.
So I want to show you how we can apply these three classes to our images inside of Joomla!.
So here in the back end of Joomla!
I'm going to go to Content>Article Manager and I am just going to work with
my Products, Articles right now so I am going to Filter by category and go to
Products and here are my Products pages for this particular Web site.
So let's say I start here with the Energy Bulbs, if I click on that, I have
this picture of this woman here who is looking at light bulbs at the store.
What I really need to do is click on the image itself to select it and then here
using the little tree icon here in TinyMCE if I click on that, this will allow
me to apply the class that I want to apply.
I've not shown you how to use this for inserting images because it doesn't have
an interface for uploading images into the Media Manager and you have to know
the URL for the image in order to include it in your Webpage,
which is definitely less convenient than the Image button at the bottom of the screen
which is what we've been using to work with images to this point.
However, this tree icon has the interface for putting a class inside of an image tag
and that is what we're going to do right now.
So if I switch over to the Appearance tab here for our pictures, here is where
I can apply my Class, this is the CSS Class and right now it's set to Not Set.
So what I want to do is pick value from right here which will allow me to type something in.
So if I type in img-rounded no dot in front of it and say Update, absolutely
nothing is going to happen in TinyMCE.
The reason why is TinyMCE is currently not hooked up to any of our Bootstrap
styling, so it's not going to show right here inside of TinyMCE.
One of the advanced things you could do with TinyMCE is have it pull
a stylesheet, may be that stylesheet contains these three image classes in it,
so that you could just pick them from the dropdown.
That would be a great way to handle this for your client.
But you're not going to see the styling here inside of TinyMCE at the moment
because TinyMCE doesn't know what img-rounded happens to do with this particular image.
But once we hit Save and we go to the front end of the Web site and we go to the
Energy Bulbs page, you'll see that we now have an image with rounded corners.
So that's quite nice.
If we go to the Low-Flow Showerhead, I think this one might look good with a
circle around it so let's hop into the back end of Joomla!
now I am going to hit Save & Close and I am going to go to the Low-Flow
Showerhead article, once again click on the Low-Flow Showerhead and click on
the tree icon here in TinyMCE, switch to the Appearance tab, in the Class
dropdown choose value and this time for the value I am going to type in
img-circle and say Update.
Again I won't see it here in TinyMCE, but if I say Save & Close and I refresh
my Low-Flow Showerhead page, I now have my image displayed in the circle style.
Now this particular image was a little bit wide in terms of a rectangle,
so it's applied the rounded corners to the edges and it looks kind of a like a oval.
But I have another page where this particular circle works really well,
it's over on the About page, this particular image is sized more like a square
and when you apply the circle style to it, it looks really good.
So if I do that now and I go to my About Articles and I click on the About
article and I click on this image and I click on the tree, click on Appearance,
click on value here in the Class dropdown and type in img-circle and say Update
and Save & Close, here on the About page you'll get a sense of a real circle for
this particular image.
So let me show you what the Polaroid effect does now.
So let's go to the Products page and you see here we have this picture of this
girl holding a light bulb, I am going to go back to my back-end of Joomla!,
go back to my Products and click on the actual Products page itself.
I'm going to select this image right here inside of my editor, click on the
tree icon and under Appearance, under Class, under value I'm going to type in
img-polaroid and say Update, and Save & Close.
And when I refresh the Products page here you'll see that we have this lovely
Polaroid effect, so you have the little bit of white space here with the nice
little border around it.
Now I wouldn't necessarily advise you to use all three effects all over every
page of your Web site.
I would recommend that you would pick one of these effects maybe, and use it
consistently or maybe two of these effects.
So like the circle effect is really quite eye-popping, maybe you want to use
that sparingly on a handful of pages and then every other image on your site
maybe you treat with the Polaroid or the rounded corner effect, that would be a
nice treatment for your Web site, rather than just sort of sprinkling these three
effects anywhere they happen to appear.
But I did want to show you how all of them work.
So if you remember from Bootstrap in the documentation, img-rounded, img-circle
and img-polaroid, you can add those to your image tags inside of your HTML and
get some great effects for your Web site.