Tutorial: Adding Random Dynamic Images to NewsPortal Pages

Tutorial: Adding Random Dynamic Images to (iJoomla) NewsPortal Component Pages…

This is an easy, step-by-step tutorial (…..designed for beginners, and with screenshots – see bottom of article…..) to show how to display separate (NON-ARTICLE RELATED) & dynamic images in your NewsPortal Layouts.

There are 2 methods available to you…..

• Method #1 - Static Single Image: This method  is very easy & fast but is not dynamic – just insert an image directly into the layout tables of NewsPortal using the “insert image” option in the WYSIWYG editor – in other words, insert one image into each NewsPortal layout (Home, Section & Category)  just like you would for an article. Whilst this is nice & quick, it means that you can only have ONE image for your homepage, one for all your sections, and one for all your categories etc………

• Method #2 – Dynamic, Multiple Random Images: The 2nd method is more involved & takes a lot longer, however, once done it means you can have separate, dynamic images for each of your NP sections & categories using a rotating / random image module (so you will then be able to have ie: 6 images on rotation for each different NP page on your site….). It also makes it very easy to change images in the future without any disruption – you simply insert any new images into the rotating modules folders….

The following is a step-by-step tutorial for the 2nd method:

Instructions:

1./ Install Advanced Module Manager (it’s 100% free & it’s fantastic) – Advanced Module Manager by Peter Van Westen, NoNumber is much better to use than the standard module manager that comes with Joomla, and you will probably need this anyway for the granular control of NP sections & categories. It also has a feature to restrain modules to a certain component plus gives more controlled selection / exclusion of categories, sections etc. Another great feature is the “Tool-Tip” feature (I use the tool-tips to include details for easy reference in the future when looking through modules from the back-end……)

2./ Select suitable images for your homepage & for each of your sections & categories… Decide on a size that will suit them all (it’s easier to stick to one size or one width, plus it will look neater). Reduce the images to your chosen size so that they are optimized & will load faster (use Photoshop or another such program to do this).

3./ Create a folder called ie “NewsPortal” & then within it create sub-folders for each image “group”. If using the standard Joomla Random Module, the folder(s) should probably be created within your “Stories” folder (which is within the “Images” folder….). You will need to create a separate folder for each category & section on your site.

4./ Upload your images into the new sub-folders (using eXtplorer program is good as it will allow you to upload multiple files at once).

5./ Go to “Module Manager”. Select a random image module to use to display your images -( the standard mod_random_image module that comes with Joomla is fine) & make copies of the module.

- One copy of the module is required for each of your site’s sections, categories etc. plus also one for the homepage

- Give each one a descriptive title (ie: “Random-Image-NewsPortal-Homepage”, “Random-Image-NewsPortal-Section-Blog” etc) it doesn’t matter if the title is long, as the title will not be displayed anyway.

6./ Configure the modules to your specifications & assign each module to the specific NewsPortal position you have chosen (IE: newsportal2 position) – but DON’T enable them yet ….

Notes:

- Remember to insert the location of the image folder into each module’s configuration (each random module will get images from a different folder).

- Don’t forget to assign your random image modules to the section or categories menu items that you want the particular images to show on – you need to configure the following:

• The Menu item(s) that the random image module is going to display on/ be assigned to….

• The NewsPortal Section page it is going to be assigned to…..

• The NewsPortal Category Page it is going to be assigned to….

• The Component that the random image module is going to be assigned to (NOTE: this control is only available if you use Advanced Module Manager……).

7./ Go to “Layouts” in NewsPortal. Open up a NP layout & place the module syntax – ie: { module_position2 } – where you wish to display the random images module -  (See screenshot 1) – Once inserted, press save & then repeat for each of the other NP layouts. BIS TIP: I find it better to just re-type the syntax, as sometimes cut & pasting within tables can result in dirty code and can cause problems….

OPTIONAL: If you wish the rotating images module to reside above your “Top” article, like on our site, then I recommend you disable the “Top” article from displaying the article’s own images (go to NewsPortal>> Zones>> Top, & then go the to the “Image” tab – set it to “NO”. ). This means that your top article will no longer display any images – this is useful because this is an important area & it’s the first thing visitors see – if you don’t disable the image function you may sometimes get images showing up which maybe are not-so-worthy of a front-page position…. disabling it & using the rotating images means you can instead have great, eye-catching images that you can hand-pick & which doesn’t change with each article, plus the size / dimensions will stay constant regardless of the article’s images….. (which I think is better).

8./ Go back to Joomla’s “Module Manager”, enable all your random image modules & you’re finished!!

You should now have random images showing on each of your NewsPortal pages.

I hope this tutorial has helped you get the most from the terrific & very flexible component called NewsPortal.

Screenshot 1 – NewsPortal Layout Tables

Screenshot 1 - NewsPortal Layout Tables

Screenshot 2 – Use long, descriptive titles….

NewsPortal Tutorial Screenshot 2

Screenshot 3 – Configuring your random image module…

NewsPortal Tutorial Screenshot 3

(……and don’t forget to include each folder location….)

NewsPortal Tutorial Screenshot 4

What Others On This Site Are Reading:

Related posts:

1. JCE Editor Tutorial – Creating Groups To Restrict Access
2. How To Get Updates Of Joomla Vulnerable Extensions List Within Your Joomla Site
3. Tutorial – How To Quickly & Easily Change CSS Colors Using The Search & Replace Function
4. Product Review – iJoomla News Portal Extension
5. Free Promotion For All Our Followers On Twitter…..

About Karen Banting
Karen Banting is the primary author for Business-In-Site.com and writes about a variety of topics, including: Online Business, SEO, Marketing, Software and more....
View all posts by Karen Banting →