[plugin] [ORPHAN] upm_image: More powerful image display

Mary · 2009-02-10 17:14:51

How about you show me what you’re doing now? maybe I can help.

thebombsite · 2009-02-10 20:46:09

Well Galleria requires an unordered list of the images it is to use for a gallery. This can be easily produced with your plug-in and a comma-separated list of the image id numbers in the article image box. From this listing Galleria generates it’s own thumbs and when a thumb is clicked it becomes class=“active” and the full-size image is displayed along with the caption (title) if required. At the moment the code goes something like:-

<div class="clearfix">
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; Prev</a> | <a href="#" onclick="$.galleria.next(); return false;">Next &raquo;</a></p>
<txp:upm_article_image wraptag="ul" class="galleria" break="li" show_alt="yes" show_title="yes" />
</div>

Now that first paragraph simply contains Prev/Next links which can go anywhere or nowhere if you don’t want them. The important part is your tag producing a ul with class=“galleria” containing all the li tags which hold the individual image information. As you can see I use show_title=“yes” and it would be really simple if I had the option to add something like an “escape_title” attribute.

As you can see the code is really pretty simple but it can produce some really cool galleries such as this one I worked on a couple of months back and this one which is the one that contains the art images I’m talking about (by the way, the thumbs are still there, you just can’t see them). At the moment we haven’t added any captions to this second example until we can sort out this escaping problem.

Last edited by thebombsite (2009-02-10 20:47:07)

Mary · 2009-02-10 21:40:00

<div class="clearfix">
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; Prev</a> | <a href="#" onclick="$.galleria.next(); return false;">Next &raquo;</a></p>
<ul class="galleria">
<txp:upm_article_image><li><img src="<txp:upm_img_href />" alt="<txp:upm_img_alt />" title="<txp:upm_img_caption" /></li></txp:upm_article_image>
</ul>
</div>

The problem is that the fallback wouldn’t be very nice – html tags are not legal inside attribute values. Also, I took a look at Galleria itself, and I believe even without my plugin’s escaping, the break tag would be displayed as text, because the jQuery text() function is used for the caption.

What you could do is continue to use my plugin as you already do, and slightly modify the Galleria plugin. You could have it parse the title for some kind of text delimiter, which would still be valid inside the title attribute, and stick everything before the delimter in one div and everything after it in another. So a title might be, “Some picture,Materials”.

Your other option is to try and different jQuery gallery that allows for more customization. Have you looked at the Cycle plugin?

jakob · 2009-02-10 22:23:02

Stuart, while I’ve not followed your query in detail, you might want to take a look at the gallerific jquery plugin which I only recently discovered and seems very similar to Galleria. I’ve not used it myself (yet) but on that page under point 4 it says:

<div class="caption">
            (Any html can go here)
        </div>

If you’re having problems with getting the line break out of the caption, you might want to try one of the search and replace txp-plugins (e.g. Jukka’s rah_replace or pax_grep) to swap a placeholder for a <br />. I realise it’s not great form suggesting all these untried variants and plugins, but maybe this bit of thinking aloud with you is some help…

thebombsite · 2009-02-10 22:35:17

Thank you both. Some options to look at. I believe I have the prospect of getting my head around the Cycle plug-in for the textpattern.com site so that’s something to look forward to. :)

pieman · 2009-02-23 12:21:44

I’m having a problem using the <txp:upm_img_date /> tag when called by <txp:upm_image />.

There are a lot of images in a single page and I want to break the page up to show a sub-heading according to month of uploading.

I tried to use if_different around the date but it only showed up once, so I added the date to every image (commented out) and it shows every image as being uploaded on the same date – 01/01/70.

You can see it if you view source on this page: http://www.annekeothavong.co.uk/gallery

Any help appreciated
Stu

Mary · 2009-02-23 13:03:53

Hmm. That sounds like the date info isn’t getting passed for some reason. I’ll check on my side of things.

pieman · 2009-02-23 13:08:18

Thanks. I did check the database to be sure and the dates are correctly stored there.

debeljko · 2009-03-01 23:43:43

Could anyone provide an example of ‘wrapform’ and ‘<txp:upm_img_list>’ usage? I’m trying to use lightbox while having multiple images assigned to article. Solution seems to be within wrapform but can’t get it right.

Last edited by debeljko (2009-03-01 23:46:02)

Gallex · 2009-03-11 13:44:52

hakjoon wrote:

in your article form
<txp:upm_article_image form="lightbox" />

in the lightbox form

<a href="<txp:upm_img_full_url />" rel="lightbox[galerii]">
 <img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" title="<txp:upm_img_caption />" 
  width="<txp:upm_img_thumb_width />" height="<txp:upm_img_thumb_height />" />
</a>

i’m using this solution in my lightbox gallery and it works very well except one thing: titles not showing up into big pictures. could anybody help me here?

and a second question: i group a set of related images by adding manually a group name between square brackets in the rel attribute rel="lightbox[galerii]" like it said in a lightbox tutorial

but, is it possible to insert the image category name “automatically” (dynamically) between those square brackets? something like this rel="lightbox[image category name]"
then i could create multiple gallerys with one code

Last edited by Gallex (2009-03-11 14:23:34)

Gallex · 2009-03-12 09:26:30

Gallex wrote:

and a second question: i group a set of related images by adding manually a group name between square brackets in the rel attribute rel="lightbox[galerii]" like it said in a lightbox tutorial
but, is it possible to insert the image category name “automatically” (dynamically) between those square brackets? something like this rel="lightbox[image category name]"
then i could create multiple gallerys with one code

solved this by custom field.

<a href="<txp:upm_img_full_url />" rel="lightbox[<txp:custom_field name="gallery" />]">
 <img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" title="<txp:upm_img_caption />" 
  width="<txp:upm_img_thumb_width />" height="<txp:upm_img_thumb_height />" />
</a>

and works like a charm.
but now, in some reason, it doubles the created articles. take a look

article form i’m using:

<div class="article">
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<txp:upm_article_image form="lightbox" />
</div>

any ideas?

Gallex · 2009-03-12 12:44:07

Gallex wrote:

but now, in some reason, it doubles the created articles. take a look

…because i had created so many of them myself. dear me… ;) case closed

but, this title question is still up.
it seems to me that this is a css issue really…
if you look at big image source, the <span id=“caption”/> is not active here:

<div id="imageDetails">
<span id="caption"/>
<span id="numberDisplay" style="">Image 3 of 4</span>
</div>

have you idea, why?

els · 2009-03-12 15:14:00

Because it’s not closed?

Mary · 2009-03-12 16:17:49

You don’t need to use a custom field if you want to have the image category, as there’s a tag for that: <txp:upm_img_category />. See help doc for details.

The title attribute is supposed to be applied to the link and not the image itself, in order for Lightbox to pick it up. :)

So:

<a href="<txp:upm_img_full_url />" rel="lightbox[<txp:upm_img_category />]" title="<txp:upm_img_caption />">
 <img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" width="<txp:upm_img_thumb_width />" height="<txp:upm_img_thumb_height />" />
</a>

Gallex · 2009-03-13 09:21:13

bingo! thank’s a lot mary!

Textpattern CMS

Textpattern CMS support forum

#286 2009-02-10 17:14:51

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#287 2009-02-10 20:46:09

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#288 2009-02-10 21:40:00

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#289 2009-02-10 22:23:02

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#290 2009-02-10 22:35:17

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#291 2009-02-23 12:21:44

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#292 2009-02-23 13:03:53

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#293 2009-02-23 13:08:18

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#294 2009-03-01 23:43:43

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#295 2009-03-11 13:44:52

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#296 2009-03-12 09:26:30

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#297 2009-03-12 12:44:07

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#298 2009-03-12 15:14:00

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#299 2009-03-12 16:17:49

Re: [plugin] [ORPHAN] upm_image: More powerful image display

#300 2009-03-13 09:21:13

Re: [plugin] [ORPHAN] upm_image: More powerful image display

Board footer