Category: San Francisco Journal

There’s no such thing as talent, only lack of talent. The rest is work.

Jerzy Grotowsky
Quoted in The New Yorker, April 8, 2013

or perhaps titled:

I don’t trust anyone with my photos, not Flickr, not Google and especially not Mark Zuckerberg!

Requirements

• Linux Hosting Account (php enabled)
• ftp program for uploading files

Implementation

• Clone the GitHub repository at https://github.com/pelicanpaul/groovy-php-gallery/
• ftp up to your web host. Probably a good idea to create a directory such as “MyPhotos” or “MrPrivatePics” or “DoNotLookAtThesePhotos”
• Add galleries to the Assets folders (see file naming convention below)
• See working example.

History
Many years ago, in the dark ages of web development, when I had a Windows hosting account, you know one of those $4.95 a month deals, and I wanted to post lovely photos of my kids and vacations, I would do it a state of the art way. I’d open Photoshop 7 and chose “Create Web Gallery.” I would then wrestle the various dialogue boxes into submission and create a Web Gallery. It worked. It looked cool. It used tables for layouts. I was a genius.

Last year I closed my Windows hosting account. Never use webhost4life. It is a terrible hosting company. As I was doing a lot of Word Press, I chose BlueHost. So far so good.

Now I could have just uploaded all my old Photoshop galleries to my new hosting account but this seemed lame. I did not want to use any Web 2.0 stuff, in other words startup companies just waiting to be bought out and make your life really complicated, but I did want to use ftp to upload files. So with a little php, notably scandir, I created a way to display all the photos in lovely paging galleries.  The first time a particular gallery is accessed, it creates a folder of thumbnails in that directory named ‘thumbs.’ This makes the pages load faster.  Larger versions of the images utilize Michael Jackson shadowbox, still one of my favorite lightboxes  There is no indexing for searching, or meta tags, but to be honest, I would never get around to entering this sort of data. Maybe in the next version, I will add this feature.

A few key elements (let us say features and recommendations) of “Paul’s Amazing php Photo Gallery” are

• Name your folders like this 2012-08-New York. The folders will display by replacing the dashes with spaces and are ordered in descending order.
• Process your images to 1200px wide. This way they will look great when large, but not so big it takes forever to see a gallery.
• All gallery images have a lightbox large image version. Go shadowbox!

that’s it…
Enjoy!

[do_widget id=woocommerce_products-3]

See a Complete Example

NOTE: It is so funny really, that this post is viewed more than any other on this site. If you are trying to put two carousels on a page it is simply a problem that you need to understand selectors.
If you need web development or are interested in my web development posts, it has moved to
http://www.paullyons.info/blog.
Paul Lyons
11/1/2014

There is really two ways you can find great new platforms and technologies when building websites. You can tirelessly scrape the web, subscribe to podcasts go to blogs, subscribe to twitter feeds. All of this is but one route. Another is just to get a job in the industry and have to deal with some out-sourced vendor’s code. I tend to be someone who does the later.

And so I found myself dealing with the Twitter Bootstrap world – http://twitter.github.com/bootstrap/ defined as

“Sleek, intuitive, and powerful front-end framework for faster and easier web development.”

At a tidy 25k minified it definitely raised my eyebrows.  So I dove in and took a look around.

I was having a hard time with the project I was working on having two Bootstrap Carousels on the same page.  In the past I had always used a jQuery plugin called BxSlider. So I tried to isolate the problem and still I was stumped. The code was very modular with good name-spacing but the js file just rambled on.  So I looked at how it was instantiated.

What I discovered with bootstrap is that it is best, dare I say “best practice’ to call your jQuery plugin with a selector not used in the plugin. For example, the Carousel plug-in uses .carousel as a class in the code. So doing a

$(document).ready(function(){
$('.carousel').carousel();
});

will just create issues if you put two bootstrap carousels on the same page. The class ‘.carousel’ is used in the bootstrap plugin.  Instead do


$(document).ready(function(){
$(‘#carouselName’).carousel();
});


Where #carouselName’ is of course the id of the carousel.  So I had two of these lovely carousels and could then instantiate them with

$(document).ready(function(){
$('#oceanCarousel, #musiciansCarousel').carousel({
interval: false
});

});

Another issue that I had to deal with is the concept of having more than one img showing at a time. This can be accomplished with simply putting more than one image in the active div

<div class="active item">
<a href="#"><img src="../images/small/ocean01.jpg"></a>
<a href="#"><img src="../images/small/ocean02.jpg"></a>
<a href="#"><img src="../images/small/ocean03.jpg"></a>
</div>

You will not be able to have the carousel move just one image at a time as you can with BxSlider but so be it. A few important notes. It is best to use the entire bootstrap.js even though they have individual versions for each plugin. I think the pure CSS previous and next buttons/arrows that come courtesy of the base bootstrap css are the bomb but of course IE makes them square but then who cares about the people who see the web with IE anyway.

• See a Complete Example.
• Download Source Files (minus the images)

Hope this post makes your day easier.