Joomla!’s media manager doesn’t do much in the way of image editing, none in fact. It’s not facebook. You’re expected to upload images at the correct width and height. And its up to you to control the file size of the image. Even if it did manipulate images for us, its still good to know a little about the different image types, especially if you’re maintaining a website.

A few of our users have been uploading 500Kb PNG images for articles. That’s about half a MB or the size of a small Youtube clip. Not ideal for an article. Years ago when internet speeds were slower, Gerben Hoekstra was recommending that file sizes shouldn’t exceed 25Kb http://www.weballey.net/html/plaatjes.html He has some practical advise for beginners and is responsible for getting me into HTML before XHTML came out. He also said you should only use JPG or GIF file types, because not all browsers supported PNG. This was because Microsoft’s Internet Explorer 6 (IE 6) couldn’t support the transparency of the PNG (when all other browsers could). PNG can actually be a great file type, when used for the right graphic. I might get into that in another article though. And at the time of Gerben writing that I think IE6 was at its peak usage. Thankfully things are changing, last month its use was down to 7% on the w3schools site http://www.w3schools.com/browsers/browsers_stats.asp (also a great learning place).

File Size
So Internet speeds have increased, but its important to remember not everyone is on a high speed connection. And in some countries (including NZ) some home users don’t understand the point for broadband. So we’re dealing with a range of internet speeds. And as I’m sure Gerben would agree, even on high speed connections, page load is still important. Not only is it the users page load we’re concerned about but also server strain. If your site suddenly gets a burst of traffic you don’t want the server to crash, and stop the free publicity you’re receiving. And with services like Facebook, Digg, Twitter, Stumbleupon, any site can potentially experience these peaks. So you want to be prepared.

You can check the size of a file on Windows, Ubuntu (I assume Mac as well) by right clicking on the file, and select the properties option at the very bottom. A pop up appears with seemingly useless info. There are three major uses I have for this.

1. Is the Size value, indicating how much space the file/image takes up on the computer. And in the web world indicates how long its going to take to transfer from the server to the users browser.
2. The Created value, lets you know when the file/image was made.
3. And “Type of file” lets you know if the image is JPEG (the web short hands this to JPG), PNG or GIF.

You should also be able to right click on an image in your browser, and similar options should come up. This will differ depending on the browser you use.

Number Of Images On A Page
Yes the obvious one is the more images on one page, the more data there is to transfer, making the page load slower. But its not just the combined image file size we’re worried about. The amount of images does matter, because modern bowers limit themselves in the number of requests the can make to one server at one time. That might be a mouthful to take in, but think of it like you can only carry 10 bricks at one time, after you’ve dealt with those heavy bricks you can then start to think about the next 10.  With 30 images on a page, the browser can only think about the first 10 before thinking about next 10. For a standard article, I’d try and keep image usage to around 5 (if I’m lucky to have 5 images on the topic). There are exceptions. Either the page is an image gallery of some kind, in which case the user should be aware they’re going to an image gallery, and hopfully prepared to wait. Or it’s a long instructional article where 30+ images are required to illustrate how to do something, again the user shouldn’t mind waiting for this.

There are advanced techniques for those of you who want it. Lazy loading images seems to be all the rage at the moment http://en.wikipedia.org/wiki/Lazy_loading If you Google Lazy Load you should find some Javascript libraries that do this for you. Lazy loading loads the images when the screen space of the image appears on the users screen. So the browser doesn’t have to worry about the images at the bottom of the page unless the user scrolls that far.

I think this article is getting too long to go into file types here. So I’ll wrap up. If you have the commercial software Photoshop, great. The short cut to export for web is Shift + Ctrl + Alt + S you’ll then be able to select your file type and see the file size before you save. If you don’t have Photoshop  but want to get into making you page load more efficient, and become a better web publisher, then use Gimp! I found it a little harder to learn than Photoshop, but that may be because I’m used to using Photoshop. Its free open source like Joomla! compatible on most operating systems http://www.gimp.org/ There is enough documentation to publish a small book, and translated into many languages http://www.gimp.org/docs/ And these days it capabilities are phenomenal, it can do 90% of what Photoshop can do.

If you can learn to effectively save images you might help SEO your site as Google will be soon (if not all ready) be factoring the page load of a sites into the influencing factors.

I hope that was useful. There is quite a bit in the way of images. I might continue on in another post

I helped a friend out last week with a few tweaks to a GPL licensed Wordpress theme, her site is all about iPad accessories and you can check it out at that link or by clicking the screen shot.

I got to thinking while we were tweaking a couple of layout elements that this Wordpress theme would probably be very well received by the Joomla community. Because the theme has been released under the GPL license it means we have the authors permission to modify and extend upon the existing work and redistribute it as a Joomla template. Of course we would give plentiful and due credit for the creators great work

Anyway, before I begin work on porting this theme  I would like to see a show of hands from people interested in having this available as a free Joomla template in our collection.  Because we can’t see your hands eagerly flying up over the interweb (not without a web cam anyway) I’m going to ask for a round of comments instead.

When the comments reach 20 we will begin work. From there it should just be a couple of days work.

What do you say?

If you LOVE Joomulus please show your appreciation by using the social bookmarking links at the bottom of this post. Or you can go ahead and DIGG right now! Or add it to your delicious bookmarks!

Updates include:

The mouse pointer displays as a hand when hovering over tags – as you would expect for a hyperlink.

X and Y scaling is fixed – you can get an elongated spread of tags by adjusting this value as seen in our Joomulus Demo.

Language/character sets included in this module are as follows:

1. English/Basic Latin
2. Greek/English
3. Japanese – Kana
4. Bulgarian/Russian/Serbian/English – Cyrillic Base
5. Portuguese/Polish/English – Latin Extended Base

We plan to release Turkish, Chinese and a number of others very soon – time did not allow for this release – leave your comments and suggestions below.

DOWNLOAD HERE

The template now features built in Son of SuckerFish dropdown menus, and we have integrated Drew McLellan’s Transparency Fix for IE6 and below.

We have also added a SlideShowPro Installation to the demo site. NOTE This is not included with the template as it is a commercial product and needs to be purchased seperately – However we are offering a new Joomla and SlideshowPro setup service,  where we set up your Joomla website with SlideshowPro and the Director Image manager.

To download or upgrade TransBear please visit the TransBear – Transparent Joomla Template page.

Some things you should note are as follows – The transparency fix requires an image named x.gif be placed in your site root directory. We have included this in the template installer – but it is not possible to install this into the Joomla root via the template installer- the file named x.gif will be in your site template root directory after installation and you should move this to the site root so that the transparency fix works correctly for IE6 and below.

Additionally for the drop-down menus to function you need to apply a module class suffix of  _sf to your menu module and publish in top-nav position. As shown in the screenshot below:

Check out the demo site which features Artificial Christmas Trees displayed with the K2 content construction kit.

Leave us a comment if you like it – and leave a comment with a link if you use it for your Christmas web promotions.

For more information, and to download, visit the Joomla Christmas template page on the main site.

Our Free Halloween Joomla Template is live and the official template page can be found at the previous link. There you will find links to download, source files, documentation of module positions, etc.

The demo site was designed around the idea of a simple Halloween costumes store. I didn’t really get time to flesh out the store with sample products so I hope you will just appreciate the overall aesthetic of the design and then put it to good use in your own projects.

Below is an image of my finished artwork in Adobe Fireworks – everything is on layers so elements can be switched out, edited, etc.

An example of how useful this can be is a quick hue/saturation filter I applied to the background layer, which gives us a really nice alternative effect:

The source files for this project are available to premium Joomlabear members in our downloads area.

I wanted to talk briefly about how I created the artwork and give credit where credit is due.

I’m very proud of the moon – this was created by cutting out an actual photo of a moon and then sitting it over the top of an orange gradient – I then changed the blend mode to Freeze to give a very orange Halloween look.

The font which I used for the logo, and which looks like dripping blood, or something right out of the Rocky Horror Picture Show is called Creepsville. It’s free for any use so you can grab this and make your own logos, etc.

The background was created using Photoshop, I took an image that  had a large amount of the night blue color in the template, and ran a Gaussian blur over it. I then used a number of excellent free photoshop cloud brushes from Qbrushes, and set them to black – overlaying these over my blue background.

The various Halloween icons, such as the Jack-O-Lantern, spider, cat, crow, bats and witch (you did spot the witch didn’t you?) were taken from an excellent Halloween Photoshop brush set from Obsidian Dawn. Love your work guys.

Hope you all enjoy the template! Leave a comment and let me know if you found this useful, and what projects you are using the template on.

Update The Halloween Joomla Template is now available for download. You can also check out my post on the making of the Joomla Template for Halloween which lists various resources that were used.

Ok, ok, I know we’re a little late to the party on this one as Halloween is just around the corner – but we have a brand, spanking new Halloween Joomla Template for you, and it’s just hours away. I have a little bit more testing to do and I need to check the XML and make sure all the required  files are referenced correctly. Then we’ll put it up for you all.

I know it would have been more useful to many of you earlier in the piece, but I thought I’d put it up  anyway as I’m quite proud of the design, and it may be useful to people who want to run some kind of last minute Halloween promotion – or maybe give your Joomla site a face-lift just for Halloween day!

You can preview and marvel at this little beauty, if you are in the mood you could even buy yourself a nice Halloween costume and have it delivered! Just click the link.

Now this is a free Halloween template for Joomla – so support will be limited. I will also be asking people not to redistribute this template under any circumstances.

Stay tuned for the release!

Web developers tool bar can be found at https://addons.mozilla.org/en-US/firefox/addon/60

You also need FireFox http://www.mozilla.com/en-US/firefox/personal.html

This time we’re looking at how a gradient can be added to the edges of a background image so that it seamlessly fades into the background color of your HTML page.

Basically we will be turning the image below, and to the left, into the image on the right – apologies in advance for the long-winded video – I’m still getting the hang of talking while I’m working and sometimes it’s hard to remember what I want to say while I’m concentrating! Bear with me…

And a big thanks to Matt for letting me play with his really nice pool table background image – you can see the background in action at Matt’s Pool and Snooker site – click here.

I should also add that the software used for image editing in this video is Adobe Fireworks – You could use similar techniques to achieve the same effect in Photoshop, Gimp, etc.

Excuse my voice – I’ve had a wicked cold/flu and my mic isn’t that great – but I do think this is a great format for future reference materials/tutorials. Let me know what you think in the comments.