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

We have a few Easter eggs for you, and plenty of stuff to talk about, Joomulus, Joomla template updates, new team members, and some really cool things that are almost ready to go live.

This newsletter has grown to over 30,000 subscribers, and Joomulus has just hit 22,254 downloads at the time of this writing.

We are honored that you are here with us.

New Team Members

We”ll start with the two most important things (because people matter most). Our two newest team members; German Bear and Little Bear. Little Bear actually joined us last year, but took a leave of absence for the first quarter of 2010, We are very happy to have her back. German Bear has been a great friend to all Joomlabears, helping out quietly in the forums with template tweaks since day one. In the past couple of weeks we formalized the arrangement and are now extremely excited to have German Bear on the team permanently. You will find both these friendly template pros in the forums, eager to give you a helping paw.

Joomulus

Joomulus has been updated, this is a security patch and all users are advised to upgrade. The more exciting news is that we have a K2 Joomulus prototype already developed and in use on a client site. This is driven by the K2 tagging system as opposed to manually entering tags. We will be releasing this in the coming weeks after a little more testing. We have also been hard at work on an enhanced solution to provide better support for other languages and character sets. This is also extremely close and you can read more about both these upcoming releases, the security patch and get your download link here.

BlackBearPro and PolarBearPro have been RELOADED

Two of our most popular templates have been given an overhaul and had a number of new features added:

1. You can now add your copyright notice easily via a template parameter
2. A footer menu for those little links that you need but don’t necessarily want to show in prime position
3. The color chooser has been relocated into the navigation bar
4. Better logo support, the logo is now clickable and directs users back to the home page.
5. Quickstart JPA – get started quickly by installing the Akeeba Backup powered quickstart installer. Have your own site up in minutes that matches our demo site layout exactly. Great for those who want to build quickly, or learn hands on by looking at how Joomla site is setup via the admin area.

Find more information on our Joomla templates page.

Members Showcase

We invite you to browse the members showcase and have a look at some of the great sites put together by our users. Please email us if you would like your Joomlabear site to be considered for the showcase page.

20% Off Easter Sale

That’s right folks, We are offering 20% of any 3 month, 6 month or 12 month membership for this Easter weekend only – get access to our stylish templates and pro support team for as little as $37.60 for 3 months.

Checkout the specials here.

Joomulus has been updated and fixes a possible XSS attack vulnerability.

Please download the update now, and please ensure that all Tag URL’s you enter into the module parameters include http:// at the start, i.e. they should not begin with www.

How was Joomulus Vulnerable To Cross-Site Scripting?

Joomulus uses SWFObject.js to embed and pass flashvars, both Adobe and Google recommend and support this.

Flashvars are a way of communicating information from your HTML page to the nifty little Joomulus.swf. So PHP outputs your tags, and Javascript and passes them along to ActionScript, which gives you the animated Joomulus tag cloud. The Joomulus tags are passed as HTML links (the TAGs) to the Joomulus swf. If you really know your stuff you could pass along Javascript to your link in the form of a TAG.

You may not want to do this, but a malicious person could embed the swf from your site (lets call it site A) to another site (site B). Then they could manipulate the tags and url, NOT on your site but on site B. Then the user could possibly grab your session ID and access your Joomla site via this (theoretically – no instances of this have been reported in the wild to date).

This could all be fixed with a clever .htaccess file, to stop the swf loading on other domains. However, the most recent Joomulus wont activate links that don’t start with http. Which stops the execution of Javascript or Vbscript on site A and B. The tag will still get rendered (be viewable) but wont be click-able, thus stopping any script from executing. No sensitive information is passed to Joomulus, but it is still recommended to update. Also remember to use http:// for all your links (if you weren’t already).

For The Future
Chinese and Japanese language support is coming folks. Also a K2 version of Joomulus should be out in the next week. It’s already built and in use on a live site, but we want to run a few more tests before releasing it. The K2 prototype can be seen running on Wordwolf – and you can see it is pulling in the K2 content tags.

Roy Tanck has built a prototype for Wordpress that supports unicode and we have embedded this below.

NOTE: This is NOT the updated version we are releasing today – the updated version is a security update - stay tuned for new feature releases in April.

It’s on the cards folks – just as soon as we finish updating the current templates to include our new framework feature set. Stef has also been working on a new version of CU3ER that looks amazing! Check out the video preview.

CU3ER v1 – screencast from CU3ER on Vimeo.

And remember, BlueHost are currently sponsoring our 3 month Joomla template membership – so if you make the wise decision to host your site with them, you can also make your website beautiful with one of our Premium templates, absolutely free!

Click here to visit BlueHost (After you watch my super quick video, of course!)

Update – a while back I made a longer Bluehost Joomla video which you can see here. The screencast above is a little more to the point.

Most importantly search engines tend to rank content with a search engine friendly URL more highly due to the keywords that are contained in the URL. If you look at the URL of this very page you will see:

blog.joomlabear.com/setting-up-search-engine-friendly-urls-joomla-sef/

This URL tells Google, and other search engines, that the page is most likely about a number of things, such as; Search Engine Friendly URL’s, SEF and Joomla. This reinforces the other primary on-page factors Google looks at, the page title tag and content.

Another very nice side-effect of a SEF URL is that when somebody copies and pastes your link into a blog or forum they give you a link back with keywords in the URL. This is a big bonus, and something that will be explored again in a future blog post.

In this video I show you as quickly as possible how to setup basic SEF within Joomla (yeah I can’t help rambling about little details – It is a long video again, and I’ve got a slight cold, sorry!)

If you want to skip straight to the quick SEF URL checklist and resource list this is under the video.

Quick check list to get SEF URLS working in Joomla

1. Access htaccess.txt in your root directory and rename it to .htaccess
2. Visit your Joomla Global Configuration and in SEO settings set all options to ‘yes’ and save.

To access your root directory you can either use FTP or your web host’s file manager, as I have done in the video demonstration.

FTP access is something I consider essential for anyone serious about running a Joomla site, or any website for that matter – it still surprises me how many Joomla users I meet who have no idea what this is or how easy it is to setup. With FTP you can access your Joomla installation and manipulate files directly – you can upload and download files, rename, change permissions, etc.

If you want to access your site with FTP then here are a couple of quick tools I recommend:

1. Firefox – A free web browser – from our web stats I know that more than 50% of people visiting Joomlabear already have Firefox – this message is for the other 50% – Get Firefox here!
2. FireFTP is a free plugin for Firefox that lets you FTP into your website directory from within your web browser, as seen on TV in the video above. Get FireFTP here (Install Firefox first, then add this plugin).

To access your site with FTP you only need the following:

• your FTP address, usually ftp.your-domain-name.com
• A username, your hosting account login usually works
• A password, your hosting account password usually works.

If in doubt contact your web host for these details.

If you prefer the file manager option, Blue Host offer very affordable and reliable hosting and cPanel can save you a lot of time with many different admin tasks. You can also get a free Joomlabear template membership with any new Blue Host account – more details on this offer and Joomla hosting with Blue Host here.

Well, a little bit of light relief in the JoomlaBear blog this morning – I awoke at dawn to see this most incredible sunrise so whipped out the camera and grabbed a shot from the deck wearing only my PJ’s.

Next we moved on to post-hibernation coffee,  just what the doctor ordered…

Helped a few people out in the forum – good question here on potential Joomla caching issues, what to do when your menu active states get locked on for no apparent reason.

Uploaded another Joomla template showcase item – It’s been a huge week for our users – so many beautiful sites…. Well done all.

Just a typical Sunday morning here at Bear HQ.

And we have a huge week planned ahead, and you can all look forward to some very exciting things coming in the next few days – From templates to tutorials to tags clouds

Finally. a little plug for mother bear who has been working away on her Hunter Douglas blinds site – it’s just structure at the moment – no styling, but watch this space.

Cheers,

Big Bear

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?

http://freakedout.de/ make some very cool Joomla extensions and you should check them out. A list of their extensions is also at http://club.freakedout.de/