Photography portfolio project v.1.1
What is it?
Photography portfolio is a simple portfolio system I built for people who have a minimum of curiosity about Web development and want their own portfolio.
This is not a full-complex portfolio even if I plan to build plugins like a contact form or a guestbook. The portfolio is in fact one visible page where all your portfolio content is loaded in. It is the reason why the page loading may be long the first time you visit the portfolio. It also depends on the speed of your Internet connexion :).
As I wrote above, the portfolio is in a single page, and not very intended to huge portfolio content or with a lot of categories.
Features
- Automatic portfolio content generator system
- Categories support (one directory = one category)
- Randomized portfolio content support
- Great design and full customizable design
- Easy to use
- Light weight code and design
- Supports .JPG, .JPEG, .PNG and .GIF files
- Respects W3C recommendations
- Uses Creative Commons License
- Compatible with most recent Web browsers
- Hand-coded for best quality and garanteed support
- Visitors counter file system based
Top ↑
Download it
Photography
portfolio v.1.1
ZIP (4.9 Mo)
Top ↑
How to install?
What you need before starting
- Your portfolio content with a height of 360px
- A Website to install it on and management knowledge
- PHP5 support for your Web site
- At least some XHTML knowledge (it would help to have CSS and PHP knowledge)
- A Web page editor, I recommend :
- An unarchiver software which manages ZIP files if your OS does not manage it by default
- Interest, curiosity and patience
- Manual-reading reflex before asking question/contacting me
Top ↑
Step 1
First of all, you need to download it and unzip it. You will find a directory with these files :
Look around directories and check how they are built..
Top ↑
Step 2
Open the file ./index.php
with your Web page editor. There are a lot of comments, which are generally written in green.. They are blue with my editor.
Read out all comments.
Here we have one of the important points which will make your portfolio more personal: the Web page headers.
Web page headers are read by Google and others search engines, if you do not want to see My portfolio title
when you look for your portfolio in a search engine, you must adapt these headers ;-).
Please, do an effort to complete correctly these headers since each of them is very important.
Now, your personal content; I chose for myself to write the About me
part using myself as an example. I think it is important to get some information about the photographer.
You are free to write whatever you want, just check out your content does not have a height which will make appear a vertical scrollbar in any Web browsers.
Advice: do not fill your content area with too many details because it might not fit depending on Web browsers.
Now, let's see how to make your visitors counter appear on the Web page.
I tried to make it very easy to manipulate. The specified time limit is in fact set by default to 24 hours (a visitor who comes several times in your time limit will not be considered as new visitor and will not inscrease the total visitors counter).
If you want to remove one part of the counter, you have to remove the script part. A script part starts with <?php
and ends with ?>
.
If you do not understand what this code fragment does, go at the bottom of this Web page and compare what you see with the code fragment.
You may have a question which should be: how and where will be all my shots?
The answer is just below, with only 6 lines, script generates your category list and your portfolio content.
How does it work? You just have to replace ./content test/
by the diretory name where you decided to place your shots or subdirectories.
The script will scan this directory and build one category per subdirectory. It will not if your subdirectory is empty. You are free to place pictures in the main directory, a category named of it will appear :).
The random feature (refresh the Web page to see it) is set by default, to disable it do this: $portfolio = new Gallery('./content test/', false);
.
Avoid special characters about your directory name, you can add spaces if you want... The same for your shot name. In any cases, if the script encounters a bad character, it will not work correctly or not at all.
Warning: the script will not scan sub-subdirectory or further, it is not devised for building a directory tree. It is not deviantART ;o).
Top ↑
Step 3
Now that we have finished with the main Web page, open one of script files to configure another point of your portfolio: the JavaScript point.
Open the file ./inc/photography.gallery.js
.
As you can read, you need to type again your porfolio title. Why? Because when you are viewing a category, the main title changes to your category name... And when you come back to your category list, your portfolio name must appear again.
You can play with it by writting something else ;-).
The two other variables are about the How to back categories
balloon. The first one is the time length until it fades out even though the second one is the fade out lenght.
Top ↑
Step 4
The final step is to upload your files, start by uploading your portfolio content and end with the main Web page (index.php).
Do not forget to proceed of several tests before spreading out your portfolio URL; example: check your personal content code with the W3C markup validator.
Top ↑
Going further
Build your own CSS
Most of you have probably some CSS knowledge. As you can see, the portfolio content generator is only in 6 lines.
You are free to destroy my CSS and build your own if you wish to show your art with higher or lower picture size.
How to proceed? Open the file ./css/photography.inc.css
, I made it very readable (indent style), and modify what you want.
The only thing you do not have to forget is about the div where will be your portfolio content. Do not forget to add white-space: nowrap;
else your portfolio content will not be only in horizontal way but vertical way too.
Show me your design talent, tastes and creativity ;-).
Note: I do not support CSS problems if you build your own.
Adding plugins
I plan to add these plugins but not for now, I have to finish others Web project first:
- Contact form plugin (easy way to contact)
- Guestbook XML based plugin (I started to work on this projet)
- Links plugin
- JavaScript auto-scrolling gallery plugin
If you have any ideas about improving this cool project, please contact me and I will see if your plugin could be part of the official package.
Top ↑
Changelog
Please, do not hesitate to contact me for reporting a bug or a mistake in this documentation.
Known bugs
- [Opera] Category title onmouseover link does not work when visiting a category
Version 1.1 March 30, 2008
- [JS]
How to back categories
balloon setTimeout() fixed - [JS]
_
replacement fixed when multiple spaces in a category name
Version 1 February 6, 2008
First version of photography portfolio.
Top ↑
Terms of use
Spreading out the word about this project
Please, spread out the word about this project around you, I think a lot of people is looking for an original portfolio to use and in addition, it's free! Not only that, but the more users there are, the more chance there will be release plugins due to increasing demands.
I thought about starting a great small project, help me to make it bigger and useful.
License
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/.
Please do not claim you are the author of this project and please do not remove comments about my copyright. Please, respect my work and the service I am giving you.
Top ↑
Additional informations
Last update: Feb. 15, 2008 by Joris.
Thanks to Mrs NORRIS for the English correction.
Portfolio realized in 36 hours (picture resizing included). Full PHP powered and valids W3C XHTML Strict 1.0, CSS 2.1, WCAG 1.0 WAI AAA and Section 508.
1609 visits since 08/24/2008 03:44, 2 in last 24 hours
Top ↑
