Showing our images in the frontend

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:

Showing our images in the frontend

An interesting way to show the caption

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:

An interesting way to show the caption

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.

Tip

If you want to give it a try quickly, you can find the modified files inside the image_hover folder in the code bundle.

Adding a fresh full image pop-up script

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.

Tip

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 work
  • jquery.popeye.style.css—are sample styles to determine the plugin's look and feel

As 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:

Adding a fresh full image pop-up script

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:

Adding a fresh full image pop-up script

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:

Adding a fresh full image pop-up script

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.

Tip

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.14.245