So I'm looking at the Solar Blog page for my Web site, and I've a series of articles here.
They have got the big title and they have got a little bit of text here,
not all of them with Read More buttons but some of them have Read more buttons that
we can click on to go to the full article with a big picture down here on the bottom.
The page itself doesn't look terribly interesting.
One of the things that I'd like to add to this page is I would like to include
a tiny version of that image that I have associated with most of these articles,
and have that show here on this big Blog page and then once I click on the link
I'd like to go to a page that just has the large version of the image on it.
I don't want to see the small version of the image when I go to the full-size page here.
I'd also like some way that these images become standardized, so that the small
images are all of more or less the same size, the big images are more or less of
the same size that they occur more or less on the same places on the page.
So to do that, there is actually an interface for doing this inside of Joomla!
and we haven't taken a look at that yet, so let's go ahead and look at that now.
If I go to Content and I go to the Article Manager and I'm going to go ahead
and filter my articles here just to show me the articles that are in the Solar blog.
So I'm going to Category and choose Solar from my list, and I have a list of my
four articles here that are part of the Solar blog.
And remember that two of these are featured;
they are showing up on the News & Info page.
So if I click on let's say Farmers installing solar power in record numbers,
this is my article as it currently stands.
I have my introductory text here at the top.
The red line indicates the Read More break, and so that's where the button goes,
that says Read More, I click on it I go to a full version of the article that
has the image here underneath.
And so far I haven't scroll down the page to show you the rest of what's here,
but there is in fact a little bit more.
Down here at the bottom of the page is this panel of Images and Links, and so we
can set some standardized images or standardized links for each of our Joomla!
articles that always show up in the same places on these articles,
they will always appear the same kind of way.
So that's kind of nice because it adds a little professional polish to the site
in that the placement of these images is always the same.
So what I'm going to do is I'm going to set up an intro image and a full article
image for these articles now.
And the way I'm going to do that is where it says Intro Image,
we have to choose one. So I'll hit my Select button.
This will put me into my Media Manager and I don't have any of these small
versions of these images available.
If I go into my Blog folder though, I can certainly upload these.
I can hit my Browse button and I'm going to go to Exercise Folder and Chapter 6,
and you see that I have already prepared for you three small versions of the
pictures that appear in the solar blog.
If you select these and just hold down the Shift key we can go ahead and say Open
and Upload all of them at once, which is kind of nice.
And now what I can do is choose the small version of the farmer picture,
which is this one here, I know that because I can roll my mouse over it and the tool tip
tells me this is the -sm or the small version.
I'm going to go ahead and pick that and say Insert.
And then it's going to ask me how I want the image floated.
This is set Globally in the article option, so you can adjust this on a
picture by picture basis.
But if you do it on a picture by picture basis, you then have to go through and
edit those if the boss comes back to you and says, oh by the way, all those
pictures that are on the left, now I'd like them all on the right.
So I'll show you how to change that global setting in a moment.
We'll put it in some Alt text, Some solar panels in the farmer's field,
and likewise down here I'm going to do the same for the full article image.
Even though we already have the full article image appearing inside of the
article, I'm going to put it down here now.
So here I'm going to go to the full-size version of this picture, and I'm going
to click on this to insert it.
I'm going to actually take my same Alt tag from here and paste it down here.
And then inside of my article the picture that I have here now, I'm not going to
need this anymore because what will happen is the big picture will be fed in to
this article through the interface down here at the bottom of the page.
So I'll go ahead and now just delete that image that I have here, and I'm going
to go ahead and say Save & Close.
And now when I go to the front end of the Web site and I hit Refresh, I have my
small image here inside of my article followed by my text and if I click on the
Read More link I go to the article where I have the full-size image here.
What's happening over here in the corner is that this image is quite large,
the Login form is sitting on top of the image and that's why you see the corner of
the image cut out here.
I've told you for a while I'm going to be getting rid of this Login form which
will solve that problem.
The other thing that would solve this problem is to scale this image and make it a bit smaller.
Right now it's 900 pixels wide, you could certainly make it a smaller image for your Web site.
And then underneath of that is all of the text associated with this
particular article. So that's a nice presentation.
It's very, very consistent and if we've sized our images consistently
in Photoshop before we upload them into Joomla!
then we'll have a nice professional effect for the solar blog.
So what I'm going to do now is I'm going to edit the Announcing K-Eco Mini Panels,
the Embry house, I'm going to go ahead and edit those exactly the same way.
I'm going to call out the small and the large versions of the image and delete
the image that's already present in the article.
And that way my Solar blog will be configured with these images,
and I'm going to go ahead and do that now. I'll catch you on the other side.
Okay, so I just finished configuring this last article, and now I'm going to hit
Save & Close and if I refresh the page here on my Solar Blog you'll see that
I have some small pictures.
They appear in the same place here, that's looking great, and then if I click on
the full version of the article, in all cases I've got the larger size picture
here with the text that's located underneath. All right!
So I promised you that I'd show you how you can consistently float these pictures
so that they appear the same way in all of these articles globally in one fell swoop.
So the way that we do that is here inside the back end of Joomla!
if we go to Options and then from Options we're going to go to the Editing Layout.
This is controlling the layout of the article editing page, and the
Administrator Images and Links, these are the links that are occurring at
the bottom of those articles.
And so we've got that turned on right now so that we have that available to us.
If you're not using this feature in Joomla!
all of those images and links underneath the article you can turn this off,
and the way you would do that is just hit this No button here and save these
settings, and all of those extra fields at the bottom of that page for editing
an article would all go away.
Scrolling on down here a little bit further you can configure the way your links
are going to open in a new window, or open in the same window.
I didn't use the links so I'm just going to leave those set the way they are.
And then the last part here is the Intro Image Float and the Full Text Image Float.
Right now these are both set to float to the Left, what I'm going to do is set
them to float to the right.
And for the Full Text I'm actually going to say no float at all,
because those are so big I just want it to appear at the top of the article.
So I'm going to go ahead and say Save & Close, and now when I go back
to my Solar blog page these images look like they haven't moved.
That is possibly either a bug in Joomla!
or it could be that this template is not configured to float these images correctly.
But then if I go into the full-size article, there is my image, and now that
I'm not floating these, look at that, they don't appear in this right hand column
anymore and they are scaling much better to the size of the Web page
so that definitely helps up.
We can check out some of these other pages here in the Solar blog as well.
So if we look at the Mini Panels here that is also looking really, really good.
So this functionality in Joomla!
is not a full CCK, a full Content Construction Kit, it's a very, very minor
addition to Joomla!'s article editing capabilities that would allow you to put
in a small version of the picture and a large version of the picture
in a consistent format inside of a blog layout like this.