Create images page with captions

zero · 2012-06-01 12:03:03

So in an article I have various text plus thumbnails. I don’t want to open the images in the same page for size and space reasons. I can use Shadowbox et al to open the image in an overlay above the same page. This works well and I can use the title to show text with the image. However, it does not work well on touch screens or small devices. Navigation is iffy, the overlay position is iffy and using the devices’ ‘back’ button takes me away from the article as well as the image. Basically, shadowbox has to be disabled for small devices.

Is there a way to click a thumbnail and be taken to a dedicated images page which shows the image and caption? In other words, clicking the thumbnail would populate the dedicated images page with the image and caption related to the thumbnail, and nothing else. Is it possible therefore to either create temporary pages on the fly (for example like shadowbox but in a separate page) or have one such dedicated page and get TXP to display varying images and caption dependent on the thumbnail?

Advantages of a separate page are that display and navigation should work on all devices and the page can be styled any way that is best.

Last edited by zero (2012-06-01 12:09:00)

joebaich · 2012-06-01 13:13:40

I have been using touch enabled jQuery galleries in the same situation.

PhotoSwipe is the best one I have come across but Royal Slider and Touch-Gallery and, no doubt, others too are worth a look.

These don’t quite have the polish of Pirobox or Fancybox on a desktop screen and if that’s a problem it isn’t too difficult to use both types by hiding the inappropriate set of linked thumbnails and showing the appropriate set using media queries for instance. I’m sure one could use adi_mobile to do something similar too.

zero · 2012-06-01 14:10:30

Thanks for those, Joe, I’ll check them out over the weekend. I’d love to do it with TXP though if possible.

jakob · 2012-06-01 17:59:11

I’ve also used RoyalSlider in the past and it works well. It’s not free but inexpensive.

Another approach might be to use modernizr in combination with yepnope (now part of modernizr) to detect if the device/browser supports touch events (or is a mobile device) and only enable shadowbox where needed.

There’s some debate on whether it’s best to detect touch event capability or a mobile device as both are moving targets – the mobile landscape is not static so detection scripts quickly go out of date, and touch event capability may be supported by new browsers although the user may actually be using a mouse, plus there are likely to be large-screen touch devices). Anyway, you can find an open-source ismobile detection script here.

For all of that, you need to make sure in txp that your image pages load in a new page when you’ve not got shadowbox loaded (e.g. deactivate it temporarily to test, or deactivate javascript entirely with the browser).

zero · 2012-06-01 18:29:55

Jakob and Joe, I’ll explore those but I’m thinking along different lines, hence my original question. Perhaps this will clarify it:

I can click a thumbnail and be taken to the full size image by using image_url. A page such as mysite.com/images/25.png tends to show up well in most devices as even very large images are resized automatically by the devices. You can also use the ‘back’ button to return to the thumbnail page. If I could add captions (not just short titles but a few hundred characters of text sometimes) that would be great but of course I can’t. So how can I click the thumbnail and be taken to a basic html page with the image and the image info?

I’m thinking it might be possible to have the link on the thumbnail target the destination page with added image id included in the url. Or the destination page to detect the referrer and relevant thumb somehow and produce the relevant image and caption using article custom or article. But perhaps that’s not possible?

maruchan · 2012-06-01 18:45:01

So how can I click the thumbnail and be taken to a basic html page with the image and the image info?

.htaccess redirects to a new section in your Textpattern site, which is using adi_gps to capture a URL variable that indicates which image to show. Then you customize from there. (Or just change the link so it’s not using the image URL but passing the image ID to a similar page to what I just described …)

Last edited by maruchan (2012-06-01 18:45:46)

zero · 2012-06-01 19:00:26

Adi to the rescue again! Thanks Marc, that sounds like the sort of thing I am looking for :-)

zero · 2012-06-04 16:28:46

It turned out easier than I thought to achieve what I wanted thanks to Marc pointing me in the right direction. For completeness and just in case there are other txp users, like myself, missing the coding chromosome, here is what I did. I should note that I have image categories with the same names as article titles. I also used the adi_gps plugin.

In an article form, I created my list of thumbnails and put links on them to take me to the newly created photos section page. ?pic and ?cat pass the image ID and category to the photos page.

<txp:images sort="id asc" break="" category='<txp:article_url_title />'>
  <txp:if_different>
<a href="<txp:site_url />photos/?pic=<txp:image_info type="id" />&cat=<txp:article_url_title />"><txp:thumbnail /></a>
  </txp:if_different>
</txp:images>

adi_gps extracts the ID and category values from the url and turns them into variables that can be used to display the image and image info desired.

<txp:adi_gps name="pic,cat" />
  <txp:images id='<txp:variable name="pic" />' category='<txp:variable name="cat" />'>
<div><p><txp:image_info type="caption" /></p><txp:image /></div>
  </txp:images>

That’s it! Navigation relies on the browser’s ‘back’ button but the image and caption are accessible on all devices. To improve navigation a link can be added to return to the article page that has the thumbnails:

<a href="<txp:php> echo $_SERVER['HTTP_REFERER'];</txp:php>">Back</a>

People are now used to sites with one-click nav between photos so this is how I added that navigation. I had to use adi_calc and smd_lately plugins so probably not the most efficient way to do it?

<txp:images limit="1" id='<txp:variable name="pic" />' category='<txp:variable name="cat" />'>
  <div><p class="imgnav">
      <txp:variable name="pid" value='<txp:image_info type="id" />' />
<a class="prev" href="<txp:site_url />photos/?pic=<txp:adi_calc name="pid" display="1" subtract="1" />&cat=<txp:variable name="cat" />"><txp:image id="20" /></a> 
      <txp:smd_lately exclude="host:like:photos" by="" wraptag="" break="span" limit="1">
<txp:permlink><txp:image id="21" /></txp:permlink>
      </txp:smd_lately>
      <txp:variable name="pid" value='<txp:image_info type="id" />' />
<a class="next" href="<txp:site_url />photos/?pic=<txp:adi_calc name="pid" display="1" add="1" />&cat=<txp:variable name="cat" />"><txp:image id="22" /></a>
  </p>
  <p><txp:image_info type="caption" /></p>
      <txp:image />
  </div>
</txp:images>

The previous and next use adi_calc to subtract or add 1 to the current image ID. If the images are not consecutive you’d have to return to your thumbnails page to see them all. Returning directly to the thumbnail page was the bit I found the trickiest because the php referrer option only shows the previous url. I guess if adi-gps would retrieve the page_url variable and store it semi-permanently until the photos page is accessed again from another non-photos page, then that would work but I have no idea if that is feasible. Perhaps you guys have an answer? smd_lately has to have visitor logs fully on which can slow the site down a bit.

Anyway, thanks for the replies to my question all, and thanks to the plugin authors. I’ve now got a more accessible and future proof way of displaying images which I can style to my heart’s content. It doesn’t have the pzazz of shadowbox, fancybox, royal slider etc but it works and looks fine and it’s all Textpattern :-)

zero · 2012-06-07 18:45:14

Thanks to help in the adi_gps thread and much trial and error, I have somehow managed to make the nav in the above solution work without using smd_lately and so no longer need Visitor Logs to be on.

In the above, replace <txp:smd_lately ...(snipped)... </txp:smd_lately> with the following:

<txp:variable name="thumbspage" value='<txp:php>echo $_COOKIE["richtea"];</txp:php>' />
     <a href="http://mysite.com<txp:variable name="thumbspage" />"><txp:image id="21" /></a>

As you see, it requires a cookie. Set cookies on pages with thumbnails right at the beginning of the page template like so:

<txp:php>$expire=time()+60*60*1*1;$page_url = $_SERVER['REQUEST_URI'];
 setcookie("richtea", $page_url, $expire,"/photos/","mysite.com");</txp:php>

This tells the cookie to grab the page url and pass the richtea cookie to the photos section of the site where the value can be used in a link to return to the thumbs page relevant to the photos that are being displayed and navigated. (and not just return to the previous (photos) page)

Any advice on improving this code would be most welcome.

etc · 2012-06-07 19:42:01

I would escape $_COOKIE["richtea"] with htmlspecialchars before Gocom spots it:-)

For the navigation, rather than guessing +/- 1, create a variable with true image links, like

<txp:variable name="imgnav">
  <txp:images sort="id asc" break="" category='<txp:variable name="cat" />'>
    <a href='<txp:site_url />photos/?pic=<txp:image_info type="id" />&cat=<txp:variable name="cat" />' data-id='<txp:image_info type="id" />'><txp:thumbnail /></a>
  </txp:images>
</txp:variable>

Then let etc_query find the prev/next image:

<txp:etc_query data='<txp:variable name="imgnav" />'
  query="a[@data-id='{?pic}']">
    {preceding-sibling::a[1]}
    {following-sibling::a[1]}
</txp:etc_query>

If it works, you could style the navigation links to your liking (and actually do it all with etc_query sole).

zero · 2012-06-07 20:50:15

etc, that’s great! It will take me some time to absorb how it all works and to understand all about your plugin and how it can be used for styling etc. But thanks so much for solving the non-consecutive images problem that would undoubtably occurred at some point.

Escaping htmlspecialchars is also something completely new to me, I’ve such a lot to learn! Is this what you mean echo htmlspecialchars($_COOKIE["richtea"]); or is there more to it than that?

Last edited by zero (2012-06-07 21:09:27)

etc · 2012-06-08 08:33:01

Nice if it works, feel free to contact me if you need help.

For the cookie, the problem is that it is sent by the client, so can contain what you do not expect, including php code. So it will not hurt to pass it through strip_tags or htmplspecialchars. But what is its purpose, anyway? If you only want to strip ?cat and ?pic from the url, do it with etc_url:

<a href='<txp:etc_url query="cat&pic" />'><txp:image id="21" /></a>

Otherwise, the cookie solution is not very reliable anyway, since visitors can reach image pages without passing by thumbnails.

Textpattern CMS

Textpattern CMS support forum

#1 2012-06-01 12:03:03

Create images page with captions

#2 2012-06-01 13:13:40

Re: Create images page with captions

#3 2012-06-01 14:10:30

Re: Create images page with captions

#4 2012-06-01 17:59:11

Re: Create images page with captions

#5 2012-06-01 18:29:55

Re: Create images page with captions

#6 2012-06-01 18:45:01

Re: Create images page with captions

#7 2012-06-01 19:00:26

Re: Create images page with captions

#8 2012-06-04 16:28:46

Re: Create images page with captions

#9 2012-06-07 18:45:14

Re: Create images page with captions

#10 2012-06-07 19:42:01

Re: Create images page with captions

#11 2012-06-07 20:50:15

Re: Create images page with captions

#12 2012-06-08 08:33:01

Re: Create images page with captions

Board footer