Posts tagged image

Apply a background image to an image

0
1240 days
by in CSS

this is quite a neat trick, and it can look really good depending on your design and the image you put as background...

To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:

 
img{
	display:block;
	padding:10px;
	background-image:url(image.gif);
}
 

Here is a very smart use of this technique, where a div contains the sky, the image is a little man running, with an animated background that simulates motion.

Read the post that explains how that was achieved if you have any doubts.

Enjoy,

Easily assign an image to a post in WordPress

1
1244 days
by in PHP, WordPress

Have you ever wondered how to assign an image to a certain post using WordPress? Surely there are some plugins that try to do this, and maybe they accomplish it, but probably slowing down your blog.

Well, here is a way of doing it without slowing the blog or installing any sort of additional plugins. When you are done writing your post, upload an image to a directory that you will use for this, for example: "www.yoursite.com/post_images/". And I recommned that you name the image something that has to do with the post, it will help you if you need to edit it.

Now in the writing are scroll down until you see the tab "Custom fields":

Assigning images to posts

And fill in the following information:

Key: post_image
Value: image_name.jpg

The key must be always the same, in this example it will be post_image. And the value will be the name of the image that we uploaded. In the example it is assigning_images.jpg

And that's it for now. The next step is including this images into our template.

Add the image to the template:

As you can see under the tab Custom Fields there is a link to the WordPress codex, where they explain the functions we'll use for this, so consult that if you have any doubts.

So here is the code to display the image (It must be inserted inside the Loop):

 
if(get_post_meta($post->ID, 'post_image',true)){
	//There is an image assigned:
	echo '<img src="http://yourblog.com/post_images/'.get_post_meta($post-/>ID, 'post_image',true).'" />';
}
 

Note that if you copy and paste the code before you'll have to delete a / in $post->ID because WordPress is adding it automatically.
Of course this is the most basic approach, but hopefully you will understand the method and will be able to work on it.
At the moment I am using it to display thumbnails on the archive excerpts (They are not live yet, I'm still testing) and it is a very easy and fast way of doing it.

If you ever need to edit either the image or the meta-data simply re-upload the picture or edit the post.

Cheers,

Image formats review

1
1379 days
by in Cool pics, General talk, Graphic Design, Photoshop, Reviews, Web-related

For all of you designers out there that don't understand exactly what is the difference in "lay" terms of the most common web image formats I will go on with a little explanation and examples for you:
The background is a PNG image that is always the same, and the images are set over it

PNG

This is a relatively new file format, it stands for Portable Network Graphics, and it's primary characteristic is that it has lossless data compression, meaning that it won't lose any quality whatsoever.
And the other greatest thing about it is that it has full alpha support, meaning that it can have different opacities and transparencies.
Here are below some examples of PNG images with different backgrounds:

Dice in PNG format
Dice in PNG format
Dice in PNG format
Dice in PNG format

The size of the PNG file on top (100x50px in a row of 4) is of 12,4Kb
As you can see it can be perfectly seen even though the background is changed (stripes, solid color, alpha transparencies bg, and transparent bg)

GIF

GIF image format is probably the most common one in the web, or at least it has been for the past years. It stands for Graphics Interchange Format, and it has 3 characteristics that make it unique and sometimes useful:

  • It has lossless data compression (Pretty much like PNG)
  • It supports animations, although they increase a lot file size
  • It supports transparencies, although it doesn't support alpha opacities.

Here is the same demonstration as before, but now with GIF graphics on top:

Dice in GIF format
Dice in GIF format
Dice in GIF format
Dice in GIF format

In order to look good GIF images with transparency often use a surrounding border, that should match the background color. As you see in the example the image looks just great when displayed over white, but when displayed over other types of background colors the transparency looks awful.

A great advantage though is that this GIF image weights 4,04Kb, against the 12Kb of the PNG file...

JPEG

JPEG stands for "Joint Photographic Experts Group" and it is not the actual name of the format, it is the name of the comitee that created it, but since everyone decided to call it this way, lets stick to it ;)

JPEG offers some characteristics that are worth looking at when designing for web, it uses lossy compression, which basically means that when saved it will lose quality.
Depending on its use this may not be bad. For example in this site's design I've used JPEG files for backgrounds, since the quality loss contributes to the "rustic" effect, but it should never be used for logos or sharp things.

The good use for JPEG is for large photographs, big backgrounds, or other large images.
Here is an example of the dice image, using different compression quality:
Since there is no transparency the background will be seen always as white...

High quality:

Dice in JPEG format (High quality)
Dice in JPEG format (High quality)
Dice in JPEG format (High quality)
Dice in JPEG format (High quality)

Medium quality

Dice in JPEG format (Medium quality)
Dice in JPEG format (Medium quality)
Dice in JPEG format (Medium quality)
Dice in JPEG format (Medium quality)

Low quality

Dice in JPEG format (Low quality)
Dice in JPEG format (Low quality)
Dice in JPEG format (Low quality)
Dice in JPEG format (Low quality)

File sizes were:

  • High quality: 31,2Kb
  • Medium quality: 26,2Kb
  • Low quality: 25,0Kb

Conclusion

When designing you should try to use GIFs as many times as possible, since they provide the smallest file sizes, and better quality than most JPEGs. In the cases where you need alpha transparency you should consider changing to PNGs, but avoid their use, they'll increase a lot page load time...

Have fun designing ;)

PHP easy image editing:

3
1399 days
by in General talk, Graphic Design, PHP, Programming

Do you have a picture upload and you don't know how to easily resize/edit the uploaded images?
Well here is a solution for php that will make your life really easy!
It is called Asido, so you may go and download their code, to follow this tutorial.

First of all I'll suppose you already know how to upload an image. I may write an article about it someday, but for now I'll assume you do know.
So once you have successfully uploaded and moved your picture to its final destination, include Asido's class object, then chose a driver (the gd driver works fine), and then chose file names. You can leave in both the same, so that all changes are made to the uploaded image and stored in the uploaded image.

 
include('class.asido.php');
asido::driver('gd');
$i1 = asido::image($new_file_name,$new_file_name);
 

And now you can start working:

Resizing your image:

With Asido resizing an image is as easy as this:
Resizing proportionally using the width:

 
Asido::width($i1, 200);
$i1->save(ASIDO_OVERWRITE_ENABLED);
 

Where 200 is the new width, "$i1->save(ASIDO_OVERWRITE_ENABLED);" saves the image.
You can achieve the same effect using "Asido::resize($i1, 200, 0);"

Resizing proportionally using the height:

 
Asido::height($i1, 200);
$i1->save(ASIDO_OVERWRITE_ENABLED);
 

Where 200 is the new height.
You can achieve the same effect using "Asido::resize($i1, 0, 200);"

Adding a watermark

A very useful tip when you are developing a public picture upload, to get some marketing ;)
So you need a png image with your watermark, for the example I named it watermark.png

 
asido::watermark($i1, 'watermark.png');
$i1->save(ASIDO_OVERWRITE_ENABLED);
 

You can place the watermark wherever you want in the original pic, just use one of the following constants:

ASIDO_WATERMARK_TOP_LEFT, ASIDO_WATERMARK_TOP_CENTER, ASIDO_WATERMARK_TOP_RIGHT, ASIDO_WATERMARK_MIDDLE_LEFT, ASIDO_WATERMARK_MIDDLE_CENTER, ASIDO_WATERMARK_MIDDLE_RIGHT, ASIDO_WATERMARK_BOTTOM_LEFT, ASIDO_WATERMARK_BOTTOM_CENTER, ASIDO_WATERMARK_BOTTOM_RIGHT and ASIDO_WATERMARK_TILE

Other features

With this great image handler you can do all of the following actions:

  • Stretch
  • Fit
  • Frame
  • Convert
  • Rotate
  • Flip
  • Flop
  • Crop
  • Copy
  • Grayscale

Visit their feature list for full support on the above actions.
If you have any questions please comment!

Go to Top