** in course of contruction **
by Tim Hill
Suitable for any OS on any device. A browser and web server with PHP are required.
(Javascript is required only for the Carousel function)
MOBILE FRIENDLY with Responsive Web Design. Images are scaled if necessary to fit always within the width of the display
Introduction
If ever you have wanted a collection of online albums where you can keep control of all your files, this way of storing and displaying them could be for you. Pix does not have to be on the public internet and will work just as well on your local network, or on any machine with a php enabled web server and a browser installed.
Pix was inspired by there being a lack of a way to do what I wanted to do: to have local folders into which I can drop files which automatically become an album. I do not want to have to keep editing static HTML pages as I add and remove pictures, or have to regenerate album pages each time. A script can do that. Pix writes its web pages and the links between them from the images it finds. It should collate a page of thumbnails, have an automatic or static one-at-a-time carousel of the images at an appropriate size you choose and access to the original photos. Previously, it was possible to find bespoke software which created an album from a set of photos but any changes meant recreating the entire album into static HTML each time. There are even online options but they are often spoiled by unwanted image compression, poor thumbnails or limited space. Pix can handle any number of photos and is limited only by your web space. The example albums (the bulk of the download) are both created by the same tiny script.
Security Warning
If you put your collection of albums on the public internet yourself - either by using an appropriate ISP or by running your own web server - they could be available to the whole world. This collection of files making up Pix makes no attempt to prevent anyone copying your files. Stealing them all is easy but you could make them hard to find in an unlinked folder with an odd name you share only with friends and family. There is no security for images displayed on the internet so watermark them and add your own copyright headers to JPEG files if you want to. You could make people ask for original unblemished copies of files by easily adding your own HTML or PHP above and below what Pix displays on each page. It is up to you what you want to appear at the top and bottom of each page. Think about whether the originals mentioned below should literally be the original images off your camera, say, or only originals as far as the public is concerned. Perhaps a master copy. Another consideration is that your web space could become huge or full if you upload large numbers of native files from most of today’s cameras. Take some time to improve each picture and think about whether there is much point uploading anything bigger than the biggest monitor!
Of course, the web server you use for Pix does not have to be on the public internet but it does need to have PHP. It could just as easily be running on a laptop and used to display your photos only on that laptop. Or, you could even have a something like a Raspberry Pi acting as your web server only to your local network then configure your router to make it seen by the whole world or not.
File types
Pix is not limited to pictures: your original files can be of any type understood by a browser. You can include PDFs as well as SVGs, JPEGs, PNGs and GIFs could be present. The original files could even be ZIP archives; the web server will usually tell your browser to offer them for download.
Preparation
The first thing to do, before you can use this software, is have access to a web server with PHP installed, whether locally or somewhere on the internet. Free hosting is available if you shop around, or get your broadband from an ISP which throws in some web space and even a free URL. You will need to access an ISP’s distant web space via FTP so install whatever tools are needed by your operating system. Alternatively, you could run a web server under Windows or use an old PC to run Linux and Apache just like the big boys do.
Using Pix you can easily create albums similar to Blue-Bike and Schooner Pickle by simply providing your pictures in three sizes and by creating caption files (for which tools are provided) and changing a few variables once. Albums are named simply by their folder name. The script substitutes spaces for hyphens used in filenames and auto-detects all albums co-located in the same directory and all the photos contained within them.
Using Pix is simple: Pix.zip (13MB) contains all the files which generate this example. When installed on your web server, the contents of the the .zip download should produce identical output to the example. Make sure it does before proceeding.
After testing
All you have to do to make Pix display your own pictures is to remove my pictures and substitute your own (in three sizes) and provide caption files (which can be empty). There is no limit to the number of pictures in each Album. The ZIP includes a skeleton index.php file and many other essential files in a folder called -pix-shared-. There are two Albums, uminmagitively called Album-One and Album-Two. To change the name of an Album, simply change the name of its folder. The script will alter it on the index page automatically (you may need to reload). You can add as many albums as you like. Every folder which is not called -pix-shared- will be assumed to be another Album and will be added to the index page by the script automatically. The Album folders themselves must follow the same structure and content rules and must contain:
- A file badge.jpg measuring 240x180 which represents that Album folder.
- A directory or which contains your original images (the largest). They can be of any size.
- A directory me which contains medium sized images for the carousel. Images which fit an 800x800 pixel box are suggested as a starting point but any size can be used.
- A directory sm which contains small or thumbnail images for the whole album display. I have been using thumbnails which vary from fitting 180x180 to 320x320 and that depends on how many photos are in each album as much as any other consideration. If you have a batch processor of some sort, recreating bigger/small thumbnails from the me images is a doddle. Tip: use a slight sharpen on the smallest - thumbnail - images.
- A directory called ca which contains one caption files for each photo, even if blank
Tip: On a web server you should not use spaces in file or folder names. If you use hyphens where you want spaces, they will be replaced by spaces on the index page.
Filenames in Albums
It is strongly suggested that you use meaningful filenames in the various folders inside an Album as this will save you confusion later. Let us assume you have a photo taken from your camera called 12345.jpg which you have cropped and enhanced to a file called 12345_ce.jpg which becomes your original image. You then create a version which fits 800x800 which you call 12345_ce_800.jpg which you will save in the medium folder and another scaled to fit 240x240 called 12345_ce_240.jpg which you save to the small directory. Lastly comes the caption file, which I suggest here would be called 12345_ce.txt
It is important to understand how the software works. First, it checks that each of the four folders in each album contains the same number of files which are then sorted alphabetically. It is assumed that the first, second, third, etc., file in each folder corresponds with the 1st, 2nd and 3rd in the next, which is why a naming convention similar to that above is suggested. As the sort is strictly alphabetical, the files could be forced unto a particular order by the corresponding files being prefixed 01_, 02_, 03_, etc., or aaa-, aab-, aac-, etc., or whatever. In the above example, 12345_ce is our common prefix as well as the original filename.
xxxxxxxxxxxxxxxxxxx edited to here 20190202
Don't point your browser at the script directly, target the index.php in the parent directory which 'includes' the script. As you navigate the images, the index.php reloads itself (and the pix.php script) and whether it displays a sheet of thumbnails or a single larger image with previous/next navigation buttons depends on the parameters the script passes itself. Selecting the larger image results in the original (largest) image being displayed by the browser. Use the back button to return to the larger image and the up arrow to return to the thumbnails.
Here are the instructions on how to start using the Pix Carousel PHP script. Please try them with only a few images at first.
- Copy the contents of carousel.zip (4.2MB) to a new web folder.
- Type the path to the new folder into your browser.
- Make sure the output you see is the same as this example. Test it.
- When you know the script works, you may want to remove the original three images: empty EVERY directory inside the folder 'pix'. See how their filenames are similar.
- Choose your own original images from your collection having cropped or otherwise tweaked them as necessary. Copy them into the folder 'pix/originals'. They will be displayed in alphabetical sequence so adjust the filenames to change the order in which your pictures are shown.
- From your originals create 95% JPEG images constrained to 800 by 800 pixels (retain the aspect ratio and file name). Take care not to overwrite the originals! Save the new files to the folder 'pix/800x800'.
- From the 800x800 files create 95% JPEG images constrained to 240 by 240 pixels (retain the aspect ratio and file name). Save the new files to the folder 'pix/240x240'.
- Inside 'captions' you need to create a text file for each original image. Ideally, an image called <filename>.jpg in the three image directories will have a corresponding caption file called <filename>.txt.
- Edit the files in 'captions' as required or leave them empty. The captions are inserted into ALT and TITLE tags so avoid using the double-quote in your description..
- Type the path to the folder into your browser, as before. There will be an error if the four Pix directories don't contain the same number of files..
- If you change the directory names 800x800 or 240x240 (perhaps because you have decided on different sized thumbnails and larger images) amend the top of the pix/pix.php script, as indicated..
- Edit index.php as required!.
- At any future time you can add more images (and captions) and no script editing is required. Just make sure every directory has the same number of corresponding files; the script will complain if they differ.
- Share and donate!! Contribute ideas for improvements! Like and share! Follow!.
Pix Promote your Page too |
