Hello.
I'm making a custom theme (css) based upon "clear" theme.
I have this structure of galleries
galleries
----2012
-------Happy New Year photos
-------Birthday
-------Holidays
----2013
-------Happy New Year
-------Birthday
-------Holidays
----2014
-------Happy New Year
-------Birthday
-------Holidays
----2015
-------Happy New Year
-------Birthday
-------Holidays
And so on.
When you open the home page of Piwigo I see the thumbnails of 2012, 2013, 2014 and 2015
I modified the theme to show these years in one row per year instead of tiling.
The question:
It is possible to show the thumbnails of subcategories of every year in the main page in the below format? If yes which files I have to edit?
Current format:
[thumbnail of 2012]
[thumbnail of 2013]
[thumbnail of 2014]
[thumbnail of 2015]
What I would want:
[thumbnail of 2012][thumbnail of Happy New Year][thumbnail of Birthday][thumbnail of Holidays]
[thumbnail of 2013][thumbnail of Happy New Year][thumbnail of Birthday][thumbnail of Holidays]
[thumbnail of 2014][thumbnail of Happy New Year][thumbnail of Birthday][thumbnail of Holidays]
[thumbnail of 2015][thumbnail of Happy New Year][thumbnail of Birthday][thumbnail of Holidays]
Many thanks.
Offline
Hi there?
Please, I need help about this.
Offline
Hey there? So none can help me about this, including Piwigo devs?
Offline
This isn't easily doable by just editing a template. You need to get the required data in there first. Either by extending mainpage_categories.tpl and the data passed to it using PHP, or by creating a custom front page using Additional Pages plugin and some javascript code that interacts with the webservice API, something like ws.php?method=pwg.categories.getList&cat_id=0&recursive=true&tree_output=true&format=json gives a nice tree view that can be parsed easily.
If you can accept a "manually" created list, you can use "Additional Pages" in combination with "Extended Desciption" plugin's category thumbnail feature plus some CSS.
Offline
PS: here's a demo of using the webservice API using javascript/jQuery inside an Additional Pages page: https://pwgdemo.kuther.net/index/page/5 (the demo gallery just doesn't have enough sub-categories to show off here, only the landscape album)
Code used:
<style type="text/css"> .jumbotron { display: none; } #categories { display: none; } .thumbnail { float: left; margin-right: 10px; } </style> <h2>Category overview</h2> <p>This example shows a list of all categories and their sub-categories, using the webservice API. View the page's source code to see how it's done.</p> <div id="categories" class="container"> </div> <script type="text/javascript"> var pwg_api = "/ws.php?format=json"; $.getJSON(pwg_api + '&method=pwg.categories.getList&recursive=true&tree_output=true&thumbnail_size=square', function (json) { categories = json.result; $.each( categories, function ( i, cat ) { $('#categories').append('<div class="row"><div class="thumbnail" id="cat-' + cat.id + '"><img src="' + cat.tn_url + '"><div class="thumbnail-caption"><a href="' + cat.url + '">' + cat.name + '</a></div></div></div>'); if (cat.sub_categories) { sub_cats = cat.sub_categories; $.each( sub_cats, function ( y, sub_cat ) { $('#cat-' + cat.id).closest('.row').append('<div class="thumbnail" id="cat-' + sub_cat.id + '"><img src="' + sub_cat.tn_url + '"><div class="thumbnail-caption"><a href="' + sub_cat.url + '">' + sub_cat.name + '</a></div></div>'); }); } }); $('#categories').fadeIn(1000); }); </script>
The HTML code is a bit bootstrap specific.
Last edited by teekay (2017-03-06 13:28:29)
Offline
Thank you very much for your help :) much appreciated.
Offline