Font Squirrel’s @Font-Face Generator

@font-face was CSS’s original answer to the web-font question, but due to poor browser support and confusing implementation methods, it hasn’t yet taken off.  Font Squirrel’s generator, on the other hand, combines the @font-face declaration and uses a combination of javascript and CSS hacks to make it work in old, incompatible, and obscure browsers.

http://www.fontsquirrel.com/fontface/generator

Typekit – A commercial approach

Typekit takes a new approach to web-fonts.  One of the forgotten (yet increasingly important) aspects of the web-font issue is the licensing.  With most solutions, designers use fonts online without thinking about licensing.  Typekit does all of that for you – at a cost.

Typekit is the first commercial model which hosts web fonts as a service.  Integration into your pages is supposed to be very easy and seamless.

http://typekit.com/

There are a few easy steps you can take to make sure your photos are appropriate for the web.

Consider where your photos are going

Most photos on the web are places in a gallery of some sort.  Galleries, particularly on the web, tend to be in a “wide” format.  This means that they are designed to hold “landscape” style photographs, rather than tall, “portrait” style photos.  By taking your pictures with this in mind, you can improve the look of the gallery by making your images consistent.

If your photos are for a certain area of your website, keep the shape of that area in mind!

Watch the background!

When taking photos to display publicly on the internet, be sure to remove all unrelated items or clutter from the background of the shot.  This will not only improve your photo aesthetically, but it will appear more professional and more thought out.

Do not scale or edit photos beforehand

Unless you are a professional photographer or have other interests in mind, leave that part to your web company.

Always turn off time stamps!

“Time stamps” are small text overlays on your photo that display the date and time that the photo was taken.  While these can be useful, they can potentially destroy a photo, as it cannot be removed once the photo has been taken!  Be sure to make sure your camera does not have time-stamping enabled.

Check out more tips

We have several more tips on photography that you can use in tandem with the advice in this article.  Check out more photography tips  from Pro Web Marketing!

In this article, I’ll provide a sample script that I have used and adapted for several galleries and other similar tasks. This article is meant for developers, but I will do my best to take as much of the “lingo” out of it as I can, and explain and document it well. Even if you don’t know programming or PHP at all, this should be a useful tool for you. I developed this with only a basic knowledge of PHP syntax and a bit of guess and check. Check out the example!

Robot work

If you are a web developer, you’ve probably been in this situation before, and this code snippet might look familiar:

<li><a href=”images/gallery/01/01.jpg” title=”Caption” rel=”lightbox”><img src=”images/gallery/01/thumbs/01.jpg” alt=”Click for Full Size” /></a></li>

For every image in your gallery, that line needs to be repeated, with the image source, link href, and caption changed. Sounds like a wrist-cramp in the making – definitely what I’d call “Robot work”.

A Scripted Solution

This situation just begs to be automated. Being a php enthusiast, I decided to embark on a small adventure – write a script that will produce this HTML automatically. Here it is, in all its simplistic glory (Pardon any coding faux pas – I am not the most experienced PHP developer in the world). This script is used with a lightbox gallery called “Sexy Light Box”. A grid of thumbnails which can be clicked on for larger view is our goal here.

<?php
$folder = 'images/gallery/';
$extension = '.jpg';
$group = '[group1]';
$caption = 'Caption';
$alt = '';
$title = '';
$iterations = 28;

$wrap1 = '<li><a href="';
$wrap2 = '" rel="sexylightbox';
$wrap3 = '" title="';
$wrap4 = '"><img src="';
$wrap5 = '" alt="';
$wrap6 = '" /></a></li>';
$i = 1;

while ($i <= $iterations) {
if ($i >= 10) {
$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "\n";
} else {
$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "\n";
}
echo ("$string");
$i++;
}
?>

The Breakdown

This script allows the developer to simply define the gallery directory, number of images, and an (optional – not included in this version) array of captions. Below I will explain the code line by line.

$folder = 'media/gallery';

Defines the folder in which the images are.

$extension = '.jpg';

Image extension. Currently the script requires that all images have the same filetype

$group = '[group1]';

Most lightbox scripts support “groups” or galleries – matching “rel” tags define your gallery

$caption = 'Caption';

Title tag of the linked full-size image. Most lightbox scripts use this as a caption.

$alt = '';

Alt tags for the images. This could be converted to an array if you are concerned about unique alt tags for your gallery thumbnails

$iterations = 28;

The number of images in the gallery.

$wrap1 - $wrap6

these are just the chopped parts of the HTML that is being created and wrapped around the variables.

while ($i <= $iterations) {

$i is a placeholder variable known as an “index”. It is increased by each time the while loop is completed. Once $i is greater to or equal than $iterations, the loops condition becomes false and it is no longer repeated

if ($i >= 10) {

This line is deals with the naming scheme of the images. I name my images 01.jpg, 02.jpg … instead of 1.jpg, 2.jpg etc. Because of this, I had to include a line that would add a “0” to the code IF the image number is less than 10.

$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "\n"; }

This is the line where all of the HTML wraps and the variables you set earlier are combined. This version of the command includes the “0” I mentioned earlier. The final HTML that is about to be “echoed” is saved to the variable $string

else {

If the image number is 10 or above…

$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "\n";

This familiar line of code has the same function as the previous “combiner” line. The only difference is that this one leaves out the 0, to avoid getting “010.jpg”.

echo ("$string");

This prints the first line of the gallery! Yay! The echo command takes our “$string” variable and prints it to our webpage.

$i++; }

The index variable $i is incremented, or increased by 1. This keeps our script from looping infinitely and lets it know when we’re out of images. Once the script hits this line, it goes back to the top of the “while” loop. If the initiating condition (“$i <= $iterations”) is true, the loop will run again, creating a new line for our gallery.

Simple enough?

This is a pretty basic script, and I’m sure it could be improved upon, but for now it definitely saves time, and is easily adapted to many purposes.

Pros and Cons

Pros: Adaptable, time saving, and simple. The script is re-usable several times on the same page if more than one gallery is on the page.

Cons: Slight server overhead which is probably negligible. Each time the page loads, the server has to generate that HTML. In my opinion, this hardly matters for such a small-scale site.

Wrapping Up

Thanks for checking out this script. I hope you’ve learned something from it!

You can download the example code HERE.

To learn more about the javascript used to make the gallery fancy, check out Sexy Light Box – compatible with jQuery AND mootools.