smd_gallery: super-flexible gallery generator

Bloke · 2010-11-24 09:53:40

Marek Zelenka wrote:

After I`ll choice the thumb image I want to first show the original thumb with description and then click and show the full image size.

If you are using TXP 4.3.0 you can probably do this with the new built-in image tags. For examples and inspiration, see Jeff’s excellent gallery demo.

But if you really want to do it in smd_gallery then you have a few options depending if you want to refresh the page or not when you click a thumb.

Page refresh method

Something along these lines will get you going. Essentially you are passing the image id of the clicked image to the same page, letting the adi_gps plugin extract the image ID for you and then ask smd_gallery to display it along with the relevant author / caption info:

<txp:adi_gps />
<!-- Display the list of thumbs -->
<txp:smd_gallery category="some-cat" wraptag="p" class="thumblist">
   <a href="?img_id={id}"><txp:thumbnail id="{id}" /></a>
</txp:smd_gallery>
<txp:if_variable name="img_id">
   <!-- We have been given an image ID so show it -->
   <txp:smd_gallery id="?img_id">
      <a href="{url}"><txp:thumbnail id="{id}" /></a>
      <div id="obsah-dilo-nav">
         <a href="{url}">Zoom this image</a>
         <a href="#">See all images by this artist</a>
         <div id="obsah-dilo-popis">
            <p>{author}</p>
            <h3>{alt}</h3>
            <p>{caption}</p>
         </div>
      </div>
   </txp:smd_gallery>
<txp:else />
<p>Click a thumbnail to view the image</p>
</txp:if_variable>

The downside to this is that TXP only natively allows two image sizes out of the box so the second thumb that displays will be the same size as the one in the thumbnail list. To get round this you can either generate your own <img> tag and force the sizes, allowing the browser to scale the thumbs (making the medium-size thumb larger or — preferably — the thumbnails in the list smaller). Alternatively, if you are running TXP 4.3.0 you can try the smd_thumbnail plugin which allows you to automatically create and maintain multiple image sizes.

Non-page refresh method

Requires javascript / jQuery to be loaded on your page so when you click an image thumbnail from the list it populates the target div with the relevant information. Example 3 in the plugin help will give you some ideas on how to achieve this.

Non-smd_gallery method

Use the built-in TXP (4.3.0) image tags and smd_thumbnail to offer the same thing, perhaps employing <txp:image_display /> or <txp:images />. Jeff’s examples will show you some tricks for doing this.

To display the full size image you can then employ a lightbox or popup a new window or extend the above methods further to display the full size image in a known location on the page.

Hope that gives you some ideas on the varying approaches. Let us know if you need any further help.

Last edited by Bloke (2010-11-24 09:56:11)

Marek Zelenka · 2010-11-24 22:21:55

Thank you, Stef!!

I like more the smd_gallery way!
Why I cannot use something like that? To make the thumbs smaller and set their limit?

^{<txp:smd_gallery thumblimit=“4” thumbsize=“100”>}

If I`d have to use smd_thumbnail does this mean I have to create the third thumb or I would generate the smaller one automaticaly writing its dimension in the code as the smd_slimbox does? And how should I do it? Use the form tag in the smd_gallery part?

And last question, how could I set the first image of the list will be automaticaly displayed with the category?
Sorry, this is my first matter with Texpattern. I do not understand to much what I do :-)

Thanks a lot!

Marek

claywso · 2010-12-15 17:08:10

I would greatly appreciate your help with this!

On an article_listing page, I’d like to have the article_image show as a thumbnail with a link to show other images in a lightbox

here’s what i’m trying. (without success)

<txp:if_different><h2><txp:category1 title="1" /></h2></txp:if_different>
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<txp:smd_gallery form="gallery" thumblimit="1" category='<txp:custom_field name="imagecat" />' id='<txp:article_image />' />

In this, I’m trying to force the image named as the article image as the thumbnail, and also have a customfield that maps to an image category that contains the other associated images.

Is this crazy? What am I missing?

Thanks again.

Bloke · 2010-12-15 19:33:25

claywso wrote:

I’m trying to force the image named as the article image as the thumbnail

There’s probably a better way to accomplish this but I haven’t got time to look into right now. You should be able to use the shortcut id="?article_image". Alternatively you can make use of a trick to get the raw data from the article_image field:

<txp:custom_field name="article_image" />

Naughty, but I think it still works. Either way I don’t know if it’ll do what you want. You may be lucky and the id will appear first in the list (I think it’s handled first in the code, can’t remember) but it may not. As a second clutching at straws, I’d be tempted to add sort="fixed" to see if you can make the id come out first. Stab in the dark. If not let me know and we’ll figure something out.

Last edited by Bloke (2010-12-15 19:34:09)

claywso · 2010-12-16 15:54:31

thanks! id=”?article_image” worked perfectly.

i’m having trouble with the overlay stuff working, though. I believe that I have the rel link correct, and have the images and scripts linked correctly. can you take a look here and let me know what I’m doing wrong?

here’s the site

thanks!
clay

http://testing.millhouse.com.s97621.gridserver.com/mill-house-pro

Dimitri · 2010-12-17 21:36:07

Hey brilliant Stef, I need a tiny help

Cant get it right. I am working with Shadowbox and displaying images from categories and everything is in working order.

I would like to find a way of displaying only 1 image per category on the page, then I click the image and it displays all the images from the category in the Shadowbox effect.

My code went like this

<txp:smd_gallery category="list" sublevel="1" onchange="category_title" onchangewraptag="h3" sort="asc" objectform="try" > {onchange:category_title} {object} </txp:smd_gallery>

My form
<a href="{url}" title="{category_title}" rel="shadowbox[gallery]"> <img class="img" src="<txp:site_url/>images/{thumbdef}" alt="{alt}" /></a>

Now if I include grouplimit="1" it is cool to show 1 image per category on the page but it also showing 1 image per category in the Shadowbox.

My parent category is called “list” and got 3 subcategories

Thank you

Bloke · 2010-12-17 22:37:52

claywso

thanks! id=”?article_image” worked perfectly.

Excellent stuff.

i’m having trouble with the overlay stuff

My best guess is that your js/scripts.js file is using code similar to that from the prettyPhoto documentation site, which is looking for DOM anchor elements with rel="prettyPhoto" in them. Yours have rel="lightbox-smd" so you either need to change your smd_gallery form to use prettyPhoto, or scripts.js to use lightbox-smd. Hope that helps.

Dimitri

I think you’ve fallen foul of the subtleties of the way {object} works. I’ll try and explain as best I can (I think the documentation might need to be improved here).

The {object} (i.e. your objectform) will only be executed if the thumblimit or grouplimit has not been reached. Look at your objectform and notice that you have the anchors in it, as well as the <img> tag. Thus, as soon as the plugin reaches your thumb/group limit it stops outputting anchors AND img tags to the page. Your lightbox will only look for anchors that are physically on the page so it’ll only display one image from each category.

What you really need to output on the page to achieve the effect you want is:

<a href="http://site.com/images/full_image1.jpg" rel="shadowbox[gallery]">
   <img class="img" src="http://site.com/images/thumb1.jpg" />
</a>
<a href="http://site.com/images/full_image2.jpg" rel="shadowbox[gallery]"></a>
<a href="http://site.com/images/full_image3.jpg" rel="shadowbox[gallery]"></a>
<a href="http://site.com/images/full_image4.jpg" rel="shadowbox[gallery]"></a>
...

In other words, you need a bunch of ‘empty’ anchors to appear on every image but only have the thumbnail trigger on 1st image. So you need to move your anchors out of the try form and into the smd_gallery container, around the outside of your {object}, then use thumblimit to stop the execution of your objectform after 1 thumbnail:

<txp:smd_gallery category="list" sublevel="1" onchange="category_title"
     onchangewraptag="h3" thumblimit="1" objectform="try">
   {onchange:category_title}
   <a href="{url}" title="{category_title}" rel="shadowbox[gallery]">{object}</a>
</txp:smd_gallery>

And in Form try:

<img class="img" src="<txp:site_url/>images/{thumbdef}" alt="{alt}" />

Does that (sort of) make sense?

P.S. your sort attribute needs a ‘thing’ to sort by as well. In your case it should be sort="category asc", although I think that’s the default so you can probably omit it, like I did in the code above.

claywso · 2010-12-21 18:47:52

Stef, that worked. Took some troubleshooting, and I realized that I was already using jquery elsewhere, so I just switched over to slimbox2.

In the meantime, I’m trying to accomplish this:

On an article list, display a single thumbnail per article – got that done using the “?article_image” suggestion.

I’d like that thumbnail to link to a lightbox gallery that only displays images related to that article. right now, i’m using the Category filter in this manner. I’ve created a custom field per article that has the name of the image category that contains the correct images.

<txp:smd_gallery form="gallery" thumblimit="1" category='<txp:custom_field name="imagecat" />' id="?article_image" debug="1" />

Should this work? Is there a better way to do it?

THANKS again for the great plugin.

Bloke · 2010-12-23 19:33:03

claywso wrote:

I’d like that thumbnail to link to a lightbox gallery that only displays images related to that article.

A few options. Depends how much you need the images to alter over the life of the site. The idea you posted is fine: bit of extra work creating categories, but fine otherwise.

Another avenue to consider is to drop the category name and just use id="?article_image" as you have done already, but list the IDs in the article image field that you want to display. The plugin will render them all to the page and you can ‘hide’ all but the first one using thumblimit="1" (again, as you’re doing already). The clever bit is that you use sort="fixed", which should guarantee that the first image in the list is the one that becomes the thumbnail.

But once you’ve launched your lightbox it’ll tromp through all images in the list page, allowing people to navigate through them all. If that’s fine, you’re all set. If, however, you need the lightbox to only tread through the ones you have designated in the article image field of the clicked article, you need to set a unique rel attribute for the images in each article. One way to do that is to utilise the article ID as a key in the rel attribute in your image anchors. Like this:

<a href="{url}" rel="lightbox-<txp:article_id />">{object}</a>

That should guarantee that each article has its own personal set of images that lightbox2 will only be able to see, allowing local navigation. Any article-unique entity will do (e.g. url title, title, etc) but the ID is usually simplest.

The downside to this approach is that you need to revisit the article if you want to add images later. With the category approach you can just do it from the Images panel; adding images to a category will automatically add them to the article.

If the ID approach is to be released to a client, you can ease the workflow by installing jmd_img_selector (or equivalent) which will let your editors add images graphically to the article image field.

There are a host of other ways to approach it — for example, using a category named after the article to save you having to use up a custom field — but you still need to create the categories each time you write a new article. Hence my opening statement about the expected lifespan of the images/articles.

Hope some of that helps.

Last edited by Bloke (2010-12-23 19:35:02)

claywso · 2010-12-26 16:49:58

brilliant, thanks. i’ll post a link one i have it working. thanks for your help.

Dimitri · 2010-12-26 18:54:07

Hi Stef. At the moment I am building a default site with lots of different gallery styles to choose from for future development.
I am stuck again and I am hoping you can help me.
I have built 3 sub-categories (but the client can add more so I need to make this flexible). Each categories got x images, the parent category is “gallery”

When I click one of the images, it will link to a category with all x images on 1 page.

My form
<img src="{imagepath}{thumbdef}" />

and my code below, if you see ???? below, I need to pull it from the url but is this where i am stuck

The first part is while I am on the url like this http://localhost/gallery/?c=album1
And the second part is when I am on the main gallery page showing all the images.

<txp:if_category>
		<txp:category wraptag="h2" />
		<txp:smd_gallery category="????" objectform="gallery" >
			{object}
		</txp:smd_gallery>

<txp:article /> <txp:else /> <txp:smd_gallery category=“gallery” sublevel=“1” onchange=“category_title” onchangewraptag=“h3” objectform=“gallery” > {grouptagstart} {onchange:category_title} {object} {grouptagend} <txp:category name=’{category}’ link=‘1’ /> </txp:smd_gallery>

</txp:if_category>

I am trying to avoid all those fancy js effects, so the “cliche” gallery will not come into our mind.
I am on the 4th day doing this, I appreciate any help. Thanx

Last edited by Dimitri (2010-12-28 22:54:25)

Dimitri · 2010-12-29 18:36:31

I have tried adding <txp:category /> or <txp:page_url type=“c” /> among other types in the ????, I am not getting anywhere.

Textpattern CMS

Textpattern CMS support forum

#769 2010-11-24 09:53:40

Re: smd_gallery: super-flexible gallery generator

#770 2010-11-24 22:21:55

Re: smd_gallery: super-flexible gallery generator

#771 2010-12-15 17:08:10

Re: smd_gallery: super-flexible gallery generator

#772 2010-12-15 19:33:25

Re: smd_gallery: super-flexible gallery generator

#773 2010-12-16 15:54:31

Re: smd_gallery: super-flexible gallery generator

#774 2010-12-17 21:36:07

Re: smd_gallery: super-flexible gallery generator

#775 2010-12-17 22:37:52

Re: smd_gallery: super-flexible gallery generator

#776 2010-12-21 18:47:52

Re: smd_gallery: super-flexible gallery generator

#777 2010-12-23 19:33:03

Re: smd_gallery: super-flexible gallery generator

#778 2010-12-26 16:49:58

Re: smd_gallery: super-flexible gallery generator

#779 2010-12-26 18:54:07

Re: smd_gallery: super-flexible gallery generator

#780 2010-12-29 18:36:31

Re: smd_gallery: super-flexible gallery generator

Board footer