Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
How do I create an article-based image gallery?
I have a client who hosts events several times a year. They take a bunch of photos at each. They’d like to be able to have a gallery-type article for each event on a page of their website. The page would work like a typical blog, with these gallery posts stacking up on each other in reverse chronological order.
Each article would have a main photo with thumbnails across the bottom. As visitors clicked a thumbnail, a new photo would appear.
And they want to be able to update it themselves.
I’m thinking this will require some js, and I’m trying to put it together with Gallerific, as described in this article. But I am no js genius at all, and I’m not sure this is an efficient way to go about this.
But I don’t really know if I’m on the right track. Is there a way to do this using just textpattern’s image tags?
In the alternative, I’d be happy to hire someone to help me put this together. So if you know of anyone…..
In advance, thanks for your help.
Ann
Offline
Re: How do I create an article-based image gallery?
Hi Ann, You don’t need to know any JS.
smd_gallery should be able to do it for you.
I was experimenting with gallerific a few months ago and all you need is something like the code below which assumes that images will have their categories on a per event basis and that you have a custom field named image_gallery
<ul class="gallery">
<txp:smd_gallery category='<txp:custom_field name="image_gallery" escape="" />' sublevel="all">
<li><a href="{url}" title="{alt}"><txp:thumbnail id="{id}" /></a></li>
</txp:smd_gallery>
</ul>Also remember to include the jquery and the gallery’s js on the head as well as adding the relevant styles in your css.
Last edited by colak (2012-02-05 06:57:12)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: How do I create an article-based image gallery?
Thanks for the reply, Colak. I’m going to install smd_gallery and read the documentation thoroughly before I proceed. But I’m sure I’ll have some questions. Which I’ll post here!
Ann
Offline
Re: How do I create an article-based image gallery?
hi ann,
As visitors clicked a thumbnail, a new photo would appear.
does this new photo belong to the same article or to a new article? in both cases, there might be easy solutions without plugins.
christoph
EDIT: You might want to check out this site, a tutorial on how to build what you want with core tags. in particular, here is a demo of what you need.
Last edited by totoff (2012-02-07 12:23:22)
Offline
Re: How do I create an article-based image gallery?
Thanks!
It would belong to the same article. Each article would have multiple article images (which I have been able to implement using upm_image plugin).
Here is a description of how the page would work: When a visitor clicks on the scrapbook page, they would see the scrapbook articles.
Each article would look like this: a title, a row of image thumbnails (one for each article image), and under the row of thumbnails, one of the article images at full size. As the viewer clicked on the thumbnails, the full-size article image would be replaced by the one they clicked on.
I looked at the sites you suggested, but I can only get as far as outputting the thumbnails of the article images, then I get stuck. Any advice would be much appreciated!
Offline
Re: How do I create an article-based image gallery?
Christoph’s right, the examples he linked to should fit the bill. upm_image not needed (unless it adds an interface for managing multiple article images — you can do multiple article images without it, but only by entering a comma-separated list).
What code do you have so far?
Code is topiary
Offline
Re: How do I create an article-based image gallery?
In the scrapbook page:
<txp:article form="article_scrapbook" limit="3" />
In the “article_scrapbook” form I’ve been able to output the thumbnails by article using this:
<txp:upm_article_image type="thumbnail"/>
When I use this tag <txp:images thumbnail="1" > it outputs all the thumbnail images in the whole site in each article. The example on your gallery page shows that you’re limiting the tag to output thumbnails by category. I’m trying to figure out how to limit by individual article. Can you help me with that?
Thanks!
Offline
Re: How do I create an article-based image gallery?
hi ann,
<txp: images /> is unaware of the context it is in. therefore outputs every image it can find. it should auto-detect the article it is used in (look here at the wiki).
if in section “scrapbook” wrap your “article_scrapbook” form with <txp:if_individual_article> and make sure you did enter some image IDs in the article image fields of your respective articles. this should output thumbnails of your article images once you clicked on an article and output nothing as long you are in article list view.
it might be helpful if you post the template code of your scrapbook section.
Offline
Re: How do I create an article-based image gallery?
I use something like this to output images from the article_image field in the order they were entered into the field.
<txp:if_article_image>
<txp:images sort='field(id, <txp:custom_field name="article_image" />)'>
<a href="<txp:image_url />"><txp:thumbnail /></a>
</txp:images>
</txp:if_article_image>Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
#10 2012-02-08 22:02:34
- redbot
- Plugin Author
- Registered: 2006-02-14
- Posts: 1,410
Re: How do I create an article-based image gallery?
MattD wrote:
I use something like this to output images from the article_image field in the order they were entered into the field…
I think Matt showed the best (and simplest) way to go.
Furthermore this approach is ideal if coupled with bot_image_upload for managing images in the back-end (uploading, naming, sorting etc.) straight from the write tab.
(sorry for the self-promotion)
Offline
Re: How do I create an article-based image gallery?
MattD’s suggested code worked well, and I think I’ve crafted (thanks to this forum) a solution to the issue.
I used this code in an article form called article_scrapbook:
<txp:if_article_image>
<txp:images break="">
<a href="<txp:image_url />" rel="shadowbox[<txp:article_id />]"
title="<txp:image_info type="caption"/>"><txp:thumbnail /></a></div>
</txp:images>
</txp:if_article_image>
In the scrapbook page, I call the form with this code:
<txp:article form="article_scrapbook" limit="3" />
and it works! Yay!
I’m thinking it works because the <txp:if_article_image> tag puts the <txp:images> tag in the context of the individual article, right? I knew I had to do that somehow, and that’s how. Thanks, MattD.
I’m using Shadowbox.js to show the articles as the thumbnails are clicked. But I’m curious to see if there’s a way to output a main image as its thumbnail is clicked w/out javascript.
I like how it’s working now, however. Many thanks for everyone’s help!
Ann
Offline
Re: How do I create an article-based image gallery?
bluepurl wrote:
I’m thinking it works because the
<txp:if_article_image>tag puts the<txp:images>tag in the context of the individual article, right?
Very close, yes; it’s the auto_detect attribute that gives it context. By default it picks up the context from the individual article (meaning article image in this case, as we’re using an image-related tag).
The reason you need the <txp:if_article_image> is to defend against situations where the article image field is empty. If you didn’t first check that it held content — i.e. used the <txp:images> tag without it — you’d get all images in your database, as you found earlier.
Hope that helps and I’ve not confounded you further!
Last edited by Bloke (2012-02-09 00:04:40)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline