Of course, having our images uploaded is just the first step, now we need to
show these images, but this is not going to be that hard. Open the
components/com_tinynews/views/tinynews/tmpl/default.php
file, and add
the following code:
<div class="news_box"> <?php if(!empty($new->image)){ ?> <img src="<?php JURI::base(); ?>administrator/components/ com_tinynews/images/<?php echo $new->image; ?>" alt="<?php echo $new->caption; ?>" width="165px"/> <p><?php echo $new->caption; ?></p> <?php } ?> <h1><?php echo $new->title; ?></h1>
First, if we have some data in the image field, we prepare the
img
tag. Note that after the JURI::base()
; method
we have added administrator
, but when we were working in the
admin part, this wasn't needed. The JURI::base()
; method will
distinguish where we are.
At this point, with the images included, our site will look better. The next screenshot is only a demo:
In this section, we will make our captions interesting. At present, they are placed in a very basic way. And, of course, we are here to make things a lot more interesting as possible.
For this we will need to make some changes to our code and of course add some jQuery. The result is going to be similar to the effect we can find at the following link:
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/.
We will start working right away. We are going to the HTML first, as we should
have the required file, default.php
, already opened. If not,
you can find it in
components/com_tinynews/views/tinynews/tmpl/default.php:
... <?php if(!empty($new->image)){ ?> <div class="news_image"> <img src="<?php JURI::base(); ?>administrator/components/ com_tinynews/images/<?php echo $new->image; ?>" alt="<?php echo $new->caption; ?>" width="165"/> <div class="caption"> <p><?php echo $new->caption; ?></p> </div> </div> <?php } ?> ...
The code is mostly the same, but we have added two DIVs: one that will contain the image and the caption and the other only for the caption. We will put these two DIVs to good use very soon.
The addition of these two DIVs will make it necessary for another change. We need to change the following code:
$('#news_container div').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') });
The new code should be as follows:
$('#news_container div.news_box').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') });
Previously, we didn't need to distinguish between DIVs for our pagination. Now, as we have created some more DIVs, we need to distinguish between them.
Having created the DIVs, we need to add the style, and we will do that in
the components/com_tinynews/css/frontend_style.css
file:
.news_image{ width: 165px; height: 76px; margin-bottom: 5px; background-color:#9A0000; color: #ffffff; overflow: hidden; position: relative; } .news_image img{ position: absolute; top: 0; left: 0; border: 0; } .caption{ padding: 10px; }
We can see some basic styles here, the first being the container with the size of the image we want to put in it, the next being the image, and the last a padding for the caption container.
With these styles added, we have enough CSS styles for now. Go back to
the
components/com_tinynews/views/tinynews/tmpl/default.php
file. We
will add the following code:
... $('.news_box').equalHeights(); $('#news_container div.news_box').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') }); $('.news_image').hover(function(){ $('img', this).stop().animate({top:'76px'},{duration:160}); }, function() { $('img', this).stop().animate({top:'0px'},{duration:160}); });
I've highlighted the new code and the rest of the code is only for
reference. This little piece of code will make things move. As you can see we
are targeting every .news_image
element. We have added
the hover
function to each element, and inside it we
have two other functions.
The first one will be called when the mouse pointer enters the element and the
other when the mouse pointer moves out of it. These two functions are very
similar, and they make use of the animate
function. Let's
take a look at the first function:
$('img', this).stop().animate({top:'76px'},{duration:160});
Here we target the img
element inside the
.news_image
DIV. However, it is important to note the
this
element because if we target the current element without
the this
, all elements will be target.
Then we use stop
to make sure that no other animations are
being done at the moment. Next, we use the animate
function
to move the image to the top.
This code is fun to try, and this time it would be great if you could give it a go. Meanwhile, the following screenshot shows the result:
The first image looks exactly as before, but to the right, you can see another image. However, with the mouse pointer hovering over it, the effect looks much better when seeing it in a browser.
If you remember, when we inserted the image we didn't limit its size. However, on the frontend, we are forcing the image to be smaller. Wouldn't it be great if our users can see the full-sized image? Sure it would be, and that's what we are going to do.
In the earlier chapters, we have used some image pop-up plugins. But the one we are going to use now is quite different. I'm sure you are going to like it a lot, as it will add a touch of freshness to our site.
Good, first take a look at the plugin site:
http://herr-schuessler.de/blog/jquery-popeye-1-0-released/.
However, you can also find the plugin on the jQuery site by searching for popeye, or by using the following link if you prefer:
http://plugins.jquery.com/project/popeye.
First, download the plugin. Inside the packed file, we can find a folder
called lib
. We will take the
jquery.popeye-1.0.js
file from this folder, and copy it into our
own components/com_tinynews/js
folder.
Note that there's also a minified version. We can use this one instead, as in a production site it would be better. For development, I usually prefer not to use minified ones, just in case I would like to take a look at the plugin code.
When we have the plugin in place, we can continue with the preparative. What
we will need more of are some CSS files. There are some demo files in
the css
folder of the packed file we have
downloaded.
In fact, there are two CSS files:
jquery.popeye.css—are
the basic styles
needed for the plugin to workjquery.popeye.style.css—are
sample styles
to determine the plugin's look and feelAs we also need to use these two files, we are going to put them in our own
CSS folder, that is, components/com_tinynews/css
.
The plugin also makes use of some images, and we need to provide them too.
They are placed in the gfx
folder. We are going to copy the
entire folder into our component folder, that is,
components/com_tinynews/gfx
.
Now we can start working on the code. This time we are going to create a detail screen for our news. Therefore, we will see a page with all the news, and then a "read more" link for the fully detailed news, where we will use this new plugin.
We will edit the
components/com_tinynews/views/tinynews/tmpl/default.php
file:
<h1><?php echo $new->title; ?></h1> <p><?php echo substr($new->text,0,256); ?></p> <p><a href="<?php JURI::base() ?> index.php?option=com_tinynews&task=detail&id=<?php echo $new->id; ?>">Read more</a></p>
We will use the substr
method to limit the amount of text
we want to show so that we have something new to show in the detailed view. Then
we create a "read more" link, passing a task called
detail
and the ID of the element.
Next, changes are needed in the
components/com_tinynews/tinynews.php
file. We will change the
following line:
$controller->execute($task = null);
The changed code will be as follows:
$controller->execute( JRequest::getVar( 'task', 'null' ) ); $controller->redirect();
As earlier, our component did not need to retrieve a task; we always defined it to null. However, now it's really necessary to catch the variable.
Now that we have prepared the tinynews.php
file, it can
retrieve the task. We need to create the task in our controller. Open
the components/com_tinynews/controller.php
file because
we are going to add a new, detailed method there, as follows:
function detail(){ JRequest::setVar( 'view', 'detailed' ); JRequest::setVar( 'layout', 'default' ); parent::display(); }
Here we define the view we want to use, detailed
, and the
layout for that view, default
. And, as we have defined a view
and a template, we need to create these two files. Let's first create the
view file, view.html.php
, in
components/com_tinynews/views/detailed/
, as follows:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); jimport( 'joomla.application.component.view'), class TinynewsViewDetailed extends JView{ function display(){ $model =& $this->getModel(); $news = $model->getnews(); $this->assignRef('news', $news); parent::display(); } }
There is nothing especially new here; we define the class and the default display method, and then get an instance to the model, as we need to retrieve some data from the database.
We are going to do just that with the getnews
method, and
then we will assign the retrieved data to the news
variable.
As I mentioned before, we were going to create the view and the template. The
view is just done, but before going to the template we are going to prepare the
model with the necessary getnews
method.
Create the detailed.php
file in
components/com_tinynews/models
. Remember that, by default, the
view loads the model called by the same name. The model content is as
follows:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); jimport( 'joomla.application.component.model' ); class TinynewsModelDetailed extends JModel{ function getnews(){ $id = JRequest::getVar( 'id', 'null' ); $query = ' SELECT * FROM #__tinynews WHERE id = '.$id; $this->_db->setQuery( $query ); $data = $this->_db->loadObject(); if (!$data) { $data = new stdClass(); $data->id = 0; $data->title = null; $data->text = null; $data->image = null; $data->caption = null; } return $data; } }
Here we define the getnews
method, and inside this method
we get the id
variable we defined previously in our link, to
know which record to retrieve. We execute the proper query and return the
necessary values.
These values, thanks to our view, will be available in our template
file,
components/com_tinynews/views/detailed/tmpl/default.php
, which is
the next file to be created, as follows:
<?php defined('_JEXEC') or die('Restricted access'), $document =& JFactory::getDocument(); $css = JURI::base().'components/com_tinynews/css/frontend_style.css'; $document->addStyleSheet( $css ); $css = JURI::base().'components/com_tinynews/css/jquery.popeye.css'; $document->addStyleSheet( $css ); $css = JURI::base().'components/com_tinynews/css/ jquery.popeye.style.css'; $document->addStyleSheet( $css );
In this first part, we load the necessary CSS files: our very own
frontend_style.css
and the two necessary for the
plugin—jquery.popeye.css and
jquery.popeye.style.css
. After this goes the JavaScript, as
follows:
$js = JURI::base().'components/com_tinynews/js/jquery.popeye-1.0.js'; $document->addScript($js); $js = " jQuery(document).ready(function($){ $('#popeye1').popeye(); }); "; $document->addScriptDeclaration($js); ?>
Here we load the plugin, and then we make a call to the plugin function:
$('#popeye1').popeye();
Having this in place, we can start placing some HTML, but first we get the variable prepared in the view, as follows:
<div id="news_container"> <?php $news = $this->news; ?>
We create a $news
variable, which will help us when using
the variable. For example, when showing the title:
<h1><?php echo $news->title; ?></h1> <p>
Now, create the HTML necessary for the plugin, as follows:
<?php if(!empty($news->image)){ ?> <div style="clear:both;"> <div id="popeye1"> <ul> <li><a href="<?php JURI::base(); ?>administrator/ components/com_tinynews/images/ <?php echo $news->image; ?>"><img src="<?php JURI::base(); ?>administrator/components/ com_tinynews/images/<?php echo $news->image; ?>" alt="<?php echo $news->caption; ?>" width="200"/></a> </li> </ul> </div> </div> <?php } ?>
As we did previously, we check if the image exits. Next we place the necessary
HTML, especially the popeye1
DIV we were referencing
previously, in our JavaScript code. Inside it, we have an unordered list with a
list of elements.
Although in our example we only have one image, the plugin supports having
more, which we can place by creating more li
elements.
Inside each li
element we have a link with an
href
pointing to the full-size image, and inside the
href
, a thumbnail to be used for clicking.
The final elements will be the text of the news and a return link, as follows:
<?php echo nl2br($news->text); ?> <br/><br/> </p> <p><a href="<?php JURI::base() ?>index.php?option=com_tinynews"> Back to all the news</a></p> </div>
And the file is done. I will put some images so that we can see the result of all this work. The result is seen in the following screenshot:
This is the default look and feel of our image. It is placed within the text with an indication of the number of images available.
Now we will see a screenshot representing what happens when we place the mouse pointer over the image:
Here we can see the caption for the image, the buttons that let us see the next or previous image in case there were more images, and the expand image button. If we click on the expand image button, we will see something similar to the following screenshot:
The full-sized image is placed just over the text. Nice, isn't it? Clicking on the image again will make it small. Of course, all of this is accomplished with a nice growing effect.
All the code we have been working on, except for the plugin, which you
must download, can be found in the code bundle, inside the
popeye
folder. Take a look at it and give the plugin a
try.
The plugin has many other options and possibilities. Take a look at these at the following link:
http://herr-schuessler.de/blog/jquery-popeye-1-0-released/.
If you have trouble with the popeye script interfering with the main menu, for
example, if the popeye image appears on top of the drop-down submenus, you can
solve it by modifying the CSS of the menu. It can be found in the
template's jj15/css/menu.css
file. Modify the
following code:
.menu{ margin-top: -3px; margin-left: -15px; }
The modified code is as follows:
.menu{ margin-top: -3px; margin-left: -15px; z-index: 9999; position: absolute; }
But do this modification only if the popeye script interferes with the menu, as otherwise it's not necessary.
18.225.255.187