Textpattern CMS

#1 2015-09-01 10:43:03

pierlu

Member

Registered: 2014-08-12

Posts: 153

Scroll

I would need to create a gallery es http://www.hoteliginepri.it/Fotogallery.aspx.
I must create some links. how does it do him on textpattern?

#2 2015-09-01 18:01:52

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,596

Website

Re: Scroll

You’ve asked similar questions several times on the forum in the past but this time you provided an example, so here’s an attempt at a definitive answer for you that uses standard txp tags. Try the following:

1. Upload your images to txp along with thumbnails for the image overview. The thumbnails should be the same size.

2. Create an image category for each gallery and assign the images to the respective category or categories.

3. Create a form called image_gallery (or similar) as follows:

<txp:images category='<txp:yield />' wraptag="ul" break="li" class="image-gallery">
  <a href="<txp:image_url />" rel="prettyPhoto[<txp:yield />]" title="<txp:image_info type="caption" />">
    <img src="<txp:image_url thumbnail="1" />" alt="<txp:image_info type="alt" />">
  </a>
</txp:images>

4. You can now insert an image gallery in the body field of an article. For example, to borrow from the example you linked to, you might do this:

h3(#camere). Camere Suite

Per il massimo comfort  le camere suite sono la scelta migliore: 50 mq di spazio in camera ed un balcone di 25 mq  vista mare con Jacuzzi personale

[SPACE]<txp:output_form form="image_gallery">camere-suite</txp:output_form>

… And so on …

where camere-suite is the name (not the title) of the image category with the images and [SPACE] is the spacebar pressed once (the equivalent of notextile. ).

If you want to create a series of categories one after the other, you can use the output_form tag inside a category_list in your page template, e.g. the following would output three galleries one after the other each with a heading with the category title:

<txp:category_list categories="spazi-esterni,camere-suite,camere-superior" break="">
  <h3 id="<txp:category />"><txp:category title="1" /></h3>
  <txp:output_form form="image_gallery"><txp:category /></txp:output_form>
</txp:category_list>

Finally, all you need to do is do the css styling for the image gallery and set up the jQuery for “prettyphoto” as described here.

Because you’ve assigned the rel="prettyPhoto[{category-name}]-tag in the link to the large image, prettyPhoto knows which images belong to a gallery and handles the next/prev buttons within each gallery automatically.

---

TXP Builders – finely-crafted code, design and txp