Fixing image corruption in Git

You may find that all the images you commit to a git repo are corrupting. This is especially true if you are using Windows and then pushing to a Linux origin.

One possible fix is to ensure the images are being treated as binary files. Of course everything is a binary file when it comes down to it, but this differentiates it from text. To do this, add the following lines to a .gitattributes file in the root of the repo.

*.jpg binary
*.png binary
*.gif binary

If you have images in there already, you will probably need to remove them and then re-commit them.

ImageMagick, Apache and Debian

Following on from my previous post about installing ImageMagick from source, to get it working with Apache you need to do the following. First, we need to install something from Pecl. So make sure you have the pecl command at hand – if not, install it.

apt-get install pear

Then run the following.

apt-get install php5-dev
pecl install imagick

Finally, add the extension to your php.ini.

extension=imagick.so

Installing PNG support for Debian

Following on from my recent post about adding JPEG support, I also needed to add PNG support. I couldn’t get the RPM’s to work, so I had to do this manually as well.

wget http://downloads.sourceforge.net/project/libpng/00-libpng-stable/1.2.39/libpng-1.2.39.tar.gz?use_mirror=kent
tar -zxvf libpng-1.2.39
cd libpng-1.2.39/scripts
cp makefile.linux ../makefile
cd ../
make
make install

HTML image tag

Images can be embedded in a page using only one tag. There are examples of images on this page – the top header secton contains three images.

The basic syntax is as follows.

<img src="location.gif" width="300" height="100" border="0" alt="Description text">

For a basic image tag all you need is <img src=”location.gif” alt=”description”>. If you do this the image will display at its normal size although it is always a good idea to add a width and height tag.

The alt property defines the text that is displayed when the image is missing, it is displayed where the image should be. An example is shown below.

<img src="fakelocation.gif" width="200" height="100" alt="Here is an example">

Would produce:

Here is an example

To add a link round an image simply do it like a normal hyperlink

<a href="targetpage.html"><img src="location.gif" border="0></a>