Ant Posted March 24, 2010 Report Share Posted March 24, 2010 Before I venture on and try and research the different options available to me to create an interesting photo gallery, what are some things I should avoid. What I don't want to do is create 2 images (thumbnail/fullsize) for each photo on the site. I know I can do it that way and use the css/html I have learned, but that seems very archaic for a lot of images and time consuming. What I'm looking for is a page that will show categories of photos, which when clicked bring up all the photos in that category as thumbnails, and an option to enlarge then scroll through them. I know there are what I call 3rd party software that create them for you, i.e coffeecup etc. I know I can do it in Dreamweaver/Fireworks,Javascript (which i have not learned yet) but again I'm not sure if that a good idea. As a beginner is there somethings that I should avoid? Is using software like coffee cup cheating and bad practice? Thanks Ant Quote Link to comment Share on other sites More sharing options...
shelfimage Posted March 24, 2010 Report Share Posted March 24, 2010 Use a Content Management System. I use CMSMadeSimple.org for nearly everything I do now, and there is a module called Gallery. Incredibly easy to use. After install, create directories on your web server to represent each gallery you want. Upload images to those directories using the CMS or FTP. Then manage your gallery from the CMS admin to design the layout and design of the gallery (there are bunch of preinstalled templates you can use too). Add gallery descriptions, image titles, image descriptions, etc. The gallery automatically creates thumbnails for you based on your thumbnail preferences - the size, ratio, cropped, etc... put a small tag on the page that will hold the gallery and you are done. Easy to manage and edit. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 24, 2010 Report Share Posted March 24, 2010 There are also specific gallery creation systems that do all the file generation and provide a simple interface for uploading/managing the photos in the gallery. For example: http://www.plogger.org/ http://www.zenphoto.org/ Quote Link to comment Share on other sites More sharing options...
Ant Posted March 24, 2010 Author Report Share Posted March 24, 2010 Shelf, thanks I'm reading up on it now. Falken i will look into your links as well. Are these systems preferred over standard html/css because they allow greater control, and visual design options? Ant Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 24, 2010 Report Share Posted March 24, 2010 The advantage to using a CMS or another system is that they greatly reduce the time spent on simple tasks such as adding and removing files, creating thumbnails, etc. It does take a little bit of time to set up initially, but after that point you don't have to do everything by hand. Quote Link to comment Share on other sites More sharing options...
Ant Posted March 24, 2010 Author Report Share Posted March 24, 2010 I now have a headache. This is the first sentence I read when I went to CMSMS: "CMS Made Simple helps experienced web developers...." I laughed. It seems I have to download the files and then upload them to the server etc..to even begin trying to figure out how it works and placing it's functionality on my sites layout? Check the requirements with that of the server, setup a MYSQL database, and steps 2-20 which are all foreign to me. Guys, i'm just joking and making fun of myself. I'm not downplaying the help you all offered, I appreciate it. I just don't have the knowledge to implement anything from the CMCMS site. Maybe the http://www.zenphoto.org/ is easier. ONE question. If I was to LEARN any of these options, how would I know how to setup the gallery on my site, when I don't have the site live on a server. Don't these systems have to work on the server ALONG with the site to be functional and begin creating the layout of the gallery on my page? Ant Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 24, 2010 Report Share Posted March 24, 2010 If you didn't want to go the cms route then you could piece it together. Say the first five thumbs are in a jquery tabs type setup. When you click on one of these thumbs it shows all the thumbs from this group. From there, you can either css it (large image shows on hover) or lightbox it (large image pops up in a overlay) and then they could click or scroll through all the images in that group. All the thumbs can be the same image as the large one. Just tell it to be smaller. Quote Link to comment Share on other sites More sharing options...
virtual Posted March 25, 2010 Report Share Posted March 25, 2010 (edited) If you want something simpler than what the big guys have been suggesting you could try this http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm Edited March 25, 2010 by virtual Quote Link to comment Share on other sites More sharing options...
Ant Posted March 25, 2010 Author Report Share Posted March 25, 2010 Guys, thanks. I will look into the links. Meanwhile, don't I need a server to upload all the necessary files to view my design when using things like PHP etc. If so how do you guys handle that? So far I have just previewed my HTML, but have not uploaded anything to the server. The site I'm trying to REDESIGN as a means to learn all this, is live on a server that I have access to. Can I use that server as my test platform? I assume I can use it to upload temp files, and create a temp site? Whats the RIGHT way to do that? How do you guys use server side scripting(not sure that's the right terminology) when designing a site that uses it, and PREVIEW the design ? Every question I ask opens up the pandora box of web design wider. thanks Ant Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 25, 2010 Report Share Posted March 25, 2010 There are two ways to do that -- create a temporary directory on the server which you can experiment with, and then delete the directory once you are done, or run something like WAMP (Windows) or MAMP (Mac) which installs an apache server on your local computer with PHP and MySQL support. That would allow you to create databases and preview PHP files on your local machine. Check the stickies in the PHP section of the forum for more info on how to download/install it. Both Stefan and I have screencasts on how to get started. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 25, 2010 Report Share Posted March 25, 2010 If I may be so bold. Ant I think you should be googling JavaScript photo galleries. That's going to give a nicer presentation and be MUCH easier to implement. Admititdly, I've never done a php one, but from what I've seen they are much more involved. Quote Link to comment Share on other sites More sharing options...
Ant Posted March 25, 2010 Author Report Share Posted March 25, 2010 Falken, thanks for the server answer. I created a test folder on the server where I will place all my test files and see if I can get any of these options working. So far this one, http://www.dynamicdr...-photoalbum.htm, seems to be missing the 4th necessary file. That one was easy because it was only a few steps to get going. I'll see if I can find another site that offers something similar for me to try. Eric, will the javascript based galleries allow me to add to the galleries myself without re-uploading everything? I think the present site is using something like Jalbum. But I guess you cant just add photos without redoing the entire gallery. Ant Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 25, 2010 Report Share Posted March 25, 2010 Forum Issue... The trunkated link in the post does not direct correctly Guys. Ant, I guess it depends on the one you pick. You still want a gallery where you click to activate things right? Therefore that's js or php. Css only hovers. Quote Link to comment Share on other sites More sharing options...
Ant Posted March 25, 2010 Author Report Share Posted March 25, 2010 Eric, heres the correct link: http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm What I think is the 4th file I need has a spinning icon. I checked the source and I don't see a file thats linked with that field. Yes I want the photos to expand when I click. So, some Javascript type galleries offer a way to upload additional photos? If so I assume it needs to be done by a web designer and not the client. Is it the PHP type gallery that offers EASY client side changes? I'm still trying to understand the difference between these: PHP, Javascript, MySQL... Ant Quote Link to comment Share on other sites More sharing options...
JemsRoker Posted March 29, 2010 Report Share Posted March 29, 2010 Here is my way. I myself find easiest when it comes to skin others may have better ways is to get the the eye dropper tool, find a patch of skin that has not blemishes or anything and select the colour, then get a brush, change the opacity of it. Quote Link to comment Share on other sites More sharing options...
Ant Posted March 31, 2010 Author Report Share Posted March 31, 2010 Allright I have gotten pretty far and was able to set up a MAMP and use the dynamic drive photo album from here: http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm Everything was going well, except I cant get the images to load. I have the "format" as shown in the DEMO on the site, but all I have are "?" where the images should be. BTW I have this same question circulating on that site. I figured it couldn't hurt to pool 2 different sources. My problem is I'm getting this error in the activity window of safari for the 5 photos: http://localhost/myimages/salmon/IMG_7130.jpg cant connect to host I thought the local host should be on port 8888. My other files load and work fine PER THE ACTIVITY viewer in Safari, THEY show: (localhost:888) http://localhost:8888/myimages/salmo....php?id=salmon 0.3kb Why are the images that are not displaying showing a link referencing "localhost" I tried turning on websharing in my OSX Preferences but that didn't work. Thanks Ant Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 1, 2010 Report Share Posted April 1, 2010 (edited) Hey Ant, check these out! Just built them. Thats all CSS! The small snippets of JS (depending on which version) are for IE and webkit. I hate to brag - but I am a CSS God. Might what to use these instead... http://www.visibilityinherit.com/projects/lightbox-focus-demo3.php http://www.visibilityinherit.com/projects/lightbox-target-demo3.php#url Edited April 1, 2010 by Eric Quote Link to comment Share on other sites More sharing options...
Ant Posted April 1, 2010 Author Report Share Posted April 1, 2010 Thanks Eric. I like the examples. Any idea why my images are not showing using the MAMP? The Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 1, 2010 Report Share Posted April 1, 2010 (edited) Thanks Eric. I like the examples. Any idea why my images are not showing using the MAMP? The Thanks! No idea about the MAMP. I once installed all of it. But only rarely used it so uninstalled it. I just throw everything up live to test PHP. Edited April 1, 2010 by Eric Quote Link to comment Share on other sites More sharing options...
Ant Posted April 1, 2010 Author Report Share Posted April 1, 2010 If I use a live server can i just HOUSE all my files in a folder called "temp_site" or something like that which doesn't match another folder on the server with the live files/website? I assume thats a safe way of testing things without screwing up the live website? Ant Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 1, 2010 Report Share Posted April 1, 2010 Yeah just make a folder (call it anything) and uplaod everything in to there. Won't break anything that way. When finished just delete the folder. Quote Link to comment Share on other sites More sharing options...
Ant Posted April 1, 2010 Author Report Share Posted April 1, 2010 Thanks Eric. I'll see if I can get it to work on there. Quote Link to comment Share on other sites More sharing options...
Ant Posted April 1, 2010 Author Report Share Posted April 1, 2010 Ok. I got it to work by uploading all my files to a live server. I ditched the MAMP. My next problem is the thumbnails are all 200px x 100px But not all my images are that size proportionately. When i remove the dimensions in the css the thumbnails load in the native size of the photos..HUGE. Is there a away to tell the css to use the images at their original size but make them thumbnails. So some thumbnails would be 100 x 100, some 200 x150 etc. I don't think a percentage would work because some of my photos may have huge native dimensions and others small native dimensions. I know at some point I need to create a minimum size for all the photos so that when they are clicked on they never exceed "x" width etc. SO i will have to open each one and prepare them in PS. I don't want to create a thumbnail for each image. Thanks Ant Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 1, 2010 Report Share Posted April 1, 2010 If you just give the thumbs a width the browser will automatically scale each thumb porportionately. Sounds like that is what your after. Although, I just usually make all the thumbs the same size. Makes it much easier to position. Plus looks better in my opinion. Sure the thumb will be a little skewed, but it's so small it usually doesn't matter. If you want 100% quality, you'll have make small thumbs in PS Quote Link to comment Share on other sites More sharing options...
Ant Posted April 1, 2010 Author Report Share Posted April 1, 2010 Eric, THANK YOU!. That worked. I see what you mean. Now I have thumbs that are 200 x 200 and some that are 200 x 100. So visually they do not create a nice grid. If I do not do it this way, that means I need to open each image and make them all say: 500px x 600px. However, what happens if I get images that are supposed to be wide landscapes. say the native size is sent to me as: 700 x 300 I guess theres no way around that. Unless theres a way to show a thumb as 200 x 200, but when it's clicked on it actual shows the TRUE dimensions of 700 x 300. Although, that means the thumb will cut off some of the image etc.. Ant Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 1, 2010 Report Share Posted April 1, 2010 Or you could just give each thumb a height and not a width. That may produce a better looking grid Quote Link to comment Share on other sites More sharing options...
Ant Posted April 1, 2010 Author Report Share Posted April 1, 2010 Tried that. THANKS again! Now I need to figure out how what I just did can help a potential client upload photos. I assumed there was an interface (login) for clients to go along with this gallery. Kind of like the cushycms site demo shows. Ant Quote Link to comment Share on other sites More sharing options...
technoblue Posted May 4, 2010 Report Share Posted May 4, 2010 (edited) Hello Ant, Great thoughts. I like this information. It is a very useful and helpful information. Thanks for great sharing. Edited May 4, 2010 by Andrea Link Removed Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.