Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2019-09-19 12:33:21

New Member
Registered: 2019-09-19
Posts: 1

changing article category on click

hey people,

i hope everyone will understand what my problem is since I’m a rather unprofessional programmer and searching for a solution to my problem for days now.

i’m writing the code for my website and using textpattern. I did a gallery of all my recent artworks and above 4 clickable images for different series of my drawings (recent drawings, figurative etc.)

i wrote a code in javascript, so when you click on one of the images for the series the gallery beneath changes, so that only the matching images of the series will show.

the problem: it doesnt work and i have no idea what to do to make it work.

to put it in simple words: is there a way to change the category attribute in:
<txp:article_custom form="default" category="" />
when you click an image (or link or whatever)

the code of this part of my site:
<div class="series">series</div>
<txp:images category="series-drawings" form="series" break="" sort="date desc"/>
<div class="recent"></div>
<div class="changing_gallery">
<txp:article_custom form="default" category="" section="<txp:section title="1"/>" />

the code of the form “default”:
<div class="article">
<txp:article_image width="0" height="0"/>
<div class="article-text">
<div class="title"><txp:title />
<div class="text"><txp:body/></div>

and the code of the javascript:

$(document).on('ready', function(){
var categoryDefault = 'recent';
$( ".recent" ).html(categoryDefault);
$( ".serie" ).click(function() {
var categoryNew = $(this).children().attr("title");
$( ".recent" ).html(categoryNew);

thanks in advance


#2 2019-09-19 13:55:07

Registered: 2010-11-11
Posts: 3,846

Re: changing article category on click

Hi, welcome to the forum.

tryingway2hard wrote #319327:

to put it in simple words: is there a way to change the category attribute in:
<txp:article_custom form="default" category="" />
when you click an image (or link or whatever)

Formally speaking, this is impossible, because txp tags are processed by the server (site host) and clicks happen on the client (browser) side. So you’d need either

  • send an AJAX request on click to retrieve the matching <img /> tags
  • or download all <img /> tags at once without displaying them, and then toggle their display on click, lazy-loading images if necessary.
  • or something similar.

Sorry, have no time for a complete solution atm.


#3 2019-09-19 14:03:40

From: Leeds, UK
Registered: 2006-01-29
Posts: 9,708

Re: changing article category on click

Just a thought: you could leverage Txp’s built-in category display for this. Upload your images and organize them into categories. Then, somewhere in your default Page template:

<!-- Display linkable list of all image categories -->
<txp:category_list type="image" />

<!-- If the URL is of type /category/image/ -->
<txp:if_category type="image">
   <h1 itemprop="name"><txp:category title /> drawings</h1>
   <div class="thumbs"><txp:images /></div>
   <div class="fullsize"><txp:image /></div>

When you visit the page, you’ll see a list of image categories. When you click one, you’ll get redirected to the category landing page for that category and a bunch of thumbnails will show up (courtesy of the <txp:images /> tag). When you click one, you’ll see the full size image beneath the thumbnails (courtesy of the <txp:image /> tag).

Style to taste with CSS.

Does that work? Depends if you need the articles to represent other metadat about your images or if you can shoehorn it all into the image metadata itself.

EDIT: If you’re uploading images and assigning them to an article, I have a plugin available that will read IPTC camera data and automatically create an article for each image you upload, pre-filling the image/article content from the metadata. Contact me, though, as it’s not officially released yet.

Last edited by Bloke (2019-09-19 14:05:57)

The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp


Board footer

Powered by FluxBB