Hints and tips on how to take photographs, prepare them for and use them on your Joomla! website. Don't restrict yourself to using just stock images, create your own and help your website stand out from the crowd.

1. Photography for Joomla!
Tips on how to take technically good photographs
and use them on your Joomla! Web site.
Presented by:
Douglas Pickett
9 December 2014,
for
Joomla! User Group Toronto

2. Summary
Four steps that will be covered:
 Taking technically good photographs
 Optimizing those images with a free, simple tool
 Using Media Manager to make them available
for use on your Joomla! site
 Incorporate an image into an article using JCE

3. Caveats
 Some parts of this presentation will be my
personal opinions. Others may disagree with
my opinions. They're welcome to.
 I'm not trying to teach you to be a great
photographer – I've been trying for the better
part of a lifetime and I don't think I'm there yet,
so I'm not going to be able to do that for you in
one short presentation.
 I'll be quoting some generally accepted rules for
photographers – but rules are made to be
broken.
 What I hope to do is help you create a well-exposed,

4. Blatant Personal Opinion
 I see a lot of web sites where every single
image is from a stock image site, and it makes
me very suspicious. I look at that, and it makes
me wonder if it is real or a scam.
 If you want to do a little checking on this, look at
reverse image search software like TinEye
(https://www.tineye.com/)
 Remember too that you only get what you pay
for from sites like https://www.fiverr.com/ - one
company I once did a search on shared its
corporate logo (with minor variations) with half
a dozen other sites, including a tattoo parlour.
Did they get their logo from Fiverr? Well,

5. Types of images
What you want to put on your site is wide and
varied, but I'll touch on a small group of general
categories, which I hope will cover a lot of
them.
 Portraits – add that personal touch by putting
your own, or your clients, real people on the
site
 Architecture – your physical storefront or shop,
if applicable, but outdoor photography in
general.
 Objects – things you sell.
Shiny objects – a subset of Object, but with

6. What you need
If you're a pro, you can spend a lot of money on
this. I'm going to suggest some stuff that you
may already have, or can purchase
inexpensively, or improvise.
 Camera
 Lights and/or reflectors
 Backgrounds
 Tripod or equivalent

7. Camera
 Most of us have a phone with a camera in it – a
reasonable choice if you don't have an
alternative.
 If you have an actual digital camera, it would be
nice if it has an “optical” zoom, not just a
“digital” zoom, especially for portraiture.
 Also cameras have the mount where you can
screw them onto a tripod, which will be
necessary under some circumstances.

8. Lighting
 I'm going to offer a radical suggestion – under
many situations don't use the built-in flash of
your camera/phone.
 Most digital cameras are sensitive enough that
you can use ambient light, and the picture you
take will look like what you're seeing. You won't
end up making the objects in the foreground
well lit, with a dark background, and you won't

9. Lighting, continued
 One exception to using the in-camera flash is
when you put your camera into the “always
flash” mode, and your scene is well enough lit it
doesn't actually need the flash.
 This can help to highlight the central area of the
image, especially for portraits.
 But you'll want to review this to see if the
balance between the main lighting and the flash
is good, and you're not getting bad reflections.

10. Lighting, continued
 As applicable, you may want up to four
positionable light sources (key, fill, hair or
kicker, background). But more or less can be
used.
 For shiny objects you'll want to use a
translucent cone or box.
 For outdoor photography, try to avoid putting
the sun at the back of your subject. This may
mean moving your position or that of your
subjects where possible. You may need to do
something to fill in the shadows. Shooting on
an overcast day or near sunrise/sunset may be
a choice.

11. Backgrounds
 You may not have a choice, like with a building,
but look behind what you're photographing.
You may want to move your position or the
subjects position to avoid busy backgrounds or
objects growing out of peoples heads.
 Under controlled circumstances, use a blank
pale coloured wall, or a roll of paper, or a large
sheet of paper, to create a background. Your
choice will depend on the size of what you're
photographing.

12. Tripod
 You don't have to spend a lot on a tripod, but it
will help you get the best image, especially in
low light conditions where the exposure is
longer.
 Phones don't come with the threaded mount
that allows you to put it on a standard tripod,
but there are adapters that will do that.
 You could take your phone, put it on top of
some books, and then “sandbag” it (a couple of
bags of dried beans?) to hold it in position.

13. Handheld images
 Especially with a phone, you're likely to shake
the camera as you press the shutter button, or
touch the screen.
 To reduce this, select the mode that introduces
a delay after triggering the shutter before the
picture is taken.
 You can then leave the camera in its mount, or
brace your arms, so it will be a still as possible
when the picture is taken.
 Exception – moving objects. Try to move your
camera to track the moving object – it will blur
the background but improve the moving object.

14. Why all this?
 Start off with as good an image as possible –
the less work you have to do after the fact the
better.
 Hold the camera level – this helps with the first
point.
 It probably has something to do with the fact
that I started with a rangefinder camera, but I
never count on getting exactly the image I see
as the resulting image – leave a border that
you'll edit out later.

15. Portraits
 Lighting – Butterfly or Loop
 Butterfly – main light shining straight on face,
creating a symmetrical shadow under the nose,
often considered best for women.
 Loop (a variant on “Rembrandt” lighting) – main
light at 45 degrees off axis, fill off to the other
side (white card or foamboard may replace the
fill light)
 Both will have a hair or kicker light – above and
behind shining on head
 Background light on your background

17. Portrait, Continued
 Torso at an angle to the camera.
 Head turned partly or fully towards the camera.
 Some suggest that men should look into the
camera, and women off to the side.
 Camera at eye level or above.
 Ideally use a moderate telephoto setting, not
wide angle.
 Don't shoot up the nostrils!
 Watch out for objects growing out of the head.

18. Background Light

19. Highlight

20. Fill

21. Key

22. Result

23. Architecture
 Use a longer lens if possible
 Consider taking a picture on a day with
overcast, especially if the building is north
facing – softens the shadows
 If east facing, consider taking picture at dawn
 If west facing, consider taking picture at sunset

25. Outdoor pictures of people
 Try to avoid putting the sun behind them
 Try to avoid facing directly into the sun
 Using large sheets of white cardboard or
foamboard to reflect light into the shadows may
improve images taken in bright sunlight.
 Depending on distance, and the power of a
flash, turn on mandatory flash to help reduce
shadows.

30. Small Objects
 Lighting can be the same as for portraits
 Use sheet of cardboard as “seamless”
background, wrapping from under the object
and up as the background
 Keep a gap from the background, you may
want to raise the object up if it can be done.

32. Shiny Objects
 You are trying to avoid taking a picture of your
own reflection.
 Put the item on a plain background, or a light
box to illuminate from underneath, then
construct a cone or a box of translucent
material. The object is inside the cone or box.
Shine the lights in from the outside
 Take the picture through a small opening
through the apex of the cone, or through the
side of the box.
 This should eliminate most of the unwanted
view of the environment around the item.

36. What Next?
 You now have a good image that you can
prepare for your web site.
 We need to eliminate the extraneous part of our
image (remember, I suggested you leave a
margin around your images), and take into
account that the shape of the image may not be
what you need on your site.
 You'll need to adjust the resolution down to
something that works for your site, and doesn't
take too long to load.

37. Editing Software
 Options?
 Photoshop is the choice for pro's – but it costs
a lot of money, and has a significant learning
curve.
 GIMP – freely available, but still has a
significant learning curve.
 IrfanView – what I'll be talking about, free
(although donations are appreciated), quick
learning curve, but not nearly as powerful as
Photoshop or GIMP. PC only.

38. IrfanView
 Downloadable from http://www.irfanview.com/

39. Crop, Resize, Save
 Most of the time, these are the steps I use.
 Crop – select the part of the image I want, in
the ratio that I need for the site
 Resize – reduce the number of pixels while still
keeping the desired vertical vs. horizontal ratio.
 Save the result – usually as a JPEG or PNG

40. Rule of Thirds
 Often useful rule for composing a picture
 Draw imaginary lines horizontally and vertically
dividing the image space in thirds
 Usually the composition of the picture works
best if you align key features of your subject
along these lines.

45. The result
 Original was square,
showing outside the
desired area, and
1,139,437 bytes
 This is image is 200
pixels wide by 300
pixels high, and
109,325 bytes

46. Other useful IrfanView features
 Rotate to arbitrary angle – if you weren't holding
your camera level, you can rotate the image to
get things level.
 Auto Adjust – makes your pictures look better,
sometimes works better than others.
 Reduce number of colours – if you want to
reduce the size even more.
 Adjust colour balance, contrast, gamma,
saturation

47. Auto Adjust
 Before  After

48. Number of Colours
 256 colours  Greyscale 16 colours

49. Media Manager
 Used to load your images onto your website
 Helps to organize the images
 Create multiple sub-directories to help organize
the images
 This can be useful with some slideshow or
image gallery software where you specify the
contents of a directory to be displayed, rather
than selecting individual images.

54. Insert image in article using JCE
 Position cursor at insertion point
 Select image
 Set options, alignment, border, rollover action,
styles, and more

61. Biography
Douglas Pickett, Vogg Technology Limited.
dpickett@voggtech.ca
 As a photographer, started serious photography
in high school with a hand-me-down 35mm
rangefinder camera, mostly taking black&white
photos because colour was so expensive.
Studied film making, with Super 8 cameras, in
his high school's Film Arts program, and
received a couple of regional awards
 Over 40 years studying and working in the IT
field, both software development, system
administration, and network design and
administration. The last several years he's