As part of the Customize Your Plurk Profile series we have added images to several elements of our page. When I was creating my own personal custom profile one of the first questions I asked was, "What size do these images have to be?" What I found was that there were not really any good answers to that question. There are several reasons for this but I still wanted to get some sort of guideline as to image dimensions for the page. In my quest to find an answer I took many paths.
I first flooded the Plurk community asking everyone who had a custom profile what image dimensions they used. I had expected to get a consistent response which would give me the proper dimension for each section. What I got was a consistent response that simply stated, "use whatever size image you want". Uh, ok thanks but that really didn't help me.
My next step was to take a screen shot of my Plurk desktop then bring the screen capture into a graphics program and measure the various sections for myself. That proved to be much more tedious than I had anticipated but hey what else do I have to do anyway? It's not like Olympic race walking was on or anything. Oh wait it was on but it is amazing how much work you can get done while watching guys walk like penguins for 31 miles.
So with these image sizes in hand I began resizing graphics that I could use to work in my theme. I should at this point admit that I am a graphic Nazi. Not in the World War II sense but more in the Soup Nazi sense. There is nothing that drives me crazier than an image that doesn't look right or does not fill the proper size. Well ok, a relief pitcher who can't hold a lead when he comes into a game does drive me crazier but from a computer perspective the image thing ranks pretty high on my list of pet peeves.
I resized the graphics I wanted to use and felt pretty confident that I had nailed it like a Chinese gymnast sticking her landing. Unfortunately Plurk is kind of like the gymnastics judge from Sweden, you have no idea what they are thinking and have no way of predicting the outcome. I did not take into consideration Plurk's tendency to resize the graphic boxes when sub-forms, input fields, or avatars changed. As a result my initial image dimensions were incorrect which left fairly large expanses of background color when sections were resized by Plurk. Through a series of trials and a lot of errors I finally came up with a rough size that seems to work fairly well.
In the spirit of community sharing and to save others from having two bald spots on their heads where they have yanked out hands full of hair I thought I would share with you what I found. The timeline image is about the only relatively standard size image I found. There does not appear to be anything that makes the image any taller. It will expand horizontally to fill the window width but the height remains constant. You should make your timeline image approximately 400 pixels high and as wide as you want. Be aware that if the browser window extends wider than your image you will either get the background color or if you has not set a background color you will get the page background. You can eliminate that by using the "repeat-x" parameter in the background statement. That will repeat the image horizontally but you will get a seam where the image repeats unless you are using a seamless graphic.
The dashboard graphic has just the opposite problem from the timeline image. The dashboard will remain constant from a horizontal perspective but will resize itself as the number of friends/ fans increase to fill 2 rows. It will further increase in height when you mouse over the user's avatar. That is the instance that caught me off-guard requiring me to make my images a little taller. I have found that an image dimension of 990 pixels wide and 565 pixels high will fill the space with background image no matter how many friends/fans you have and when the avatar is expanded during a mouse over. The shortest this image will go is approximately 235 pixels. The dashboard is defined as 980 pixels wide but I gave my image an extra 10 pixels just in case.
The Plurk form graphic is similar to the dashboard image. It has a consistent width but the height will adjust. Height adjustment will come from two areas. The first is when the user inputs more than 35 characters in the text box. The system will extend the input box out and move everything down adding to the height of the page. The second box resize comes when a user clicks on the "Private Plurks, language, and options" link. The system will display a mini-form to allow the user to decide who can see the Plurk, what language the Plurk will display in, and whether the Plurk can accept comments. As a result of this I make my Plurk form graphic 1000 pixels wide by 350 pixels high. The minimum height the Plurk form image will display is approximately 137 pixels. The standard width of this area is approximately 990 pixels so again I added a little just to be safe.
Hopefully this information will help you when developing or finding graphics that you want to use for your custom profile. If I happen to find anything that may impact these dimensions I'll definitely document it. This of course isn't an issue if you use repeating graphics or use background color. It only comes into play if you want a single instance of an image to appear on the page. Check back at Plurk Skins for updated information as I do more testing.