So in the last video I added this random image to the home page and every time
I refresh the page I get a different picture that will load here or at least
it picks one at random and sometimes that's a different picture and sometimes
it's the same picture.
But what I suggested at the end of the last video was, what if instead of putting
this over here in the left column, what if I had this picture appear right here
underneath the content for the home page, maybe as a large format picture.
Wouldn't that be kind of cool? And in fact that is possible.
What we need to do though is we need to take our module and make our module
appear inside of an article.
Normally modules only appear in module positions.
Those module positions are determined by the template, and I showed you how to
figure out where those module positions were in the first video of this chapter,
but you can also make modules appear inside of articles and occasionally, in a
situation like this, that's quite helpful.
So what we are going to do is a two-step process.
First of all I am going to edit my article and I am going to add a little piece
of code I'll show and I'll assign a name for that particular module position,
then I am going to go to the back end of Joomla!
in the Module Manager and I will take my module for the random image
and assign it to the module position that we just created, so let's go ahead and do that now.
In the back end of Joomla! I am going to go to Content> Article Manager and I am going to find
my home page article, it's this one here called Harnessing wind and sun for a
cleaner, energized planet.
At the end of the paragraph here I am going to add the following code,
it's a curly bracket followed by the word loadposition, all one word, followed by a
module position name.
I would not want to use an existing module position name, I am going to have to
create a new one here for this particular module position, I am just going to
call it random, because that's what going there and then a curly bracket
to close everything off.
So curly bracket loadposition, all one word, followed by a module
position name and you can make that up, you can call it anything you want,
you could call this George or Sally or Martha, but it's not necessarily self-documenting.
By calling it random I have a pretty good sense of what kind of module is going
to go there, it's the random image module, go ahead and say Save & Close.
And now I need to assign the module to that position, so I am going to go to
Extensions>Module Manager and down here you'll find the Random Image, I am going
to click on that, and instead of position-8 I am going to actually type in this box
that appears when I click the Down Arrow, I am going to type in the word random,
that is the position that I just made and I am going to go ahead and hit
my Enter key on my keyboard, and that will take that position and put it there
into the position slot here, it won't be anything that I'd pick off the dropdown
I'll actually have to type it in.
The other thing I am going to need to change is here under Basic Options,
I have originally set this width 200 pixels, but my images are actually set up to be
750 pixels wide, so I am just going to change this to 750, and then I am going
to say Save & Close.
Now when I refresh the home page my random image appears here at the bottom of
the page directly underneath the content, and as I refresh the page I get a
different picture showing up there on the bottom of the page.
Also remember that this Protostar template is responsive, so as I make my page
smaller notice that my image will scale accordingly, so there we go,
we're watching that image just scale right here and as we get really small towards
mobile phone size, this image will continue to shrink.
So that's a very nice treatment here for this page, I really like the way that
that's turned out, and that's how you embed a module inside of an article.