How To Edit Images On Joomla
I just wanted to make some notes about editing images for the web. A few users have had trouble with it. And I often take what I know for granted, because I deal with these things on a daily bases. So it may be basic for some of you, but hopefully someone finds it useful.
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.
- 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.
- The Created value, lets you know when the file/image was made.
- 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 
Should I Use Joomla Or Wordpress?
Now I could be wrong about this but I believe there are two groups of people who read this blog. There are those who are interested in Joomla Templates, and have arrived from the main site. And those who have come from search engines or from some of the niche marketing circles I have been frequenting.
If you are part of the first group, those who love Joomla, own a Joomla website, or want to build a Joomla website then you may be wondering what this blog is based on. Yes you probably guessed correctly, it’s WordPress.
I am big fan of Joomla and I believe it is an excellent choice for many types of websites, but I also believe that you should pick your CMS based on what you intend to use it for and what you want to achieve.
WordPress is an excellent framework to quickly publish your thoughts and ideas to the web and I’ve chosen it for the JoomlaBear blog because I believe it is the most efficient tool for my purposes.
The main site at joomlabear.com is based on Joomla – Joomla 1.0.15 to be precise, and will very shortly be upgraded to Joomla 1.5.9.
So when to use Joomla and when to use WordPress? Well that is something I will be addressing in future posts because I think it’s an important topic and could save many of us days or weeks of grief in the long run if we choose the correct CMS framework that best matches our site’s purpose.
A strength of each system, off the top of my head:
Joomla’s user management which is built in and allows for user registration on your site out-of-the-box. Includes user email authentication, i.e the user must click a link in a n email they receive before their account is activated. Once registered a user will be able to use other components integrated into teh Joomla site such as forums, etc.
Wordpress on the other hand has an incredibly powerful commenting system which is built in – and for which I do not believe there is anything yet for Joomla that compares – not when spam protection and other factors are taken into consideration.
Of course there are hundreds of pros and cons for each platform, and amongst my many tasks over the coming weeks I intend to write a little bit more about this as I think it’s a topic that people will find very useful and something I have had quite a bit of experience with over the past couple of years.
In the meantime I want to let you all know I am installing a WordPress plugin that makes my comments “dofollow“. Wordpress by default ads a “nofollow” tag which means Google, and the other major search engines, ignore the link back to the commentators website.
I’m removing this because I have decided I do not agree with the principal behind the nofollow tag – I believe if you take the time to comment you deserve a credit to your site. I also have a zero tolerance for spam and will not accept comments if they are spammy or off topic. And finally, I want to encourage people to interact with me and others here.
So go ahead and leave me a comment, what are you waiting for!
Changing Fonts In A Joomla Template
Something I’m asked quite often is how to change the font on a Joomla site. I thought I’d write a quick post about it because it’s an easy thing to do, but there are also some limitations. There’s also one other option for using cool typefaces on your Joomla site which I’ll touch on at the end – It’s called sIFR and uses flash and JavaScript to display a custom typeface. sIFR is really just good for headings as large blocks of type should not be rendered with flash.
Before we delve into how to make the changes it’s important to understand how fonts are displayed. Fonts in web pages are not embedded into the web page itself as many people think. The font must be on the end users computer to be displayed. The way it works is the template designer (or web site designer) will enter the font(s) they want to be displayed but it must be on the visitors computer to work.
This is why pretty much all web sites use one of the 10 or so standard fonts that are available on pretty much all computers – they include Ariel, Verdana, Times, Courier, Tahoma, Georgia, and a few others.
Quite simply all you need to do to change the font in your Joomla Template is edit the font list in your template css file. The css file is in your template folder on your live site – It is usually in a directory called “css” inside the template directory:
yoursite.com/templates/your_template_name/css/template.css
But, this depends on the designer who built your template as it’s not mandatory to structure files like this. It is good practice however and if you got your template from JoomlaBear then this is where you’ll find it.
- If you are using Joomla 1.0+ then your main template css file should be called template_css.css.
- If you are using Joomla 1.5+ your template css file should be named template.css
The simplest way to edit this css file is to do it through the Joomla admin. Joomla provides a nice method to access both your template index.php and template css file from the template manager.
- In Joomla 1.0 go to Site > Template Manager > Site Templates -Then select the template you are using from the list by clicking the radio button and hit Edit CSS.
- In Joomla 1.5 go to Extensions > Template Manager -Then select the template you are using from the list by clicking the radio button and hit Edit from the top menu. On the next screen hit the Edit CSS button at the top right of screen.
Depending on how the designer structured the CSS file you may need to change font specifications in a number of places inside the template css – especially if you want to change heading styles. Typically the base font will be declared in the body tag like this:
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #CCCCCC;
line-height:20px;
background-color: #222222;
}
You can see in the example above that we have two fonts declared – Verdana and Arial – in this example the viewer of your site will see Verdana if they have it installed, and if not the viewers computer will try to use Arial – remember these fonts must be installed on the users computer to be seen on the web page. If Verdana and Arial were not available then the viewers computer would try to use any available sans-serif font installed. Neat eh!
Other common font-family combinations include:
font-family: Arial, Helvetica, sans-serif; font-family: "Times New Roman", Times, serif; font-family: Geneva, Arial, Helvetica, sans-serif;
And you can mix and match these as much as you like!
Sans-serif fonts are the straight and simple ones like Verdana and Arial – Serif fonts, like Times and Times New Roman. are the ones with little curly or pointy bits. An interesting fact is that sans-serif fonts are typically much easier to read on screen while serif fonts are easier to read in print! Have a look at any novel and you’ll see what I mean. However this is not true when the fonts are displayed at larger sizes so my recommendation is to go with a simple sans-serif font like verdana or arial for the body text and have fun with type faces like Trebuchet MS, Times, Tahoma, etc for your headings.
If you want to edit the heading font in your template css it will be exactly the same as above except you will need to locate the style in the css – you can do a quick “find” and search for “font-family” – if you whip through all instances of this you will find the heading styles pretty quickly. Or with Joomla you can be quite confident that your heading styles will be contained in one of the following styles:
h1 h2 h3 .componentheading .contentheading
These are the default classes used for headings.
Hopefully this has been helpful – If you really, really want other typefaces in your template you can look at sIFR, which stands for Scalable Inman Flash Replacement. sIFR uses flash, css and javascript to replace blocks of text on your site. Its a cunning technique that I’ll be delving into further on this blog and using in some our fine Joomla Templates. Stay tuned.
