Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2012-06-14 13:50:19
- txpdevcoder
- Member
- Registered: 2012-06-07
- Posts: 58
Collapsible Archive Tree
HI,
In trying to build a collapsable side bar widget that is a tree of all the articles on the site, grouped into year > month > article link, with number of articles displayed beside the months, as nested lists. Im aiming for something like the one on this website (you will need to scroll down the page a bit and find the Blog Archive widget on the right hand side) http://theowlandtheaccordion.blogspot.co.uk/
Can anyone give some pointers as to how to do this? i think i need to use if_different but its a bit confusing.
Thanks,
James
Offline
Re: Collapsible Archive Tree
would this be of help?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#3 2012-06-14 15:43:27
- txpdevcoder
- Member
- Registered: 2012-06-07
- Posts: 58
Re: Collapsible Archive Tree
thanks for the pointer – looks like a lot of code though! Plus the demo site doesnt have enough data in it for me to really see if the end result is what i am after.
I essentially want generate this structure as nested lists, with the number of articles in brackets:
- 2012 (6)
- June (3)
- June Article Link
- June Article Link
- June Article Link
- July (3)
- July Article Link
- July Article Link
- July Article Link
- June (3)
- 2011 (4)
- April (1)
- April Article Link
- May (3)
- May Article Link
- May Article Link
- May Article Link
- April (1)
Does anyone have a simple way to achieve this?
Ta!
Last edited by txpdevcoder (2012-06-14 15:47:41)
Offline
Re: Collapsible Archive Tree
Hi James
There is upm_date archive but I’m not sure if it is going to work in txp’s next release. There are also some pointers in txptips. I’m not sure if there is anything simpler.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#5 2012-06-14 16:13:32
- txpdevcoder
- Member
- Registered: 2012-06-07
- Posts: 58
Re: Collapsible Archive Tree
I looked through TXPTips, and there was nothing like this on there I think i was misleading by calling it an archive widget. Although it will be titled archive, it will show all the articles on the site, not just ones in the archive section.
Ill keep playing around and see what i can come up with, but if anyone has any ideas, please share! If i manage it, ill post it here and on TXP Tips.
Last edited by txpdevcoder (2012-06-14 16:29:07)
Offline
Re: Collapsible Archive Tree
This is much shorter, but it lacks article counts:
<txp:variable name="archive">
<ul class="dummy"><ul>
<txp:article_custom sort="Posted DESC" limit="999">
<txp:if_different></ul></ul><li><txp:posted format="%Y" /></li><ul><ul class="dummy"></txp:if_different>
<txp:if_different></ul><li><txp:posted format="%b" /></li><ul></txp:if_different>
<li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom>
</ul></ul>
</txp:variable>
<txp:etc_query data='<txp:variable name="archive" />'
query="." wraptag="ul" replace="//ul[@class='dummy']">
{node()}
</txp:etc_query>etc_query plugin is needed here to remove empty items from the list.
Edit: in fact, etc_query is not necessary, <style>.dummy{display:none}</style> will suffice.
Last edited by etc (2012-06-14 17:18:59)
Offline
Re: Collapsible Archive Tree
Or use this plugin-less solution, but it lacks also the article count:
<txp:article_custom sort="Posted desc" limit="99999" wraptag="ul" break="" class="archive">
<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
<txp:variable name="month" value='<txp:if_different><txp:posted format="%B" /></txp:if_different>' />
<txp:if_variable name="year" value=""><txp:else />
<txp:if_first_article><txp:else />
</ul>
</li>
</ul>
</txp:if_first_article>
<li><h2><txp:posted format="%Y" /></h2>
<ul>
</txp:variable>
<txp:if_variable name="month" value=""><txp:else />
<txp:if_variable name="year" value="">
</ul>
</li>
<txp:else /></txp:if_variable>
<li><h3><txp:posted format="%B" /></h3>
<ul>
</txp:variable>
<li><txp:posted />: <txp:permlink><txp:title /></txp:permlink></li>
<txp:if_last_article></ul></li></ul></txp:if_last_article>
</txp:article_custom>Offline
#8 2012-06-15 09:05:45
- txpdevcoder
- Member
- Registered: 2012-06-07
- Posts: 58
Re: Collapsible Archive Tree
Thanks trenc. Thats a very good start. Would you care to explain the code a little bit… i think i can see whats going on but it could do with some comments in the code.
:)
Offline
Re: Collapsible Archive Tree
To get monthly counts, you can postpone the articles output to the end of month, storing them in some variable (here monthly) and counting them afterwards with etc_query:
<txp:article_custom sort="Posted desc" limit="99999" wraptag="ul" break="" class="archive">
<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
<txp:variable name="month" value='<txp:if_different><txp:posted format="%Y-%b" /></txp:if_different>' />
<txp:if_variable name="month" value=""><txp:else />
<txp:if_first_article><txp:else />
(<txp:etc_query data='<txp:variable name="monthly" />' query="li" limit="1">{#total}</txp:etc_query>)
<ul><txp:variable name="monthly" /></ul>
</li>
</txp:if_first_article>
<txp:if_variable name="year" value=""><txp:else />
<txp:if_first_article><txp:else />
</ul></li>
</txp:if_first_article>
<li><txp:posted format="%Y" />
<ul>
</txp:if_variable>
<li><txp:posted format="%b" />
<txp:variable name="monthly" value="" />
</txp:if_variable>
<txp:variable name="monthly">
<txp:variable name="monthly" />
<li><txp:permlink><txp:title /></txp:permlink></li>
</txp:variable>
<txp:if_last_article>
(<txp:etc_query data='<txp:variable name="monthly" />' query="li" limit="1">{#total}</txp:etc_query>)
<ul><txp:variable name="monthly" /></ul></li></ul>
</txp:if_last_article>
</txp:article_custom>This will be faster than making sql queries for each month. Following the same idea, you can get yearly counts.
Edit: and there are also client-side javascript solutions, with jQuery or such.
Last edited by etc (2012-06-16 10:30:14)
Offline
Re: Collapsible Archive Tree
And this is the most logical and complete solution, without any postponing, just DOM manipulation with etc_query (grab the latest version).
<txp:variable name="archive">
<txp:article_custom sort="Posted desc" limit="99999">
<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
<txp:variable name="month" value='<txp:if_different><txp:posted format="%Y-%b" /></txp:if_different>' />
<txp:if_first_article>
<year data-year='<txp:posted format="%Y" />'>
<month data-month='<txp:posted format="%b" />'>
<txp:else />
<txp:if_variable name="month" value=""><txp:else />
</month>
<txp:if_variable name="year" value=""><txp:else />
</year>
<year data-year='<txp:posted format="%Y" />'>
</txp:if_variable>
<month data-month='<txp:posted format="%b" />'>
</txp:if_variable>
</txp:if_first_article>
<li><txp:permlink><txp:title /></txp:permlink></li>
<txp:if_last_article>
</month></year>
</txp:if_last_article>
</txp:article_custom>
</txp:variable>
<txp:etc_query data='<txp:variable name="archive" />' query="year" wraptag="ul" break="li">
{@data-year?} ({count(month/li)})
<txp:variable name="yearly">
{month}
</txp:variable>
<txp:etc_query data='<txp:variable name="yearly" />' query="month" wraptag="ul" break="li">
{{@data-month?} ({{count(li)})
<ul>{{li}</ul>
</txp:etc_query>
</txp:etc_query>The double {{ is not a typo.
Offline
Re: Collapsible Archive Tree
Even more straightforward, with v. 0.96 of etc_query: construct the tree, with, say, empty span placeholders
<txp:variable name="archive">
<txp:article_custom sort="Posted desc" limit="99999">
<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
<txp:variable name="month" value='<txp:if_different><txp:posted format="%Y-%b" /></txp:if_different>' />
<txp:if_first_article>
<li><txp:posted format="%Y" /> (<span></span>)<ul>
<li><txp:posted format="%b" /> (<span></span>)<ul>
<txp:else />
<txp:if_variable name="month" value=""><txp:else />
</ul></li>
<txp:if_variable name="year" value=""><txp:else />
</ul></li>
<li><txp:posted format="%Y" /> (<span></span>)<ul>
</txp:if_variable>
<li><txp:posted format="%b" /> (<span></span>)<ul>
</txp:if_variable>
</txp:if_first_article>
<li class="article"><txp:permlink><txp:title /></txp:permlink></li>
<txp:if_last_article>
</ul></li></ul></li>
</txp:if_last_article>
</txp:article_custom>
</txp:variable>and finally count the number of articles (li[class=‘article’]@) in each span’s parent, and put it into placeholders:
<txp:etc_query data='<txp:variable name="archive" />' wraptag="ul" query="li" replace=".//span=$[{count(..//li[@class='article'])}]$"/>Last edited by etc (2012-06-17 16:25:40)
Offline
#12 2012-06-17 19:14:47
- txpdevcoder
- Member
- Registered: 2012-06-07
- Posts: 58
Re: Collapsible Archive Tree
wow! thanks etc, I will try this out and let you know what happened. I did look into getting the article as there are a couple of plugins that will display and article count, but they work by being told a section or catagory to count the articles in – which is no use for this! I had a feeling one of the SQL plugins would be of help here.
ive got trencs version working fine, and ive made it collapsable with jQuery, and it all works great but getting the article count in there too would be the icing on the cake :)
Thanks guys!
J
Last edited by txpdevcoder (2012-06-17 19:38:00)
Offline