Uncharted Design
«
»

Integrating Galleria with Wordpress

This is a simple way to get this working, but in all my googling I didn’t come across a write-up. Here is how I got the beautiful jQuery Galleria to replace the default WordPress gallery. This is my ideal solution, and I am actively using it as a Photography CMS for a client’s portfolio.

Download Galleria and upload it to your server, under your theme’s directory.

Call jQuery and then Galleria into your theme’s header.php (order matters, and if you already have a plugin calling jQuery you may need to do some tweaking, check your firebug console if things break):

<script src="/galleria/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/galleria/galleria-1.2.3.min.js" type="text/javascript"></script>

When putting a gallery into your post or page, flip to the HTML editor and change the shortcode to:

[gallery link="file" itemtag="div" icontag="span" captiontag="p"]

For more on the WordPress Gallery, see the codex.

Now in the footer, just before </body>:

<script type="text/javascript">
if (Galleria.IE6 != true) {
// If they're running ie6, don't even both. Otherwise, load theme
Galleria.loadTheme('<?php bloginfo('theme_url'); ?>/galleria/themes/classic/galleria.classic.js');
$('.gallery').galleria({ //These options are personal preference, see Galleria documentation
image_crop: 'height',
transition: 'fade',
thumb_crop: false,
transition_speed: 500,
data_config: function(img) {
// will extract and return image captions from the wordpress gallery source:
return  {
title: $(img).parent().next('strong').html(),
description: $(img).parent().parent().next('p').html()
};
}
});
}

</script>

You also might enjoy…

Tags: , ,

This entry was posted on Tuesday, September 7th, 2010 at 2:27 pm and is filed under Coding, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • New solution found much more easier to setup search for the plugin galleria galleria 0.3a by Sam Margulies.
  • Kailas
    Thanks for point to Sam's work. I saw that before. Great job. 



    https://github.com/samargulies...



    Now I am a bit of a WordPress novice... where it the content that is
    called by [gallery] inside wordPress stored? can we point to content
    outside the database?  i.e. some folder in some other location with
    photos and captions?


  • Hello Im trying to add galleria folio to my wordpress site and I have followed this tutorial word by word however I dont see any changes whatsoever I have changed the corresponding names so it points to folio instead of classic however im confused what u mean by "in the footer just before < /body > " do you mean in footer.php or somewhere else another question where in the my header.php file do I add the jQuery + galleria call is it before < /head > and therefore should I add < head > before I add the call code?

    http://deepfovea.com/gallery/
  • graphicagenda
    Edit; I had trouble adding the functions as a comment
  • kailasnatha
    But  I would like to include the content right in the post itself (see below and hook to folders elsewhere on the server, by passing WP CMS entirely (for the images and captions) so in the post we want to have:


    <div id="gallery">

        
    <img alt="A marvelous view (caption 1)" src="/slideshows/aadheenam/2011/mayuran-namakarana/images/DSC_0266.jpg">
    <img alt=" Another caption 2" src="/slideshows/aadheenam/2011/mayuran-namakarana/images/DSC_0268.jpg">
    <img src="/slideshows/aadheenam/2011/mayuran-namakarana/images/DSC_0269.jpg"  ="">

    [snip... more images here]
    </div>

    But I'm unable to get this to work...
  • What about wp enque script?
  • Hi Cliff, you could certainly use that method. Personally I haven't needed
    to use it. For others who might be interested:
    "wp_enqeue_script will include the script if it hasn't already been
    included, and load the one that WordPress ships."
    http://codex.wordpress.org/Fun...
  • nlucero
    I was trying to get the Galleria plug-in for WordPress to work with no luck and a lot of frustration. Your method worked very well! I didn't get it to work at first, but with the information you provided I was at least able to get it working in a short amount of time.

    Thanks to you I have a good understanding on how Galleria works and how to customize it. Thank you!
  • vale
    Thanks for this chunk.
    Do you also know how to let WP generate a JSon array of data for Galleria.js starting from the gallery short-code?
  • I haven't gotten into it, but this should get you pointed in the right
    direction: http://wpengineer.com/1802/a-s...
    Basically you change the gallery function to output the data differently. In
    that post they do standard img tags and divs, but you could instead output a
    json array.
  • Mike Goodstadt
    OK now I got it working.. watch out for those option commas (or lack there of on the final one)! ;-)
  • Mike Goodstadt
    Thanks for getting this out there...
    A correction (I think :s) :

    Galleria.loadTheme('/galleria/themes/classic/galleria.classic.js');

    should be:
    Galleria.loadTheme('/galleria/themes/classic/galleria.classic.js');



    howerver even with this I cannot get it to work :-(

    sometimes I think it is the cache...
    any suggestions?
    Mike
  • kailasa
    What I would really like to do is be able to insert a Galleria slide show into word press where the content is out side word press and I already have the html written for a Galleria slideshow.

    e.g.

    http://www.himalayanacademy.co...

    is a cgi driven slide show... if I could take the generated content of the <div id="stage-wrapper"> with all the pre-written html already done:

    <img alt=" What a fun day to take pictures as every where were beautiful little beings, full of expression, excitement of life and dressed to be seen! " src="/slideshows/mauritius/2009/mauritius_2009-12-25_pancha-ganapati/MUR-PanchaGanapati-09_DSC_0009.jpg" title="">

    <img alt="And what a success for Mauritius as a healthy crowed on a work day gathered at thel Park." src="/slideshows/mauritius/2009/mauritius_2009-12-25_pancha-ganapati/MUR-PanchaGanapati-09_DSC_0011.jpg" title="">

    etc...

    then I would not be "shackled" to having the content having to be loaded via WP Gallery input GUI.....
    </div>
  • This is a bit off topic, but here's what I would do. Create a new template for just this page, and just after the content throw this in:
    <?php
    $includeFile = file_get_contents('http://www.himalayanacademy.co...
    echo $includeFile;
    ?>
  • kailasnatha
    Hmm interesting. simple include....but how could you implement this in a blog post? straight PHP like that in a blog post is forbidden, I believe (for good reasons!)
  • Taschmahal
    Doesn't work somehow. Maybe because of the newer version? The newest is 1.2.3 and they changed a lot since then.

    I corrected the links, but still doesn't work. I just see the normal gallery.
  • Hey, I've updated this guide for the newest version. I didn't have to change much except the url for the theme. If you still run into problems, try the firefox plugin Firebug and check the javascript console.
  • graphicagenda
    Thank you. I got this working. The only exception, I used hooks, to easily add footer scripts. I also initialized the jQuery by setting width and height in the plugin footer.
  • Would you mind posting your code? I think it would be helpful. Thanks.
  • graphicagenda

    inside your theme functions - 3 essential hooks to get your code in the right place + //Commented

    add_action('wp_print_styles', 'load_galleria_stylesheet'); //The Galleria Stylesheet that is inside the package needs to be loaded on your page

    add_action('wp_print_scripts', 'print_galleria_scripts'); //Enqueue scripts inside this function

    add_action('wp_print_footer_scripts', 'print_footer_galleria_scripts'); //The Footer Script in this post inside a function, while also adding width & height params.

    //do_action is great if you'd like to make this more dynamic and pass two variables for height, width (untested)
  • Abbey
    I have followed this exactly, but there is no evidence that Galleria has been activated on my post. I then realized that the directories to the java scripts were different, so I changed those in the header.php and footer.php, but still nothing. Do you know what I might be doing wrong?
    My sample blog page is http://christo.irc.umbc.edu/wh...
    I would like for those for pictures shown to utilize the Galleria interface.
  • I'm unclear of what you mean when you say "change the shortcode to..." Is it the whole code chunk with the CSS margins and such, or are those two images supposed to represent something?
  • Apologies, the shortcode rendered itself. It should be [gallery link="file" itemtag="div" icontag="span" captiontag="p"]
  • Thanks for that. Isn't this something that could be done automatically with a function? I believe that's one of the things the plugin was doing.
blog comments powered by Disqus