Keeping it simple: article_image

daikw · 2008-04-11 01:59:36

Hi there,

Please excuse the newbie questions– we all have to start somewhere!

My aim is to create a basic image gallery similar to this in format
where images are displayed as thumbnails and separated into categories which also serve as titles. (“On Tour”, “STA facilities” etc. )

I believe that using a gallery plugin may be the best way forward; smd_gallery, for instance, and also a lightbox plugin.

At the moment though my problems are far more basic: I cannot actually get any images to appear!

First of all I created an article form called “article_image”, within that form is the following tag <txp:article_image thumbnail="1" />

Then, I created a gallery section and gallery page. Within the page, I inserted <txp:output_form="article_image" />

Now when loading the gallery page I get the error
Tag error: <txp:output_form/> -> Textpattern Notice: Form not specified. on line 247

This is almost definitely a simple error caused by my inexperience, but I would appreciate if someone could help me out, as a forum search hasn’t helped solved this, and neither have the FAQs.

The second part of my question is about using the gallery plugins.

If I upload 50 images, with 5 different categories and wish to organize them like this
using smd_gallery. How do I begin? When reading the documentation and forum posts on the topic, at least 50% of it goes over my head, I would really appreciate it if someone could take a moment to describe the stages in beginner’s terms.

Thanks

Dai

P.S. I feel there is a gap in the textpattern learning curve for beginners. I have read the Wion articles and feel I have an understanding of textpattern semantics, but still am very ignorant in the “nuts and bolts” operation; creating, and inserting forms and tags correctly– as you can probably see from my main question above!

When looking at the default page in textpattern, I recognize a lot of the tags and html but the way they are combined is gobble-de-gook to me! This could be more of an html learning issue for me, but if anyone can recommend good, straightforward tutorials that will get me moving, I would be very grateful!

Last edited by daikw (2008-04-11 02:18:22)

nabrown78 · 2008-04-11 02:59:06

Hi diakw,
If you quoted this code correctly: <txp:output_form="article_image" /> then that would be the first probelm. The syntax you should use is <txp:output_form form="article_image" />. The second issue is that <txp:article_image /> outputs the image(s) associated with an article, as specified on the article write page in the “Article image” field. So you need to make your “article_image” form an article form, then write an article in the Gallery section, and list the ID’s of your images in the “Article image” field, then put a <txp:article /> tag in your gallery page. Obviously, that won’t be the ideal solution to create a gallery, so that’s where your plugin question comes in – can’t help you there as I haven’t tried any gallery plugins, specifically, but upm_image has been useful for me for image display functionality.

Good luck!

Bloke · 2008-04-11 10:20:59

Hello again daikw.

Yes, TXP does have a bit of a learning curve, I’ve been there! Regarding your first question, nabrown78 hit it.

Apologies in advance if any of this appears patronising; I don’t mean it to be! But for me, I think the thing that made TXP seem daunting at first was that it was so flexible. I kind of felt “which is the right way to do it?” Of course, there’s no right way as such, just different ways. For example, to output a single thumbnail with an article you could create a Page and a Section, associate the Page with the Section so it always uses it and then:

Put <txp:body /> and <txp:article_image /> tags directly in the Page among the other HTML and TXP tags
For more flexibility later, you could edit the default Form. This is used whenever the <txp:article /> tag is encountered. So, somewhere in this form (probably close to the <txp:body /> tag) you could add <txp:article_image />. That would then output any image ID given in the Article Image field on the Write page (left hand side -> under Advanced Options).
The most granular but arguably least controllable (probably more hassle to change in future) method is to add the <txp:article_image /> tag directly into the body text of your Article where you want the image to appear within the flow of your text
As you have chosen, separate the <txp:article_image /> tag into its own form and call the Form (from any of the above three places; Page, Form or Article) using <txp:output_form form="my_article_image_form" />

So, four ways at least to do the same (or very similar) thing, and there are more I’m sure. I’d choose #2, but that’s just me.

Once you’ve created your image categories from Content->Categories (including any hierarchy you like) you can then upload images to the database from Content->Images and assign each image a category (hint: glx_admin_image and a few other plugins help with automatic thumbnail generation and resizing options). There are plugins that allow you to upload multiple images at once; I think fpx_image_import is one.

Notice image IDs are assigned to each; that’s conventionally how you refer to them (a bit clumsy; the gallery plugins allow you to refer to them by category, but more on that later). So, you can then go to your Article’s Write page and put a single image ID number in the Article Image field, Save and View your article. That image ID is then read by the <txp:article_image /> tag and will display your image (or, if you added thumbnail="1", your thumbnail if it’s been created).

For some guides on various other things, you can check out Peter’s First steps tutorial that introduces the core concepts by example. I also wrote a brief overview of the naming convention, which you seem to have already grasped so it’s perhaps a bit below you now. There’s also the Textbook Site Administration guide that has some great sections on how TXP does things.

Gallery Plugin

The 2nd part is to do with smd_gallery. I know jstubbs used it for his Tennis page you linked to above. It uses FancyZoom for the effect.

Again, there are many ways to do it and perhaps jstubbs is the right person to talk you through it since there are many ways to implement it. But this would be my approach:

Create your image categories and upload your images to the database, as detailed above, assigning them to your various categories as you see fit
Put an smd_gallery call (see below) in your article Form. If it’s a photography site, you can do this in the default Form because you’ll probably want galleries on every page. If not, make a new article Form and tell that Page’s <txp:article /> tag to use this alternative Form instead
Make a decision: One article per gallery, one article for all galleries, or hard-code the categories in the tag itself. The difference is:
- One article per gallery means you give the plugin one category to pull the images from in each article. So you’d have an article that displayed the “On Tour” pics, another article that displayed the “STA facilities” pics, and so on) In order to show all galleries you would make your URL just point to a Section (in the Tennis case, it’s called “photos”). Your <txp:article /> tag in your page template then knows it’s in “list mode” and it will display each article one under the other (up to a maximum of 10 by default). To add new galleries to the page you write a new article and tell it which category of images you want to display
- One article for all galleries means you write one article and give the plugin a list of categories. It then chooses all of them. If you tell the plugin to sort by category and display the headings above each group, this one article can show them all. In this case, to add new galleries to the page, you edit the Article and add the category to your list
- Hard-coded categories in the tag means the categories are written directly into the plugin tag attributes, so if you ever wanted to add categories to it, you edit the tag in your Form
If you choose one of the first two methods, you need to decide which article field is going to contain your image category (for option 1) or list of image categories (for option 2). You can create a custom field specifically for this purpose — name it something suitable, e.g. “galleries” from the Admin->Prefs->Advanced tab — or use an existing field (e.g. Article Image)

Option 1 is probably most friendly to anyone updating the site in future since they can create a new category, upload an image collection to it, write some stuff about that collection in a new article and simply insert the name of the category in the “galleries” custom field (or Article Image field, or wherever you have told the smd_gallery plugin to look). TXP and the plugin does the rest. So let’s concentrate on that one for now.

<txp:smd_gallery category="?galleries" form="gallery_layout" thumbchange="category_title" thumbchangewraptag="h2" />

If you chose to use article image, use this instead:

<txp:smd_gallery category="?article_image" form="gallery_layout" thumbchange="category_title" thumbchangewraptag="h2" />

That tells the plugin to read the contents of the ‘galleries’ or ‘article image’ fields and use whatever it finds there as a list of categories to grab images from. You’d tell your client to put only one category name in the relevant field.

The final piece of the puzzle is to use your gallery_layout Form to tell TXP how to display the thumbs and how to hand over processing to a third party script such as FancyZoom, Slimbox, Slideshow or whatever.

For FancyZoom, simply follow the instructions on that site to insert the javascript and any CSS code on your page (normally in the <head> tag), then make your gallery_layout Form read:

{changed:category_title}
<a href="{url}" title="{title}">{object}</a>

That’s it. Using the thumbchange attribute we’ve told the plugin to “watch” for changes in category_title and every time it encounters a new category it’s to display the title wrapped in <h2> tags. Under that it’s to list every thumbnail in the given category, with a link to the full size image url. The {object} part handles the thumbnail generation for you.

In this case, with only one category in your chosen field, it only encounters one category, but if your client wanted to show more than one gallery in a single Article, they could specify a list of categories and the plugin would still work. Similarly, if you decided to allow sub-categories (see plugin help), each category will be split with an <h2> and its heading added automatically.

Incidentally, for a lightbox effect your gallery_layout should be:

{changed:category_title}
<a rel="lightbox-{category}" href="{url}" title="{title}">{object}</a>

That’s probably enough (too much?) for now. Diving right in and using the “advanced” smd_gallery plugin is perhaps a stretch for someone new to TXP, but once you’ve gone through Peter’s tutorial and feel more comfortable with the inner nuts and bolts of TXP, it does start to make some kind of sense (I hope!)

This is just a general overview of how I’d do it. There are many other ways to accomplish this so please shout if there’s anything specific you want to try and do, or if there are parts that still give you a headache! There are many people on the forum with experience in creating beautiful gallery sites (I’m not one of them; I provide the tool, not the good looks ;-) who will be able to give pointers and their wisdom to help you achieve what you want.

Hope this is at least of some use to get you started in experimenting.

Last edited by Bloke (2008-04-11 10:22:33)

daikw · 2008-04-11 11:42:50

Hi nabrown78, Hi Bloke,

I just wanted to say straight away: thanks so much for your help. Bloke, in particular for your especially detailed and thoughtful reply.
I’m gonna get cracking on this now and will get back to you soon!

Terrific help!

Textpattern CMS

Textpattern CMS support forum

#1 2008-04-11 01:59:36

Keeping it simple: article_image

#2 2008-04-11 02:59:06

Re: Keeping it simple: article_image

#3 2008-04-11 10:20:59

Re: Keeping it simple: article_image

Gallery Plugin

#4 2008-04-11 11:42:50

Re: Keeping it simple: article_image

Board footer