Simple gallery with page numbers and borders

asashi · 2012-09-08 09:37:36

Hi, I’m trying to create a photo gallery page on my business website. I did not want to use plugins and over complicate things. I used the instructions I found on Textpattern to create a simple one, but it seems to be missing a few things I find important. http://textpattern.com/faq/138/can-i-make-an-image-gallery

Is there a way to create another page after X amount of images?

Is there a way to make a customized image border for thumbnails?

Is there a simple way to create categories?

How do I add captions?

Thank you for your help.

kai · 2012-09-08 10:17:05

Check this out

asashi · 2012-09-08 13:19:47

Sorry, that page doesn’t answer any of my questions. I need multiple thumbnail pages because I have over 100 photos to display for my gallery. I don’t want 100 thumbnails on one page. I want something that simply says “Page 1 | Previous | Next | Page 10”

I also require an image border (it’s fancy, not just a black line border) around every thumbnail, but do not want to edit every single image.

colak · 2012-09-08 14:08:48

hi asashi

Hi, I’m trying to create a photo gallery page on my business website. I did not want to use plugins and over complicate things. I used the instructions I found on Textpattern to create a simple one, but it seems to be missing a few things I find important. http://textpattern.com/faq/138/can-i-make-an-image-gallery

would one of these methods do?

Is there a way to make a customized image border for thumbnails?

this can be achieved with css

Is there a simple way to create categories?

You can create image categories in the Contents>Categories tab

How do I add captions?

Captions can be added in the Content>Images>edit image on a per image basis

You might want to check out the image tags in the textbook

asashi · 2012-09-12 15:12:42

Thank you colak, but I’m still very unsure of how to go about adding a next page of thumbnails. I reviewed the links you gave me and they didn’t seem to explain how to add that on. Would you be able to provide an example that I can copy and paste? My code is exaxtly the same as from the link I provided.

Exactly how would I achieve an image border with CSS? I have experience with CSS, but do not know how to integrade it with Textpattern at all.

Thank you.

MattD · 2012-09-12 15:21:22

The txp:images tag includes a pageby attribute.

GugUser · 2012-09-12 21:31:43

MattD wrote:

The txp:images tag includes a pageby attribute.

A few days ago I wanted to make the same suggestion. Previously I made a test and now I think that this don’t works the way I expected it.

For my test I used in the page for a section “gallery” this tags (this was only a short test):

<txp:images category="images-category" limit="6" pageby="limit" form="images-gallery" />
<txp:newer>Newer</txp:newer> <txp:older>Older</txp:older>

18 photos I gave a category “images-category”.

Without an article in the section “gallery”, on the page were shown six photos (limit), but without the newer and older links. So that the pagination worked correctly, I needed at least the same number of articles in the section “gallery” as the required number of pagination pages.

I do not know if I had done something wrong.

I don’t know whether asashi wants to filter the photos for the gallery by image categories. But, if that were the case, then the smd_gallery plugin could be a comfortable solution.

An other solution could be one image per article and show on the page an article list with pagination, may be with soo_page_numbers if page numbers are needed.

Bloke · 2012-09-12 22:18:29

There are a few ways to do this. Firstly is by using native categories from the URL. So, assuming you have:

organised your images into categories / by author
assigned suitable alt & captions to each image

Then, on your default page template you can proceed as follows:

<txp:if_category type="image">
   <txp:images limit="6" pageby="limit">
      <div class="thumb"><txp:thumbnail /></div>
      <div class="caption"><txp:image_info /></div>
   </txp:images>
</txp:if_category>

<txp:newer>Next</txp:newer>
<txp:older>Prev</txp:older>

That tells Textpattern that if it encounters /category/image/some-image-cat on the URL then it will render that category’s images, 6 at a time. The newer/older will paginate the list. You can also do the same to paginate by author using <txp:if_author type="image"> with /author/image/some+author+name in the URL. Handy for multiple artists on a site.

The other approach is to do what GugUser suggests and create a gallery section with appropriate page markup and styling. Then proceed to add this inside your surrounding page markup:

<txp:images limit="6" pageby="limit" category="simpsons">
   <div class="thumb"><txp:thumbnail /></div>
   <div class="caption"><txp:image_info /></div>
</txp:images>
<txp:newer>Next</txp:newer>
<txp:older>Prev</txp:older>

That does the same thing, but we’ve hard coded the category in so you get a paginated gallery of Homer, Marge, Bart, Maggie, Ned, Chief Wiggum, Sideshow Bob, Krusty, etc. You could of course read the category from the URL by using a suitable plugin or some trickery and inject it into the category attribute—but if you’re doing that you might as well use the first method instead.

NOTE: (and this might be what tripped up GugUser) In both cases you will get a warning in debug/testing production modes about not having an article tag on the page. You can ignore it — it’s just a warning — but if it bothers you, add <txp:article pgonly="1" /> to your page somewhere below the pagination tags. Textpattern can currently only paginate by one thing at a time (or, rather, it paginates everything at once) and it takes the counts and limits from the first thing it encounters.

EDIT: for page numbers you can use <txp:page_url type="pg" />. If you want to get fancy and do other stuff like Page N of M, there aren’t any plugins or core tools that do just that bit (yet, although I proposed one ages ago and it got forgotten). If you want to do that, you can either use smd_gallery or some other gallery plugin which supports pagination, or use a few lines of PHP to extract the pagination info (primarily, total number of pages) out of the page. Shout if you need assistance.

Hope that helps.

Last edited by Bloke (2012-09-12 22:30:52)

GugUser · 2012-09-12 23:05:09

I made an other and new test or example with respect to Bloke’s second proposal on a live site:

The section “gallery” has no article.

The image category “galerie-2-phase-klassenbau-aguas-frias” contains 26 images.

“Prev” and “next” are not shown.

Textpattern version 4.4.1.

Page for section “gallery”:

<txp:output_form form="head" />
<body id="fotogalerien">
<div id="wrapper">
<txp:output_form form="slider" />
<section>
<h1>Fotos aus unserem Kinderhilfsprojekt in Ecuador</h1>
<txp:images category="galerie-2-phase-klassenbau-aguas-frias" sort="date" limit="8" pageby="limit" wraptag="ul" class="galerie" break="li" form="fotos-galerie-miniaturen" />
<txp:newer>Next</txp:newer>
<txp:older>Prev</txp:older>
<txp:article pgonly="1" />
</section>
<txp:output_form form="nav" />
<txp:output_form form="footer" />
</div>
</body>
</html>

asashi · 2012-09-12 23:31:02

Hi Bloke, thank you for the suggestion, but I’m still not able to get it to work. I have tried your first suggestion since it seems easiest and similar to what I want. No pictures show up at all now…

Bloke · 2012-09-12 23:55:40

asashi wrote:

No pictures show up at all now…

Curious. Can you please post the relevant parts of your page template that contain the txp:images and txp:if_category conditionals, plus any other bits and pieces that surround it?

A few checks:

You are using the code that I posted on your default (home) page. If not, you need to make sure you redirect the categories to the appropriate section, and you will then lose clean URL support (e.g. your URL will be something like site.com/section?category=your-cat&context=image).
You have assigned thumbnails to the images if you are using the <txp:thumbnails /> tag, and captions to the images if you are using the <txp:image_info /> tag, or you are using alternative tags that make sense to your application.
You visit the URL site.com/category/image/your-photo-cat OR the local equivalent of the word ‘category’ (and maybe ‘image’ too: I can’t remember) if you are not using English.

Posting a tag trace might also give us a clue if you’ve already gone through the above and are about to tear your hair out.

Last edited by Bloke (2012-09-12 23:56:06)

asashi · 2012-09-13 00:37:13

<body>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="626px">
<tr>
<td id="one"></td>
<td id="two"></td> 
<td id="three"></td> 
</tr>

<tr>
<td id="four" rowspan="2"></td> 
<td id="content">

<a href="/"><img src="images/logo.png" align="left"></a>

<table>
<tr>
<td>
<p>
<ul id="navlist">
<li><a href="/menu" class="menu">Menu</a></li>
<li><a href="/pictures/?c=pictures" class="menu">Pictures</a></li>
<li><a href="/faq" class="menu">FAQ</a></li>
<li><a href="/contact" class="menu">Contact Us</a></li>
</ul></p>
<a href="http://www.facebook.com/pages/Salon-Glitter/237416721495"><img src="images/fb.png" align="left"></a><a href="http://www.yelp.com/biz/salon-glitter-honolulu-2"><img src="images/yelp.png" align="left"></a>
</td>
</tr>
</table>

	<link rel="home" href="<txp:site_url />" />	
	<txp:css format="link" />

</td>

<td id="five" rowspan="2"></td> 
</tr> 

<tr><td id="content"> 
		<div class="hfeed">
		<txp:article limit="5" />
		</div>
</txp:if_category>

<txp:if_category type="test">
   <txp:images limit="5" pageby="limit">
      <div class="thumb"><txp:thumbnail /></div>
      <div class="caption"><txp:image_info /></div>
   </txp:images>
</txp:if_category>

<txp:newer>Next</txp:newer>
<txp:older>Prev</txp:older>

</td></tr>

<tr> 
<td id="six"></td>
<td id="seven"></td>
<td id="eight"></td>
</tr> 
</table>


</body>
</html>

{Edited to add Textile’s bc.. for code display in order to better see whether curly quotes might be part of the problem. – Uli}

Last edited by uli (2012-09-13 00:46:46)

Textpattern CMS

Textpattern CMS support forum

#1 2012-09-08 09:37:36

Simple gallery with page numbers and borders

#2 2012-09-08 10:17:05

Re: Simple gallery with page numbers and borders

#3 2012-09-08 13:19:47

Re: Simple gallery with page numbers and borders

#4 2012-09-08 14:08:48

Re: Simple gallery with page numbers and borders

#5 2012-09-12 15:12:42

Re: Simple gallery with page numbers and borders

#6 2012-09-12 15:21:22

Re: Simple gallery with page numbers and borders

#7 2012-09-12 21:31:43

Re: Simple gallery with page numbers and borders

#8 2012-09-12 22:18:29

Re: Simple gallery with page numbers and borders

#9 2012-09-12 23:05:09

Re: Simple gallery with page numbers and borders

#10 2012-09-12 23:31:02

Re: Simple gallery with page numbers and borders

#11 2012-09-12 23:55:40

Re: Simple gallery with page numbers and borders

#12 2012-09-13 00:37:13

Re: Simple gallery with page numbers and borders

Board footer