zpBootstrap – a responsive Zenphoto theme (updated)

zpBootstrap is a « Responsive » theme for Zenphoto.

As mentioned in a old post, using a SmartPhone, I see the benefits of a photo gallery that fits the media.

After much searching on the net and a lot of tests on the various existing tools, I focused on Bootstrap, a framework that allowed me to build this new theme.

It automatically adapts to different screen widths ranging from smartphones to large screens, through the tablet screens.

Feel free to download and use it, and thanks in advance for your feedback!

bootstrap_home

- Updated on 04/27/2020:

the zpBootstrap 2.3 release is now avaliable for Zenphoto 1.5.6 (and more).

(...)

New: zpBootstrap supports video online

Zenphoto manages some types of multimedia files (image, video, music, ...) hosted on its own webspace, but is not natively designed to manage online videos (eg videos hosted on YouTube).

But in fact, there is a way since Zenphoto 1.2.6 to add online videos in the gallery (see here for all details):

  • In admin panel, activate the class-textobject plugin
  • In an album in your gallery, download a text file (.txt, .htm or .html) containing embedded code to your video
  • Optionally use a different thumbnail than the default one by following these instructions


I made some adaptations on the theme zpBootstrap to manage these videos in the gallery (on GitHub, use the master version). In particular, the display of videos is responsive, and videos hosted on YouTube and Vimeo can be played directly from FancyBox.(...)

New: map of geo-localized pictures (updated)

You can find the new Map page on my site, displaying all geo-localized pictures of my gallery.

With this map, I propose a new way to discover the places visited during various trips, hiking...

 

Edit (01/20/2019):
Some people have asked me how to create a page with all the geotagged images of the gallery.
Rather than respond to each request, I give you my recipe to do that:

(...)

zpArdoise – a Zenphoto theme (updated)

themezpArdoise theme is a theme for Zenphoto, inherited from initial release of zpGalleriffic theme.

Feel free to download and use it, and thanks in advance for your feedback!

 

- Update of 06/10/2017:

the zpArdoise 1.4.14 release is now avaliable for Zenphoto 1.4.14 (and more).

(...)

i-feel-dirty – a Zenphoto theme (updated)

themei-feel-dirty is a theme initialy created for Wordpress by Studio ST.

I found this theme by chance, and as I liked it, I decided to adapt it to Zenphoto respecting as best as possible the graphics of the original.

Feel free to download and use it, and thanks in advance for your feedback!

 

- Update of 09/22/2017:
the 1.4.14 i-feel-dirty release is now avaliable for Zenphoto 1.4.14 (and more).

(...)

A new theme for my photo blog

responsiveI just finished an important update of my website.

Since the opening of my site in 2010, I used the theme zpArdoise that I had created for this occasion. This theme gave me complete satisfaction until the advent of smartphones, where it showed its limits during consultations on small screens.

So I decided to switch my website to zpBootstrap theme, which I recently updated. More simple, with enlarged images, this theme automatically adapts to different devices.

The gallery is operational, as well as most part of my site (Home, Portfolio, Map, Blog...). I still have some news to edit to become « responsive » and all will be done.

Hoping that your comfort and pleasure will be increased during your visits.

Feel free to use the comments below or the contact form to give me your opinion on my new site or to report malfunctions during your visit.

See you soon, here or elsewhere!

bootstrap_home

Akismet spam filter for Zenphoto (update)

Like many other, I'm invaded by all kinds of spams. It asks me unnecessary job of moderation compared to « real » comments posted.

After some research on the net, I decided to create a plugin for Zenphoto, based on Akismet, and compatible with php5 (a plugin Akismet already existed, but based on php4 code).

The principle is very simple:
Each comment entered by visitor is sent to the Akismet server, and after analysis, the server returns whether the message is spam or not!
The comment is then published, moderate or rejected automatically...

Important:
- version 2.0.3 of the plugin is for Zenphoto versions greater than or equal to 1.4.4

 

- Mise à jour du 04/10/2017 :
i-feel-dirty is now hosted on GitHub.
You can report bugs on the Zenphoto forum or create an issue on GitHub, I will fix it as soon as possible (only the latest version is supported). You can also improve code via Pull requests.

Googlemap plugin for Zenphoto

googlemap3

When I am on holidays or hiking, I often have a GPS with me, what then allows me of geo-reference my photos.

Some time ago, I installed the Googlemap plugin for Zenphoto, to allow visitors to view my photos on a map.

The existing plugin had some minor flaws (the main one being not able to see several pictures located in the same place).

After some discussion with the team Zenphoto, I decided to re-write the plugin, using various tools found on the Net.

This new version of the plugin will be implemented in release Zenphoto 1.4.5 and will provide the following improvements:

  • Allows the "clustering" : grouping many pictures to improve navigation on the map
  • Allows viewing very close images (similar function to Panoramio in Google Earth)
  • Provides a stylized pop-up: displays the title and description of the image and a thumbnail with fixed size
  • Improves the management of pop-up (automatic closing when switching from one image to another,...)
googlemap
googlemap2

I hope these new features bring to you extra comfort. I wish you a good use of this new version of the plugin.

Zenphoto and Responsive Web Design

Until recently, the size of the screens of computers getting bigger every year. For web designers, it « enough » to expand the interfaces over time. Then came the iPhone and other Smartphones, the iPad, tablets and other Notebook, which are gradually revolutionizing the Internet and its uses.

A major challenge for web designers now is to build an interface readable on small screens, remain enjoyable on large one, taking into account the specific constraints to each medium (navigation with mouse or finger), in order to provide the best user experience as possible.

tailles-d-ecran

One answer is the Responsive Web Design.

Ethan Marcotte was the first to wrote the principles in an article published in May 2010. Principles which can be summarized in two words: flexibility and responsiveness and are based on three basic elements:

  • grids that can build interfaces using a variable number of columns in which are inscribed contents
  • flexible images where size and layout are set in response to the screen size
  • media queries that can detect which medium is used (or rather the size of the screen) and allow specific design (size, shape, position of elements, ...)

This technique is still young enough and uses the latest web standards: HTML5 and CSS3 (especially for media queries), and requires careful consideration from the designer's site on how to redistribute items based on resolution of the screen, or appearing/disappearing of some elements.

The Responsive Web Design offers therefore new possibilities for website design and provides tools and methods to give for each device the best design.

A Responsive Zenphoto theme

After creating two "static" themes for Zenphoto and regularly browsing on the Net with a SmartPhone, I see now the benefits of a photo gallery that fits the media.

After seeing the excellent theme zpSkeleton, I started a new adventure and I am working on a new Responsive Zenphoto theme. I hope to quickly achieve a beta that I will show you.

Quelques ressources

Informations about Responsive Web Design

Tools for building Responsive sites

Examples of Responsive sites (resize your browser to see the different responsive layout)

exemple3

Installing a guestbook

Following the creation of the zpArdoise theme, many people have asked me how to install and use a guestbook.

Rather than respond to every request, I dedicate a post on the subject.

Here is the method used to install a guestbook on Zenphoto:

  1. install a guestbook script on your site (personally, I use the script AlexGuestBook, installed at the root of my site, but there are many others),
  2. configure the script as recommended by the publisher, your desires and your purpose (personally, I use the AguestNew skin),
  3. on your Zenphoto site, activate the ZenPage plugin,
  4. create a page called « Guestbook » (or another name to your convenience), and in the « Code block 1 » from this page, copy the code attached,
  5. if necessary, adapt the theme of the script to match with your Zenphoto site (personally, I modified the file templates/skins/AguestNew/alex_livre.css to match it with my zpArdoise theme).

That's all folks!

 

<script type="text/javascript">
   function setHeight(){
var hauteur;
var monFrm = document.getElementById('forum');
if(document.all){
hauteur = monFrm.contentWindow.document.body.scrollHeight;
}else{
hauteur = monFrm.contentWindow.document.body.offsetHeight;
}
monFrm.setAttribute("height", hauteur);
}
</script>

<div style="width: 800px; margin-right: auto; margin-left: auto;">
<iframe id="forum" name="livre-d-or" onload="setHeight()" src="../agb/index.php" width="100%" align="middle">
</iframe>
</div>