smd_gallery: super-flexible gallery generator

spgriffee · 2008-10-29 09:14:44

Stef,

Bloke wrote:

May I ask what your primary aim is of wanting each image to have its own URL? Is it so the URL can be e-mailed in a more human friendly (or direct linked) nature?

That is correct. I would like each image to have its own URL so that a direct link to the image along with its associated information is possible. Also, I want this URL to be visible and accessible without the use of JavaScript.

Just as another mod_rewrite aside, instead of having a section for each story, what if you were to put all the ‘stories’ in a section and have one ‘index’ article for the name of the story (e.g. site.com/stories/lp, site.com/stories/felb, etc). On each story article you have an smd_gallery call that generates the thumbnails based on the name of the article (attribute category="?title"). Your smd_gallery form/container is a modification to the idea in my post above that formats the image URL links like this:

site.com/stories/lp/name-of-pic-goes-here

mod_rewrite steps in the way and (behind the scenes) changes any URL in the ‘stories’ section to:

site.com/stories/lp/?pic=name-of-image-goes-here

In your article you employ the smd_if plugin to detect if the pic urlvar has been supplied and if it has, display the relevant picture/caption instead (perhaps use upm_image for this?), then the smd_gallery as usual to show the thumbs below it.

This sounds very interesting. Let me see if I have it right:

1) With each image category I create and upload images to, I also create an article with the same name as the category which serves as the thumbnail index (let me call this ‘story-name’ for now). All these articles are set to a Stories section.
2) When a visitor goes to site.com/stories/story-name and clicks on a thumbnail, a mod_rewrite rule adds the pic variable to the clicked link.
3) In the article itself or in an article form which controls the display of this article, the presence of the pic URL variable in each thumbnail link is tested using the smd_if plugin, and if it is present, when the link is clicked the visitor is taken to site.com/stories/story-name/?pic=name-of-image which is a permanent URL for the particular image which is shown in the page with its caption and title without the use of JavaScript to generate the HTML.
4) The visitor can click on the image itself to be taken back to the index page, or on next and previous links to go to the next or previous image in the series, and maybe even have paging functionality so they can go to the 2nd page, last page, and so on.

I realize that #4 above may add to the trickyness, but overall I think this could work. A couple of things I’d want to think about would be:

A) Breaking other parts of the site with the .htaccess mod_rewrite rule, though I might by able to figure this out. Do you have any tips on how to write the rule itself?
B) Performance hit. Any idea how much slower would the site be with all the smd_gallery and mod_rewrite stuff going on in the background?

Does that give you any further ideas or is it still too complicated to manage?

It does give me more ideas and I’m going to try and see! Thank you Stef!!

mlarino · 2008-10-31 01:49:56

man, this plugin is complicated, or at least I can figure it out…

I am trying to create a gallery of all the thumbnails in category “galeria” to be shown in a section.
But any smd tag I use just renders every full size image in that category.

I am trying to make those thumbanils link to the full size image using lightbox.
anyone can help?
thanks!

Bloke · 2008-10-31 14:23:36

mlarino wrote:

man, this plugin is complicated, or at least I can figure it out…

I don’t do things by half :-)

But any smd tag I use just renders every full size image in that category.

OK, this is probably (I’m guessing) because you’re not using the plugin as a container or with the form attribute. Without those, it drops into a “default” mode which displays every full size image from the given category.

The 2nd half of Example 1 in the plugin help is what you need to do. I’m not sure which lightbox effect you are using (let’s assume the original lightbox):

<head>
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>
  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

Then add your gallery tag to a form, or somewhere in your default article for the desired section:

<txp:smd_gallery category="galleria">
<a rel="lightbox" href="{url}" alt="{alt}"
     title="A picture of {title}">
  <txp:thumbnail id="{id}" />
</a>
</txp:smd_gallery>

(sorry, ignore the width and height attributes on the anchor in Example 1: I still haven’t fixed that in the documentation)

That renders an anchor tag for every image in the galleria category, sets it to use lightbox to display, and inside each anchor puts the relevant thumbnail. Then you use CSS to style it all and lay it out, float it, however you wish.

Does that get you started? Give me a shout if you need any more info.

Bloke · 2008-10-31 15:04:35

spgriffee wrote:

This sounds very interesting. Let me see if I have it right: <snip>

Yes, you have it right :-)

The crucial parts are:

the mod_rewrite adds the ?pic variable internally (behind the scenes) leaving the browser URL bar untouched, showing a nice, shiny permlink-looking URL to visitors. All javascript-free
Your story-name article (or attached form thereof) does all the hard work decoding the hidden ?pic=whatever bit, fetching the image and displaying it
The next/prev, as you say, might be tricky. I’ve not thought it through because I don’t think there are tags that allow you to natively grab the next/prev image. However, through judicial use of the paging and limit="1" attributes, you might be able to coax smd_gallery into working out which image is next in line.

If the next/prev doesn’t work you might have to resort to some trickery. Off the top of my head we might be able to fashion some SQL query to get what you want (either directly in PHP or via smd_query?) or use some more plugins (e.g. wet_for_each_image or smd_each) to iterate over a dynamically-generated list of all images in the category until it finds the current pic; at that point it renders a link to the image either side. There’s probably a far better way of doing it than using smd_each; that’s like using a blunderbuss to win a round of golf: it’ll work if you point it at the opposition and shoot, but won’t win you any style points or reduce your handicap.

Breaking other parts of the site with the .htaccess mod_rewrite rule

The rule itself can target a specific section (which is why I suggested putting all this gubbins in its own section), thus not impacting anything else much… it will take a fraction of a second longer to read and process the rule, and decide whether to take action or not, but apache can comfortably handle it.

Do you have any tips on how to write the rule itself?

Not without trying it, sorry. I’m no mod_rewrite guru but something along these lines might be a starting point:

RewriteRule /stories/(.*)/(.*) /stories/$1/?pic=$2

So in theory, any article in the stories section that has two parts after it separated by a slash is changed to point at the given story-name ($1: the first part) and has the 2nd part added as a URL variable. If you Google for mod_rewrite tutorials there’s usually an example that exactly matches the type of thing you’re trying to do which you can copy ‘n’ paste!

Performance hit.

The rewrite itself fires for every page request and thus takes a (tiny) fraction longer to determine whether to act on the page or not. But TXP is doing that anyway for every page so you’re unlikely to notice.

Every extra tag that does SQL stuff (and every client-side plugin) adds a performance hit so you will want to minimise the number of tags on your page, as normal when worrying about render speeds. Again, there are so many other tags that just one more won’t make much difference. You’ll only be calling one smd_gallery per page — one in the ‘true, I have found a ?pic variable’ case, or one in the ‘else’ part — and the good news about smd_if (despite its ugliness) is that all its processing is done after any SQL calls so it does not go back to the database for anything. For a simple one-var check you’d be hard pushed to be able to click the stopwatch accurately enough to detect the extra time it takes to check the existence of the variable. I think your site is safe ;-)

If you want any further clarification or ideas, feel free to post what you have working (or not…) and either me or someone with greater brain capacity will endeavour to help you out.

Bloke · 2008-10-31 15:15:11

curiouz wrote:

but comma’s don’t work in combo’s.

Have you tried setting delim to something other than comma; like delim="::" or delim="_,_"? It’ll mean going back to your smd_gallery tag and changing any comma-delimited options to something else but it might allow that deliciously complicated combo to be parsed correctly ;-)

If that doesn’t work, shout back and I’ll look into it deeper to try and replicate what you’re doing on my test site.

Last edited by Bloke (2008-10-31 15:16:46)

mlarino · 2008-10-31 15:59:01

Man! thanks!
Worked perfect!!
Great job with this plugin!

spgriffee · 2008-11-02 10:09:19

“There’s probably a far better way of doing it than using smd_each; that’s like using a blunderbuss to win a round of golf: it’ll work if you point it at the opposition and shoot, but won’t win you any style points or reduce your handicap.”

Laughing!

Thanks for your detailed and entertaining response, Stef!
I’m going to take a crack at this (doing my best to avoid blunderbusses) and will report here soonest.

Cheers!

progre55 · 2008-11-05 22:21:43

Bloke:

Hope all is well.

Not sure if it is out there (ok I am sure but have not found it) and I have tried several solutions with non really doing the trick in a clean manner. I want to take your plug in and integrate it into an automatic slideshow. Unlike slimbox (which I use on alot of my projects), I want the slideshow to run automatically.

Any and all insight you or the rest of the group may have would be appreciated.

progre55

Last edited by progre55 (2008-11-05 22:22:01)

Bloke · 2008-11-05 22:30:08

progre55 wrote:

I want to take your plug in and integrate it into an automatic slideshow…. to run automatically.

Have you looked at using jQuery Cycle? I’ve used it successfully with smd_gallery on a few projects. If you just want the fadey effect, there’s cycle lite which is much easier to get going.

progre55 · 2008-11-06 13:20:48

Bloke:

Thanks for the quick reply. I guess I was hoping for something more along the lines of what HP has on their website where you have some controls, as well as the capability to jump around.

progre55

Bloke · 2008-11-06 13:52:22

progre55 wrote:

I was hoping for something more along the lines of what HP has on their website where you have some controls, as well as the capability to jump around.

Well if you find out which tool they have used (assuming it’s a third party one and not custom built) you can download it and integrate it. Or steal that one off their site! It’s only divs, js, an image map and some css. smd_gallery will most likely work, with a bit of ingenuity!

First task is to pick the tool/effect you want to use, then asses how easy it is to make smd_gallery get the graphics into it.

progre55 · 2008-11-06 14:02:52

Bloke:

I will do some digging and maybe with the some of your expert assistance I can get it moving in the right direction. To be continued …..

progre55

Textpattern CMS

Textpattern CMS support forum

#253 2008-10-29 09:14:44

Re: smd_gallery: super-flexible gallery generator

#254 2008-10-31 01:49:56

Re: smd_gallery: super-flexible gallery generator

#255 2008-10-31 14:23:36

Re: smd_gallery: super-flexible gallery generator

#256 2008-10-31 15:04:35

Re: smd_gallery: super-flexible gallery generator

#257 2008-10-31 15:15:11

Re: smd_gallery: super-flexible gallery generator

#258 2008-10-31 15:59:01

Re: smd_gallery: super-flexible gallery generator

#259 2008-11-02 10:09:19

Re: smd_gallery: super-flexible gallery generator

#260 2008-11-05 22:21:43

Re: smd_gallery: super-flexible gallery generator

#261 2008-11-05 22:30:08

Re: smd_gallery: super-flexible gallery generator

#262 2008-11-06 13:20:48

Re: smd_gallery: super-flexible gallery generator

#263 2008-11-06 13:52:22

Re: smd_gallery: super-flexible gallery generator

#264 2008-11-06 14:02:52

Re: smd_gallery: super-flexible gallery generator

Board footer