CSS, HTML, and Galleries, oh my.

[MedusasOwl]

So... I'm basically displeased with how my gallery is set up, and would like to do something more fluid that still fits the site. I thought this was pretty awesome looking, but it would be a pain too if enough pics were added that you couldn't scroll down to look at them... plus I could only stare vacantly at the code having no idea how to even start. I've been teaching myself html and css as I go, and I'm starting to get a bit over my head.

Any of the more technical minded herpers able to help me out here or point me to somewhere that can? It would be awesome to be able to have it tabbed into sections... then I could even put actual snake pics/wallpapers up in there in addition to art, and a section for commissions or prints etc... Something really user friendly but stylish that wouldn't be too hard to add to on a regular basis.

Thanks!

[Nate]

Photoshop CS2 (possibly in an earlier version) has something that will make galleries for you...you just select the folder with the images, click a button and photoshop does the rest...Photoshop IS your friend

[MedusasOwl]

Well whattaya know! My version of Photoshop does have that option! You learn something new every day! I'm going to muck with it and see if I can get something I like out of it, so far... not so much. I'd really prefer something I can customize to match and embed in the page I already have set up. But we shall see!

[Nate]

yay! If none of the colors they have work, just go with something plain and simple...otherwise, if you decide to make your own gallery, just post up your questions and I will assist you as best I can.

Another way you could make a gallery is to make a table, 4x4 for instance, and then insert thumbnail images...80x80...Then, link that thumbnail image to the full size image....You do not want to insert a full sized image, and then scale it to a size that suits your web site....People still have to load that entire giant image, even though it's resized, or scaled.

How do I do that? Use Photoshop's "Automate". To use this, you will record an action onto one image (in other words, you will record the actions you take toward an image, and then apply those actions to other pictures...this is great if you have 100 pictures, and want 100 thumbnail images).

In Photoshop, open a large image. Look on the right side of Photoshop, you will see a "history" tab, with an "actions" tab right next to it. Click the actions tab, and then click "create new action" (at the bottom of the palette). Name it something like "resize". Now, click the "record" button (3 buttons away from the "create new" button)

Photoshop will now record each key stroke or mouse click you make. Once you've resized your image, click the "stop" button.

Now, either you can open all of the images you want resized, or you can tell photoshop to look into a certain folder of images and resize all of those images. I suggest you create a folder within the larger images, called "thumbs"...

Click File > Automate > Batch

Set: Default Actions
Action: Resize (you just made this)

Source: Choose which files you want to resize
Destination: Choose where you want the files saved (remember that folder you created...thumbs?)
There's a lot of options in there to play around with. Do what suits your needs...Photoshop does the rest.

Now in your HTML editor, inside one of the tables, your HTML should look like this:

<a href="http://www.mysite.com/images/bigimage.gif"><img src="http://www.mysite.com/images/thumbs/bigimage.gif" width="80" height="80" border="0"></a>

[MedusasOwl]

Thanks, Nathan! Wish I'd known about that quick and easy thumbnail trick back when I made my Full Circle gallery. I'm going to do a lot of experimenting and see where it goes!