Editing image size and alignment in pbwiki HTML

March 10th, 2009 by Brian Leave a reply »

This is for redfield.pbwiki.com.

When you add images to a pbwiki, it takes a little bit of HTML editing to format the image how you would like. In pbwiki, click on the Source button in your editor to view the HTML code.

Let’s use an image here and I’ll show you the different code to change the formatting.

The image:

If you were to view the HTML code for this image, it would look like:

What if we wanted to make the image bigger? I would add height and width code to my image HTML.

Notice the space from the URL and then the height=”300″ and width=”300″ code. Also, I chose 300 as a random number. Make the numbers smaller to shrink your image, larger to make your image pixels larger.

By adding in an align code, I can change how the words wrap around the text. Try adding in an align=”left” or align=”right” next to where you put the height and width code.

I’ve added some text and I will keep typing to see if the image will wrap around correctly using an align=”right” code. I started typing this after where I inserted the image. Below the red circle picture that I’ve got here I’ve put the source code so that you can see how I changed the image size and the alignment. Something to look for when you are searching the HTML source code is looking for a .gif, .jpg, or .png file to see where your images are at. I’ll keep typing and you can keep reading but you should probably just go edit your wiki page by now since this serves the main purpose of being filler text.

Here’s the code screenshot, complete with where I started typing my text:


Leave a Reply