How to Insert a thumbnail image strip? (Galleria & smd_gallery)

jshan · 2009-01-23 20:47:42

Hi,

I need to insert a horizontal TXP image strip below the site title across the container div. Based on the site setting, I’ll need a strip of 9 thumbnail images, each of which is 58×58 px of size.

Similarly, I’ll need a vertical strip as well.

How to tackle this?

Thanks lots!

Jay

Last edited by jshan (2009-01-27 18:16:14)

jshan · 2009-01-23 21:19:15

okay… I forgot to mention that after some research, there seems to be a variety of ways to implement this. In conclusion:

make-own TXP gallery that mainly relies on <txp:article_image>
cut and paste URL from Flickr account, basically running the javascript
other plugins

My conern is the loading time. I found the Flickr kind can take a very long time to load especially when you have quite a few thumbnails to load, which can be annoying to site visitors.

Any one any suggestion? As said, I’m not doing a fancy “gallery” for the sake of “gallery”. Just a strip of the thumbnails with fast loading time, lightweight on the homepage.

Thanks!

Bloke · 2009-01-23 21:24:30

I’m not sure if this is even going to suit you, but as a curve-ball idea, how about smd_random_banner with category="my_image_pool" limit="9" thumb="1" as attributes? You can style to suit (e.g. an inline list and some CSS will create horizontal or vertical strips). And the images would be ordered randomly too :-)

Last edited by Bloke (2009-01-23 21:25:48)

jshan · 2009-01-27 18:28:57

Hi,

(now back to my original request…)

I’ve been researching and testing on a few gallery plugins with high flexibility. Galleria and smd_gallery (by ‘legendary’ Bloke) seem to be much prefered to suit the needs of my project.

As I’m diving into Galleria and as a newbie to jquery, I need some help for the following:

Where and how do I tweak the code so that:

1.ONLY the thumbnail strip is displayed
2.When hover-over a thumbnail, display a callout-box-like frame that contains the descriptive information of the image, such as shooting date, location, shooting mode, etc.
3.When a thumbnail is clicked, link to the page where the actual image is displayed followed by the article about that image.

jakob · 2009-01-27 20:04:32

jshan, I don’t think you need galleria for this. All the thumbnail elements, hovers and display method on the same page is regulated by the internal workings of the galleria script. Making galleria behave differently means changing its javascript.

Your situation is simpler. Judging by what you have written, you have an article for each image. The image is then attached, I’m guessing, as an article image. I don’t know where you are storing the date, mode, location infos, perhaps in custom fields. If that is so, you don’t need smd_gallery either.

You can do all this with the in-built txp:article tags and a form that shows the article image with a link to the article, e.g. in your page template use something like this:


<ul>
<txp:article section="my_articles_section">
   <li><txp:permlink><txp:article_image thumbnail="1" /><span><txp:title />, <txp:custom_field name="photo_location" />, <txp:custom_field name="photo_date" /></span></txp:permlink></li>
</txp:article>
</ul>

This should produce a ul-list of thumbnails linked to the articles with a span containing the title, location, date (from custom fields of that name). You can then use CSS to make your list of thumbnails and to display the span only on hovering the link. You can, of course, extend the principle to include other custom fields and if you want some fancy kind of tooltip, you can look at the various libraries for special roll-over tooltips out there and build your HTML to fit them.

jshan · 2009-01-27 22:40:23

jakob,

Thanks for the nice suggestion. Will try it out.

In fact, I don’t have an image assigned to each article. All I want to show is a strip of thumbnails that displays the 9 LATEST images which are stored in TXP\image. And then each image links to its article which may or may not be on the homepage. Each image has its article, but not every article has an image.

by the way, is there a way to randomly pick 9 images to display as thumbnails? Thanks again!

Jay

Last edited by jshan (2009-01-27 22:42:38)

ultramega · 2009-01-27 22:58:29

“Each image has its article, but not every article has an image.”

Hmm… so in the end – every image showed in list have an article where the thumb is linking? Couldn’t they then be article image thumbs like Jakob suggested? Or is it too late and I’m missing something :)

MattD · 2009-01-27 23:13:39

You could use a plugin like ras_if_article_image to show only images associated with articles.

<ul>
<txp:article section="my_articles_section">
<txp:ras_if_article_image>
   <li><txp:permlink><txp:article_image thumbnail="1" /><span><txp:title />, <txp:custom_field name="photo_location" />, <txp:custom_field name="photo_date" /></span></txp:permlink></li>
</txp:ras_if_article_image>
</txp:article>
</ul>

jakob · 2009-01-27 23:53:49

by the way, is there a way to randomly pick 9 images to display as thumbnails?

With txp:article you can use the attributes sort="rand()" and limit="9" to get your 9 randomly sorted articles but a slight problem is that you actually want “9 random articles that have article images”.
Matt’s suggestion is good for testing if an article has no image (the plugin upm_image will do this too) but this is only applied after txp:article has found 9 randomly arranged articles. That means it loops through the 9 it finds and if 3 of those have no article-image assigned you will end up with only 6 thumbnails. If it’s not a problem that you might have less than 9, that’s fine.

Otherwise I suggest you use some means of subsetting the articles with an image so you can target them only, e.g. by assiging a category to them such as “has-image”. Then you can use the attribute category="has-image" instead of section in the txp:article tag: e.g.

<ul>
<txp:article_custom category="has-image" limit="9" sort="rand()">
   <li><txp:permlink><txp:article_image thumbnail="1" /><span><txp:title />, <txp:custom_field name="photo_location" />, <txp:custom_field name="photo_date" /></span></txp:permlink></li>
</txp:article>
</ul>

Last edited by jakob (2009-02-04 08:35:04)

jshan · 2009-01-30 18:11:29

Thx jakob. I’m going to try this.

jshan · 2009-02-03 23:09:11

Otherwise I suggest you use some means of subsetting the articles with an image so you can target them only, e.g. by assiging a category to them such as "has-image".

very simple but neat approach to tackle my problem. Now just one question, is there any simple way to hide the category "has-image" from the public. I have an archive page that sorts all articles based on categories. I absolutely do not want to have the category “has-image” listed.

J.

Last edited by jshan (2009-02-03 23:14:09)

MattD · 2009-02-03 23:15:38

What are you using to output the list of articles by category? If it’s something like rss_super_archive there are options for excluding a category.

Textpattern CMS

Textpattern CMS support forum

#1 2009-01-23 20:47:42

How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#2 2009-01-23 21:19:15

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#3 2009-01-23 21:24:30

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#4 2009-01-27 18:28:57

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#5 2009-01-27 20:04:32

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#6 2009-01-27 22:40:23

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#7 2009-01-27 22:58:29

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#8 2009-01-27 23:13:39

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#9 2009-01-27 23:53:49

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#10 2009-01-30 18:11:29

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#11 2009-02-03 23:09:11

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

#12 2009-02-03 23:15:38

Re: How to Insert a thumbnail image strip? (Galleria & smd_gallery)

Board footer