Images width/height roadmap for those that can't wait

[NgtCrwlr]

This info is for those that prefer to have images with width/height settings. I know John mentioned that he was going to address this issue in an upcoming version, but if you're like me you would like to have it now. :)

Well, I thought as long as I was going through the trouble why not document my journey along the way. I'm not finished with all the templates yet, but with the following info you can fix width/height of the three of the main most graphic intensive pages (entry page, threads page, and the posts page) you're on your own to track down the rest.

This took over 10hrs to do, but with this info I would think that most should be able to fix up their images in an hour or less. This info does not come with any warranty... I have done my best to make sure it is accurate but make no promises. If you're not comfortable with editing PHP files and templates I suggest you wait until John comes up with an updated version that includes the image sizes.


####################################
Changes to templates:

-----------------------------------------------------
Forum entry page...

TEMPLATE: forumhome
off.gif 20x20
offlock.gif 20x20
on.gif 20x20
onlock.gif 20x20

TEMPLATE: fivelinks
top_profile 49x25
top_register 52x25
top_members 72x25
top_faq 31x25
top_search 50x25
top_home 45x25

TEMPLATE: forumbit
<img src="images/$onoff.gif" border=0 width=20 height=20 alt="">
<img src="images/lastpost.gif" border=0 alt="Go to last post" width=10 height=9></a>

TEMPLATE: logoutcode
top_logout 59x25


-------------------------------------------------------
Threads page...

TEMPLATE: forumdisplay
newthread.gif 108x21
reply.gif 100x21
threadclosed.gif 91x21
reply and closedthread should be made same size because they both use the same width and height setting

newfolder.gif 17x12
folder.gif 17x12
newhotfolder.gif 17x12
lock.gif 12x15

TEMPLATE: forumdisplaybit
<img src="images/$newoldhot.gif" border=0 width=17 height=12 alt="">
<img src="images/lastpost.gif" border=0 alt="last post by $lastposter" width=10 height=9>

TEMPLATE: multipagenav
multipage.gif 10x12


--------------------------------------------------------------
Thread posts...

TEMPLATE: showthread
printer.gif 16x14
sendtofriend.gif 15x11
newthread.gif 108x21

TEMPLATE: postbit
find.gif 40x16
edit.gif 51x13
quote.gif 39x16

TEMPLATE: postbit_profile
profile.gif 43x16

TEMPLATE: postbit_useremail
email.gif 33x16

TEMPLATE: postbit_homepage
home.gif 32x16


####################################
Changes to files:

FILE: global.php --- Folder (images/smilies) all smilies are the same size =15x15
$bbcode=str_replace($smilie[smilietext],"<img src=\"$smilie[smiliepath]\" border=0 width=15 height=15 alt=\"\">",$bbcode);

FILE: forumdisplay.php --- Folder (images/icons) thread icons are all the same size (icon1... 14) =15x15
$threadicon="<img src=\"$icon[iconpath]\" alt=\"$icon[title]\" border=0 width=15 height=15>";

FILE: showthread.php --- for posticon
posticon.gif 14x11
$posticon="<img src=\"$icon[iconpath]\" alt=\"$icon[title]\" border=0 width=15 height=15>";

posticonnew.gif 14x11
$foldericon="<img src=\"images/posticonnew.gif\" border=0 width=14 height=11 alt=\"New post\">";
$foldericon="<img src=\"images/posticon.gif\" border=0 width=14 height=11 alt=\"Old post\">";


###################################
Miscellaneous icon sizes:

bbtitle.jpg 314x82
bbtitle2.jpg 345x87

announce.gif 16x17
newannounce.gif 16x17

down.gif 9x10

newfolder.gif 17x12
newhotfolder.gif 17x12
newhotlockfolder.gif 17x12
newlockfolder.gif 17x12
lockfolder.gif 17x12
hotfolder.gif 17x12
hotlockfolder.gif 17x12

firstnew.gif 9x10
folder.gif 17x12

uinadd 34x16

aim_icon.gif 31x16
aimver_botdow.gif 117x29
aimver_bud.gif 117x39
aimver_chat.gif 117x39
aimver_im.gif 117x39
aimver_man.gif 44x55
ainver_topsm.gif 73x55

That's all for now.

Cheers!

Larry "NgtCrwlr" Mingus
http://www.makeitsimple.com

[theprof]

Good job. Am I correct in saying that including the height and width will make the pages load faster?

[NgtCrwlr]

I really don't think anyone will notice much of a speed difference. The biggest advantage is in the page rendering, when images have pre-set dimensions the browser doesn't first display a wide table and then adjust the table down as images load.

As far as speeding up the page display I'm not sure, maybe someone else that knows will jump in and clue us in on that part. All I know is that I much prefer viewing pages that have image dimensions pre-set.

[akiy]

If a browser encounters an image that does not have the width and height dimensions, the browser has to requery the server to get these dimensions for each image. I seem to remember that a new socket has to be created, but don't quote me on that. Although it's minimal, it does introduce a bit of a delay.

I think the biggest difference people will see is how the browser displays the page. Internet Explorer will paint pages and will resize tables on-the-fly, whether an image has its dimensions explicitly defined (as NgtCrwlr said). Netscape, however, won't display tables until all of the images within have been displayed. Having the dimensions will speed up the user's perceived speed of the page being displayed.

In other words, being able to specify the width and height of images would be a "good thing" (tm)...