New in Version 1.00 : Templates

Templates 1During the last year I analyzed the question in the forums what could be the next step forward for NextGEN Gallery. I’m no company, I have not twenty people which are analyze the layout, code or waste their time with brainstorming for the next release. But I’m read between the lines in all of your questions : How can I show Exif information ? Can be the pagination on top of the gallery ? Can I include the album name ? Can I show this or that ?

There are of course also functional requests (Flickr or Picasa support, sub-album, comments etc.) but the most questions are around layout or design. Since WordPress introduce the automatic upgrade feature, all you changes in the code could not be saved during a upgrade. Also it’s not so easy to study my code to do some minor changes on the layout.

With Version 1.00 I extract the most output code to separate files and enable new templates which can be ceated without any code changes in the core plugin. Here a example :

Templates 2Web Designer Wall published a very good example how do you can style a gallery without editing the images itself. If you read the post, you will see that you need a <span> element inside the <div> or <ul>. In the past you need to modify my core plugin files, but now you can create a new file which include all the changes you need for your new gallery design. Custom templates are PHP files that can be stored in the folder nggallery, inside your theme directory. For example, if you are using the default WordPress theme then you can store a template file at :

/wp-content/themes/default/nggallery/gallery-sample1.php

To use now this template in a post or page you insert the tag:

[ nggallery id=1 template=sample1 ]

This tells NextGEN Gallery to use ‘gallery-sample1.php’ to show the gallery output. Without this template tag, NextGEN takes the default template in the plugin folder, normally located at :

/wp-content/plugins/nextgen-gallery/view/gallery.php

The same you can use for album, singlepic or imagebrowser, all of them are template driver so that you can easily modify the output without having problems during a upgrade.

Here now a example , I copied the original gallery.php file and changed it to a <li> output instead the <div> classic way :


&lt;ul id=&quot;ngg-gallery-ID ?&gt;" class="sample3"&gt;

<!-- Thumbnails -->


&lt;li id=&quot;ngg-image-pid ?&gt;"&gt;
&lt;a href=&quot;imageURL ?&gt;" title="description ?&gt;" thumbcode ?&gt; &gt;
<span></span>
<em>alttext ?&gt;</em>
&lt;img title=&quot;alttext ?&gt;" alt="alttext ?&gt;" src="thumbnailURL ?&gt;" size ?&gt; /&gt;
</a>
</li>

</ul>

The CSS styles can be now added from the samples of Web Designer Wall without any changes :


.sample3 {
list-style: none;
margin: 0;
padding: 0;
text-indent:0px !important;
}
.sample3 li:before {
content: '' !important;
}
.sample3 li {
padding: 10px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.sample3 li:hover img {
border-color: #000;
}
.sample3 img {
background: #fff;
border: solid 1px #ccc;
padding: 5px;
}
.sample3 em {
background: #fff;
color: #000;
font-style: normal;
padding: 2px 8px 0 22px;
display: block;
position: absolute;
top: 20px;
left: 5px;
border: 1px solid #999;
}
.sample3 a {
text-decoration: none;
}
.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: 7px;
left: 9px;
background: url(images/paper-clip-mini.png) no-repeat;
z-index: 3;
}

You find more gallery layout examples at nextgen.boelinger.com

Advertisements
Tagged ,

45 thoughts on “New in Version 1.00 : Templates

  1. Vuthy says:

    Wow, very impressive update. Thank you for all your hard work coding this plugin and sharing it for free. It’s such a versatile and powerful plugin and I can tell that you put in a lot of time to listen to what people want and to try to make it better and better.

    It’s already the best out there! Thanks.

  2. Awesome. ^_^ I’ll have to play with the coding when I get the time. Thanks for adding this feature!

  3. cnb says:

    very nice done,i’ve to try this

  4. mh says:

    It seems like you are trying to make NextGenGallery more modular! Way to go 🙂 Cheers! Thank You for your contribution to WordPress Plugins!

  5. Possible bug:
    Please see http://blog.nrajesh.com/salzburg-trip/

    I was playing around/ testing with new code for template/exif.

    The code I’ve used:
    [gallery=9]
    [imagebrowser id=9 template=exif]
    [nggallery id=9 template=sample5]

    Just click on imagebrowser arrows and navigate to next page
    This doesn’t seem to give out the desired effect!

    Also note the last line of the post (even before clicking on the arrows):
    “Rendering of template gallery-sample5.php failed”

  6. Chomping at the bit to start using this… I have over 10,000 photos in my Nextgen gallery (is that some kind of record?) and really want to be able to style my galleries…

  7. rayk says:

    Awesome! Good feature so we don’t have manually update Nextgen Gallery if we are using our own css file.

  8. In-depth view. Like it very much. I will follow these tips provided herein to examine its specific outcome after putting into use in real cases. Thanks from me.

  9. Waikon says:

    The new version works fine with my test gallery. But I want to add EXIF Data as the description below the pictures, such as aperture, focal length, shutter speed etc.

    I am using thumbnails on the gallery page without ImageBrowser. The ImageBrowser would solve my problem, but everytime if I click on the back or the next button, it will jump on the top of the page again, and I must scroll down to the picture or buttons…

  10. alex.rabe says:

    It require a anchor is this case, I need to look if I can add this to a next release

  11. Waikon says:

    Thank you very much!

  12. ALSD says:

    I’m having a simple problem with uploading my pictures…i Keep keep getting an error.

  13. Yogie says:

    Hi Alex,

    due to the fact that WP 2.7 RC1 is out I was able to test your RC1 as well, and I have to say – excellent work done, and with the new template system I now do have an easy way to display the EXIF data. I have waited for so long to such a solution. I more than happy to have your gallery! Thank you so much!

    Yogie

  14. Marc says:

    Hallo,

    ich schreib mal in deutsch, weil ich glaub das ich da einem Deutschen schreibe.

    Ich habe einen Vorschlag für die Themes in der Gallery.

    und zwar:

    Prüfe das vorhanden sein einer gallery.php im nggallery Ordner des entsprechenden Themes und verwende, wenn vorhanden generell diese. Nur, wenn Template mit im Gallery Aufruf übergeben wird, dann das besondere Template. Wenn keins von beiden vorhanden ist dann die gallery.php im Plugin Ordner.

    Ich hoffe, ich hab das verständlich ausgedrückt.

    Das würde mir beim Styling helfen, da ich den floar:clear schon in meinem WP Template durch den Yaml Framework verwende und das zu unschönen Ausgaben führt.

    Ich hoff ich bin für den Vorschlag nicht zu spät dran.

  15. alex.rabe says:

    Das ganze funktioniert genau so wie du es gefordert hast

  16. gilli says:

    hi hab nicht ganz soviel ahnung von php würde das Plugin mit den verschiedenen ich nenns mal Rahmen sehr gerne nutzen! besteht vieleicht die möglickeit das jemand mal eine einfach verständliche möglichst duetsche anleitung schreibt wie ich zu dem ganzen komme habs selbst versucht und bin gescheiter (Rendering of template gallery-sample3.php failed) was natürlich super währe wenn irgendjemand ein paar files zusammenpacken könnte die man einfach nurnoch in die ordner laden muss.

    lg der hilflose ^^

  17. Marc says:

    Erst mal muss ich loswerden, dass NextGEN Gallery, wie auch Wordtube, ein echt starkes Plugin ist!! Danke dafür und auch danke, dass du deine Zeit dafür aufopferst!
    Entschuldige, wenn mein Kommentar als Forderung angekommen ist. Als solche war er nicht gedacht. Ich dachte nur, dass ich evtl. eine Idee anbringen könnte. Dass die bereits integriert ist, konnte ich aus deinem Blogeintrag leider nicht herauslesen, freut mich aber umso mehr.
    Ich hab in meiner lokalen Sandbox bereits gute erzielt. Wegen des Yaml Frameworks, den ich verwende, muss ich vor der Gallery Ausgabe noch ein und am Ende das schließende einfügen. Bei der Slideshow haut das nicht ganz hin, wird es für die auch ein Template geben, oder bleibt mir da nix anders übrig, als den Quellcode deines Plugins für mich anzupassen?

    Gruß Marc

  18. eivind says:

    I get error 404, page not found when wanting to download your plugin from wordpress 😦

  19. Vincent says:

    Hi Alex,

    Your plugin is absolutely fabulous, i´m working on a new WP theme for a friend and I can´t really get the caption under the single pic. I have some shortcommings on my programming 😛

    However, i have been looking around and I can’t find the solution to how to add a caption to a single pic in a post or page. The information here, give me the info how to add it to a gallery, but I would like to add it to a singlepic.

    I hope you can give a code sample for the singlepic.php file too.

    (sorry, i know my way in css, not in php :$)

    Keep up the great work 😀

  20. Mattias says:

    I think this is a great change, only missing one thing to make this really logical.

    Let’s say I’m using my own template for the album view (album-eyesx.php), then it would make more sense if NextGEN checks if a corresponding template for the gallery view is available, as I created one of those too (gallery-eyesx.php). As is now I can’t see a simple way to call on that template from my album template, or is there?

  21. jonhoor says:

    There is a problem, if I create this page with this template:
    [nggallery id=1 template=sample1]

    If I enable the imagebrowser open when I clicked the image, it will go to imagebrowser.php.

    Now, how to make the image in above page when clicked is open to imagebrowser-sample1.php?

  22. doppelboxx says:

    I was faced with the same problem and my solution is to pass the name of my template in the URL:
    <a href=”imageURL.”&template=sample”

    I then had to edit the nggfunctions.php and check if the GET-variable ‘template’ is set:
    if ( isset ( $_GET[‘template’] ))
    $template = $_GET[‘template’];

    You have to add this to all the nggCreateXX functions!

  23. steve says:

    not sure I understand your documentation. On your blog you give an example for thumbnails which I really liked; sample5.php. I’ve looked everywhere in your files and cannot find this file. I see above you have the code for sample3.php. Did you post the others or an explanation as to what exactly has to be replaced? Where is the call to the .css sheet in gallery.php?

    I’m also confused as to if it’s possible to iplement either the Flash lightbox effect or indeed another called fancybox which I recently found, but is equally confusing in its documentation.

    Any advice would be very much appreciated.

  24. Alter says:

    Please hepl me, i want make my nextgen gallery look like http://nextgen.boelinger.com/templates/example-5/
    but i didn’t make template a long time, try and try… without any results. may i ask you for some example to http://nextgen.boelinger.com/templates/example-5/ ?

  25. Muy bien hecho.
    Thanks, very well..

  26. Harry says:

    As with Alter, I’m also confused by the lack of documentation on this. Do I need to create a sample5.php? What changes to the gallery.php would I need to make to emulate that look? You make it sound like all we need to do is add [ nggallery id=x template=sample5 ] but that’s not the case.

  27. Melissa Snyder says:

    I’m in the same boat – on the sample page you say
    “I added six example of templates based on the fantastic gallery examples from Web Designer Wall. Look into the sub-pages for some demonstration.”

    But are the actual php templates files available anywhere? This would be a very valuable addition to the package, as so many of us seem to be having trouble with this feature.

  28. Is there a download for this so we can just drop it into our theme folders?

    What I did was created a nggallery folder as specified then created the seperate php files as specified, but is the CSS to be in its own file or embedded in the php file? If it’s suppose to be it’s own what name to give it? Do we add the images folder into the nggallery folder? I’ve tried both with no luck. No idea where i am going wrong.

    I think a download with the whole folder for everyone to just drop into their theme folder their using would be a great solution to all of the issues were having trying to fill in all the blank spaces.

  29. alex.rabe says:

    @Jeremy

    Theme authors should add a folder “nggallery” and copy the php files from the plugin folder “view” into this folder. Then you can create theme a related layout.

    Additional you should add a css file called “nggallery.css” to your theme root folder, this should contain your theme style.

  30. It still is not working for me.

    I put all the php files from the view folder into the nggallery folder under this structure ThemeFOLDER>nggallery> I didn’t put the view folder itself in, just the files as you specified. I then created the gallery-sample1.php file and placed that into the nggallery folder with the view php files ThemeFOLDER>nggallery>

    Then I created a nggallery.css file and placed it in the root theme folder. It didn’t work, but it threw my gallery out wack…style wise, but didn’t do what it was suppose to do. I’ve followed your instructions and still no luck.

  31. Cornelius says:

    I really like NextGen Gallery plug-in. I’ve got a few questions that I hope someone out there can answer for me.

    1 – I use the [nggallery id=x] line in my post between writing and that works great, it loads the thumbnails, but if I have more than 20 photos in a gallery it makes a new “page or list” for the next 20 photos. When one click on the number 2 to go to the next “page or list” of photos it refreshes the entire page and one has to scroll from the top to get to the displayed gallery. How can I solve this effect. Here is a page where this effect takes place http://www.eye2lens.info/?p=263

    2 – After entering some tag to the photo I tried to find them with google by using all the tags entered for a photo, but could not see the photo in the google image search. I also tried adding descriptions and doing a search for that, but with the same result. What is the function of the “tags” and how can I get google to pick up the “tags” or “descriptions”

    3 – If I put a couple of galleries on one page and click on the next “page or list” of short cuts then all the galleries move to the next “page or list”. How can I get it to only update the gallery I click on? On this page http://www.eye2lens.info/?page_id=122 I thought of having a running gallery up load. If there is a more elegant manner to do this in please let me know.

    Thanks for your answers in advance.

  32. dj_aida says:

    Hi there, I’ve been looking for a better way to manage my photos and it seems I’ve found it. I really liked the templates you’ve shown us, but I have no clue about php. I followed the instructions to the letter, but still no luck.

    My question: are we also supposed to upload our actual photos into the nggallery folder, along with the photos for the templates?

    I hope you will find the time to answer. Thanks in advance!

  33. Radu Rizea says:

    I also posted on the official wp support page, but there is no answer. My question is how can I edit the number of images shown per page from a gallery-template.php, as to override the settings in the plugin’s Options?

  34. Mandy says:

    I followed instructions extremely carefully because they aren’t of the hand-holding type. The only thing that didn’t work on first try was when I copied the code on this page, it missed the class=”sample3″ buried on the right side of the code box. Click on View Source and copy it that way into the new gallery-sample1.php file.

    I agree about having all templates available in next version. Would be LOVELY, although I think with some blood, sweat and tears I’ll be able to do it. Maybe a lot of tears.

  35. brady says:

    I have followed the steps and read all the posts on this list and I am getting this :Rendering of template gallery-customGal1.php failed,
    no images any help would be great….I have made a new “custom php” file and a css file, and I have made a folder called nggallery with all the php files in it

  36. FalconX says:

    I have posted in the official WP forum about this, but I got no answer how this should work. Sad…

  37. arlene says:

    HI Alex,

    I have just started using your NEXTgen plugin along with word press and wp-paypal-simple-cart.

    I am having some issues and I found another person with a similar issue. The posted resolution can be found in this comment http://alexrabe.de/2008/11/25/new-in-version-100-templates/#comment-19136. My issue is that I don’t code much and I am unsure if this solution will work and if it does, I am unsure how to implement it.

    Could you provide any help or further instructions or recommendations?

    Arlene

  38. Claudio says:

    Hi! thanks for your tip, looks greate!. I have a question and I’m wondering if you can help me with that. I’m trying to implement this http://www.webdesignerwall.com/demo/decorative-gallery/1b_mini-icons.html in my wordpress site with nextgen gallery. I need to use 3 different icons for 3 different ngg TAGS. I really don’t know how to do it, I’ve been trying but it doesn’t work. I was thinking in using 3 different template styles for each icon, but I don’t know how to asign them to images. I really don’t know php or codex. I’m using WordPress 2.9.2 and NextGen 1.5.5. Thanks for any help.

  39. Michael says:

    Sehr sehr cool, das macht die Gallery sehr flexibel! Auch wenns schon zwei Jahre alt ist das Update 😀 Habe es nicht auf anhieb gefunden…

  40. Joff says:

    Thank you Alex, this works great! Could you add a link to this post into your FAQ? It took me a while to realise you could override the default templates!

  41. Pavlos says:

    Hello Alex and thanks a lot for this great plugin.

    I’m facing the same problem with Rajesh Narayanan posted on 2008 with a template i created.

    I just created a border for the gallery thumbs and it works fine on the first page, but if i click to navigate to the next page, the border is not visible any more.

    Can you help me on this?

    Thanks in advance

    Pavlos

  42. ardyonline says:

    cheers! love your codes.. I was enlighten now with codes! thanks!

  43. mike says:

    Hi Alex,
    gallery-mytpl.php doesnt work if the call is an Album. Think its the problem what Mattias describes in #comment-18904.

    My call is on a page:
    [album id=6 template=mytpl] that works (a little bit*)
    If i click on frontpage in _this_ Album on a Thumbnail it shows the gallery.php of your Core, not mine in template.
    Any Hints for that?

    * Another Problem: the Output on Album sorts per id (or date or whatever), for example:
    My call is on a page:
    [album id=6 template=mytpl]
    [album id=5 template=mytpl]
    The Frontend shows 5 as first.

    Thx!

  44. mike says:

    little correction for the “another problem”: dunno, what the problem was, testet one hour and now found wrong call…

  45. Joern says:

    Hi there.

    If i click on in an Album on a Thumbnail for a gallery it shows the gallery.php of your Core, not the one i defined as a template…

    How to avoid this behavior ?

Comments are closed.

%d bloggers like this: