Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2017-11-26 06:43:14

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

How to build a Gallery

I am trying to build a nice clean gallery with a Lightbox. I tried by using images and image tags but it does not feel right or doing it the right way. Can someone help me to understand how I should go about it building a gallery. Thank you

<txp:images category="gallery" limit="999" >
   <div">
        <a href="#">
        <txp:image width="350" height="300"/>
       </a>
  </div>
</txp:images>

EDIT: added code block

Offline

#2 2017-11-26 09:32:28

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,136
Website

Re: How to build a Gallery

Hi code365!

Your approach with txp:images is right. Here’s how you’d do it using magnific popup. Check the code example for an lightbox gallery on that page. The snippet below generates the html code for that:

<txp:images category="my-image-gallery-category-name" wraptag="div" break="" class="popup-gallery">
  <a href="<txp:image_url />" title="<txp:image_info type="caption" />">
    <img src="<txp:image_url thumbnail="1" />" width="<txp:image_info type="thumb_w" />" height="<txp:image_info type="thumb_h" />">
  </a>
</txp:images>

If you’re using another lightbox gallery, adapt accordingly. See the docs for image tags here.

In the above example, the img tag is built manually, but if you want exactly that output, you can simply use: <txp:thumbnail /> in its place. Your version with txp:image and explicitly set widths and heights works too but will squeeze the image. If you want to maintain the aspect ratio but only show part of the image in that box, look at the css properties object-fit (example) or place the thumb in a container and use background-size: cover; (two different approaches of many).

txp:image_info will output most stored data about an image if you need to adapt the syntax.

And txp:images will create the container and allows you to select which images you want to display. For example:

  • You can use the attribute id="1,2,3" instead of category to output only selected images.
  • If you don’t specify id or category the tag auto-detects depending on where it appears. In an individual article, that would be the article id numbers in the “article image” field of the article. In a category page, it would be all images in that image category.

TXP Builders – finely-crafted code, design and txp

Offline

#3 2017-11-26 09:51:49

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,615
Website GitHub Twitter

Re: How to build a Gallery

I take it that you use lightbox-2 for which case you could try.

<txp:images category="gallery" limit="999" wraptag="div" break="">
<a href="/images/<txp:image_info type="id" /><txp:image_info type="ext" />">
<img src="/images/<txp:image_info type="id" />t.<txp:image_info type="ext" />" />
</a>
</txp:images>

> Edit Jakob beat me to it with another method:)

Last edited by colak (2017-11-26 09:53:21)


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#4 2017-11-26 12:08:02

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,357
Website

Re: How to build a Gallery

jacob With magnetic popup, I use a data-@ attribute instead of title on the <a href>. It is slightly better for accessibility (syntax based on their docs iirc). For the rest, same markup (sprinkled with a touch of srcset="").

<a href="<txp:image_url />" class="image-gallery-link image-lightbox" data-caption="<txp:image_info type='caption' />">

and in the script:

 image: {
    titleSrc: function (item) {
      return item.el.attr('data-caption') + '<small>by me</small>';
      },
      cursor: 'mfp-zoom-out-cur',
  }

Where is that emoji for a solar powered submarine when you need it ?

Offline

#5 2017-11-26 14:07:08

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

Re: How to build a Gallery

Also will I be able to use pagination within the gallery?

I want to say thank you all for helping me and TXP community for awesome support.

Last edited by code365 (2017-11-26 17:16:52)

Offline

#6 2018-02-02 19:22:46

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 243

Re: How to build a Gallery

Yes, you can use the etc_pagination plugin and works fine :-)

<txp:etc_pagination prev="Previous" next="Next" range="3" wraptag="ul" break="li" />

Offline

#7 2021-04-14 07:19:21

John-Paul F
Member
Registered: 2021-03-15
Posts: 16
Website Twitter

Re: How to build a Gallery

Question from a beginner with galleries, eager to create a slideshow and / or lightbox…

Can you take me back a step or two.

From what I understand, I need to somehow install either lightbox-2 or magnific within my Textpattern site.

I’m not sure how I do that. Is there a Textpattern plugin?

And then I need to put some Txp or HTML into the header for the page I create to display lightboxes…? And something else?


Strictly Amateur

Offline

#8 2021-04-14 11:19:12

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,395
Website Twitter

Re: How to build a Gallery

Hi John-Paul

For installing this kind of scripts (lightbox, magnific popup) you need to download those script and upload them to you textpattern website in a directory (ex: /script/ or /js or whatever you shoose) by using ftp and then add the script call (js and css files) in the header of your website and then add the coresponding htlm code (like those shown in this thread) to your page.

I dont know how familiar you are with textpattern but if it s not clear try to ask more precise question and we will try to tell you how to do.

Cheers.

Offline

#9 2021-04-14 12:39:34

John-Paul F
Member
Registered: 2021-03-15
Posts: 16
Website Twitter

Re: How to build a Gallery

Dragondz wrote #329817:

you need to download those script and upload them to you textpattern website in a directory (ex: /script/ or /js or whatever you shoose) by using ftp and then add the script call (js and css files) in the header of your website

Hi Dragondz, thank you. I think I understand, but worth checking…

As they are not Txp plugins, presumably I don’t try to upload them as such, but instead upload them into a new directory in my site’s textpattern folder, alongside admin-themes, include, lang and so on…?

Happily I do know how to create that kind of folder, and will go ahead if I’ve understood correctly!

I also know how to access and edit the header of my site, but not sure where to put the script calls in that header form, and what do they actually look like?

I’m sorry if this is painfully elementary.


Strictly Amateur

Offline

#10 2021-04-14 14:20:53

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,615
Website GitHub Twitter

Re: How to build a Gallery

John-Paul F wrote #329818:

Hi Dragondz, thank you. I think I understand, but worth checking…

As they are not Txp plugins, presumably I don’t try to upload them as such, but instead upload them into a new directory in my site’s textpattern folder, alongside admin-themes, include, lang and so on…?

Happily I do know how to create that kind of folder, and will go ahead if I’ve understood correctly!

I also know how to access and edit the header of my site, but not sure where to put the script calls in that header form, and what do they actually look like?

I’m sorry if this is painfully elementary.

It is best to upload them in a folder outside of txp’s structure. ie, create a folder and call it js, in the home directory of your site and upload the javascripts there.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#11 2021-04-14 14:25:19

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,395
Website Twitter

Re: How to build a Gallery

Hi,

The directory dont need to be inside textpattern folder it needs only to be on your server directory because you need to imclude them in the page template, check their doc and you will see that you need to add something like this on the head of your html :

<link href="/slick/slick.css" rel="stylesheet" />
<script src="/slick/slick.min.js"></script>

Ex: slick script i use in my website i put the files in a slick folder at the root of my html folder (same level as index.php and css.php).
For js script check if they use Jquery if yes you must add the <script … .js”></script> after the jquery insertion.

After that you can use their declaration to make it work, try their simple example without using textpattern tag to check that the library is correctly loaded before going further.

I’m sorry if this is painfully elementary.

Dont worry we all began somewhere.

Cheers.

Offline

Board footer

Powered by FluxBB