Tip of the Week #10: Images, Part 2

6 Mar

totw-banner.jpgJason Nguyen

Last week, I gave you some ideas to start optimizing your images for web upload, looking at file size and compression type (JPEG or GIF). This time, we assume that you have your file created and uploaded, and we begin to explore the various ways you can present that image in a page, focusing on alignment and borders.

This week, Oscar the Panda is on vacation, so I have Slippy here as my assistant. Say hi to Slippy!

penguin.gif

Alignment

With the Point and Click Editor, aligning your images is quite easy, but first, you’ll need to put an image on the page. You can do that by clicking on pb-insert-image.gif and following the given directions.

The inserted image is displayed in what is called an inline format, meaning that it flows through with the text, as if it was just another letter (like the image of the “Insert Image” button you just saw).

penguin-small.gifIn this form, you can use pb-align.gif (the left, center, and right alignment buttons) to align it just as you would text, but this is only useful if it’s sitting alone, like the very first picture of Slippy above, which was center-aligned. What if you need the image floating beside the text, such as the image to your left right now? Then we need to move on to some more advanced options.

Right click over the image and the following menu should present itself:

pb-image-props.gif

Upon clicking on Image Properties, you’ll see this window:

pb-image-propswin.gif

Okay. At the very bottom of the window is the Align option. Click the dropdown menu and you’re presented with a lot of different options. For our purposes, the only ones that matter are left and right. These two handle almost all of your everyday needs, but feel free to experiment with the other options also.

You’ll notice that there is a Border option as well. You can choose to set that to do a traditional HTML border around the image. Below, you’ll see Slippy caged, in borders of width 1 through 4.

penguin-small.gif penguin-small.gif penguin-small.gif penguin-small.gif

It’s easy, but not compelling if you’re looking for a little extra. What if you need some color, or different borders on each edge? Then we need some more advanced border options, courtesy of CSS:

Borders

Check it out, Slippy wants to show you his Spring Break photo:

Surfing Penguin

See, the center part is the entire image, as shown here:

Surfing Penguin

The Polaroid effect was ALL generated in the CSS properties for that image. Here’s how it was done:

  • In the Image Properties window, go to the Advanced tab.
  • Click on the input box for Style
  • Type in the following:
    border:1px solid #ccc; border-width:1px 2px 2px 1px; background:#fff; padding: 10px 10px 50px 10px;

Let’s break it up a little. The first thing we define is the outermost border. “border:1px solid #ccc” says to do a 1 pixel-wide, solid border of color #ccc (a light gray) all around the image (Click here to learn more about colors in CSS). However, you’ll notice that we make the right and bottom edges a bit wider, to simulate a slight shadowing. To do that, we define the widths individually, with “border-width:1px 2px 2px 1px;”. The order of widths is top, right, bottom, and left. That would give us this:

Surfing Penguin

Now we need the white border for the Polaroid effect. We do this by exploiting the fact that in CSS, even images have a background, typically covered completely by the image. However, if we give the image some padding, this background reveals itself. Therefore, “background:#fff” sets the background color to white. Then, “padding:10px 10px 50px 10px” sets the width of the padding on each edge, again in top, right, bottom, left order. And thus we get our final result!

One last thing. Earlier, we used “border:1px solid #ccc” to make our outermost border. A question many people ask is, “What can I do other than solid?” Here are some options:

solid dotted dashed

inset outset

double groove ridge

Now that you’ve got all that down, it’s time to go experiment, meaning…

Conclusion

That’s it for Slippy and me for today! As always, contact me with all your questions and interesting ideas, or leave a comment here. Thanks!

2 Responses to “Tip of the Week #10: Images, Part 2”

  1. Gazete July 18, 2008 at 10:59 am #

    it’s really nice, thanks…

  2. Laquisha September 25, 2011 at 12:09 pm #

    I thought I’d have to read a book for a discoevry like this!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: