Comments on: Easy to update thumbnail gallery using Textpattern and Galleriffic

By: Vineet

Vineet — Fri, 26 Aug 2011 18:57:30 +0000

Hey Marie, thank you very much for this post, it has really helped me a lot.
I am new to textpattern but has already started loving it more than any other CMS cause of txp’s flexibility which allows me to work my way, allowing me to make my own designs rather than making my buy templates!
thanks again for the tutorial! :)

By: Nicholas Chen

Nicholas Chen — Wed, 17 Aug 2011 17:28:43 +0000

I don’t know if your still replying to questions but I can’t get the larger image on the right to display. the thumbnails show up but that’s it. i check over the instructions and am pretty sure i followed everything exactly. can you have a look and give me some advice?

http://www.dhs-wine.com/textpattern/wine-promotions

By: Vineet

Vineet — Wed, 27 Jul 2011 18:58:23 +0000

Hey,
thanks for this tutorial, it was very helpful.
I’d like to know, how to use this tutorial for multiple categories on the same page.
And what happens if I make more than one galleries, e.g., say, gallery1,gallery2,..etc
and post them on the same page?
Thanks for the help. :)

By: Marie

Marie — Mon, 24 Jan 2011 20:01:23 +0000

Hi Terry,

looks like you’ve already implemented another gallery..?

By: Terry

Terry — Tue, 21 Dec 2010 11:15:55 +0000

Hi there, this is a fantastic tutorial however I am having some trouble getting the gallery to work. It seems my page loads fine apart from the gallery. Looking at the HTML, the head loads fine (”Thumbnail Gallery”) but it doesn’t load the image thumbnails or larger image divs at all. Could you please help me out? It is a rather urgent project. Link to site is http://www.accobra.co.nz/gallery Thanks!

By: sara

sara — Mon, 09 Aug 2010 01:48:07 +0000

Thanks for this tutorial, it’s straightforward and easy to use – as a Textpattern beginner, I struggle to understand some of the plugins, etc and it’s great to have a straightforward tutorial to work from.

I’m wondering if it would be possible to just pull all the images from an image category instead of designating the article image number?

By: Stephen

Stephen — Thu, 15 Jul 2010 21:37:53 +0000

For anyone using this and adding lots of pictures, just to add another tweak

When I got to about 65 images the whole set up stalled and wouldn’t load any more images

Arrrggghhhh, but then….

With help over at the Textpattern Forum it was identified that the Images box where the image numbers are entered had a 255 character limit

Assuming commas are characters…

1-9=18

10-89=237

18+237=255

So if numbers are consecutive the maximum number of images using this method without altering the VARCHAR is 89

I changed the VARCHAR in the database (don’t ask me, I’d never been in there before…..but I found it) to 500 or so and it worked fine

However in the end I simply set up linked gallery pages with 6 times 10 images in each – this makes the list of numbers more manageable

Take care

Stephen

By: marie poulin

marie poulin — Wed, 07 Jul 2010 06:11:58 +0000

Hey,
it would be helpful if you could post a link, but usually that is a sign that your jquery script has not been linked properly.
Check your url, see if the file is calling where you are telling it to call.
Send me a link, i’ll take a look!

By: Stephen

Stephen — Wed, 07 Jul 2010 01:19:44 +0000

Yes that was a stage I got to, with the images loading in a new window

I ‘think’ that was when Marie noticed this

It also looks like your page is not properly linked to the javascript files. for example, you are linking to “/files/jquery.galleriffic.js/” where you should be linking to “mobilizingmouse/files/jquery.gallerific.js/” for both files…

Look at this perhaps

Can you post a link to the page?

Stephen

By: Jayme

Jayme — Tue, 06 Jul 2010 22:03:15 +0000

This is a great, easy to follow tutorial, but I can’t get everything to work properly. I am able to load thumbnails and the javascript opacity hovers are working fine, but the large image doesn’t appear on the right side. If I click a thumbnail it loads the full-sized image in a new page. I’ve copied everything exact, all javascript files are loading and the code is identical to this tutorial and Stephen’s working online example. Any ideas?

By: Stephen

Stephen — Sun, 20 Jun 2010 17:30:32 +0000

Just to finish this thread off for anyone else who is trying to reproduce this gallery

With Marie’s help, here and behind the scenes, it’s all up and running just fine

http://www.mobilizingmouse.com/mobilizingmouse/gallery/

Now I’m just working on optimizing the file size vs quality for each picture

The steps polishing the code were simple and annoyingly small – missing a ‘/’ in the code as mentioned above for example

In creating this section it also improved my understanding of Textpattern

(It’s really quite a lot like SSI at its core)

Thanks again Marie for the inspiring tutorial

Stephen

By: marie poulin

marie poulin — Mon, 14 Jun 2010 23:48:22 +0000

It also looks like your page is not properly linked to the javascript files. for example, you are linking to “/files/jquery.galleriffic.js” where you should be linking to “mobilizingmouse/files/jquery.gallerific.js” for both files…

By: marie poulin

marie poulin — Mon, 14 Jun 2010 23:46:27 +0000

Hi Stephen,

Looking at your source code, I can see the error is in your article_image form, so it is not calling the thumbnails properly. Why don’t you email me directly and I can take a look? hello@mariepoulin.com

By: Stephen

Stephen — Mon, 14 Jun 2010 22:02:37 +0000

Thanks so much for the speedy and full response

I’ve gone for the untouched recreation of your example to see if I can set it up before I get creative with the CSS etc

I’ve tried this from scratch three times now and this is what I’m getting here:

http://www.mobilizingmouse.com/mobilizingmouse/gallery/

{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 {\fonttbl\f0\fswiss\fcharset0 Helvetica;} {\colortbl;\red255\green255\blue255;} \margl1440\margr1440\vieww9000\viewh8400\viewkind0 \pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\ql\qnatural\pardirnatural \f0\fs24 \cf0 \ }

So since this is code being displayed is this an error in the ‘article_image_form’ or ‘gallery’ forms?

*** *** ***

Further digging about seems to suggest the error in in the syntax of the gallery file

Here’s a screenshot of the section as diagnosed with HyperEdit

http://www.mobilizingmouse.com/images/errors.jpg

This means I think that the scripts are not running and the images are not loading

I did validate the css after adding an escape at the end (*/)here

div.navigation {

/* The navigation style is set by a
javascript generated style on the page.
This is so that the javascript specific styles won’t be applied unless javascript is enabled. */}

Thanks for when you have a minute to look!

take care

Stephen

By: marie poulin

marie poulin — Fri, 11 Jun 2010 19:34:09 +0000

@Stephen

I can email you my ebl-image-edit? Keep in mind that plugin is not essential for this tutorial to work. you can still use textpattern to create a basic cropped thumbnail, or you can upload a thumbnail separately from the image.

As for the css- its really up to you. If you have a stylesheet that is already in place, just copy the relevant css from the gallery into your own stylesheet.
Alternately, as you said, you could have the gallery page call that css file.

I tend to stick to one css file, so I just move the relevant gallery-specific css into your existing css. (all the relevant gallery stuff is all grouped together, and should be pretty straightforward)… let me know if you have any trouble or need more clarification. (you can email me directly)
Cheers!