Een tijd geleden kwam ik wat USB-sticks en oude harde schijven tegen met digitale foto's. Ik maak nog wel eens wat foto's, maar die blijven dan op een schijfje staan, de enige foto's die ik laat afdrukken zijn de vakantiefoto's. Nu kun je de foto's op Flickr of Instagram zetten, maar omdat ik weet dat je met Coppermine Photo Gallery zelf je online albums kunt maken (een vrij te gebruiken PHP-pakket) en ik al een aantal domeinen met flink wat webruimte heb, het besluit genomen om zelf een omgeving op te zetten: https://album.dirkhornstra.nl/ Elk jaar pak ik er de mooiste foto's uit en die zet ik dan op mijn Instagram online als " beste foto's van vorig jaar".
Wil je er zelf mee aan de slag gaan, je kunt de installatiebestanden hier downloaden: link
Ik had er al ervaring mee (op wergea.com gebruiken we het ook) en ik was niet tevreden hoe het werkt/eruit ziet. Het ziet er wel erg Windows-XP uit. Een mooie case, gekeken hoe het ontwerp bij Instagram er ongeveer uit ziet en zelf een thema aangemaakt. Zo begin je ook te begrijpen hoe de code werkt. Eerst bootstrap gedownload. Vervolgens onder de /themes-map je eigen map aanmaken.
De basis van de site is template.html. Zoals het al zegt, puur HTML. Je kunt er dus geen PHP-functies in plaatsen!
Er wordt gewerkt met zoek-en-vervang codes. Je ziet dus {TITLE}, {META}, dat wordt in de code allemaal vervangen.
Die code, dat is je "theme.php" bestand. Daar voer je dus de query's uit op de albums, "pictures" en andere tabellen.
Dat ging allemaal goed, alleen werd mijn lijst met albums wel steeds langer. In gallerylist.php laad je alle albums in.
Niet echt handig, vooral niet als je de boel via je mobiel gaat bekijken. Dus ik wilde via een "sticky footer" 3 knoppen tonen, de eerste om de foto's van het huidige jaar te tonen (wat ook de standaardlijst nu moet tonen) en de knoppen "jaar terug" en "jaar vooruit". Die sticky footer had ik er met bootstrap in no-time in staan door het onderstaande in template.html toe te voegen:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation" id="bottommenu">
<div class="col-lg-4"></div>
<div class="container col-lg-4">
<div class="col-xs-4 bottombutton">
<a href="/?year={INSTADOTK_CURRENTYEAR}" title="Huidig jaar">
<span class="glyphicon glyphicon-calendar"></span><span class="hidden-xs-down"> Huidig jaar</span>
</a>
</div>
<div class="col-xs-4 bottombutton">
<a href="/?year=minus" title="Jaar terug">
<span class="glyphicon glyphicon-arrow-left"></span><span class="hidden-xs-down"> Jaar terug</span>
</a>
</div>
<div class="col-xs-4 bottombutton">
<a href="/?year=add" title="Jaar erbij">
<span class="glyphicon glyphicon-arrow-right"></span><span class="hidden-xs-down"> Jaar vooruit</span>
</a>
</div>
</div>
<div class="col-lg-4"></div>
</nav>
En in theme.php toe te voegen:
function pagefooter(){...
...
$template_vars = array(
...
'{INSTADOTK_CURRENTYEAR}' => date('Y')
);
...
Dat was het makkelijke deel. Dan komt het moeilijke deel. Want we moeten dus gaan afvangen wat in de year-querystring mee gegeven wordt. Coppermine vangt alles af en ruimt de boel op, dus in je $_GET of $_REQUEST zul je niets meer vinden. Even kijken in de index.php in de root, ik zie dat daar een object $superCage wordt gebruikt, die bevat de zaken die je nodig hebt. Dan gaan we de boel maar in een cookie opslaan, zo houden we de waardes vast.
In theme.php heb ik bovenin de volgende code toegevoegd:
function dotk_checkRequest()
{
global $CONFIG;
global $superCage;
global $_COOKIE;
$cookieName = $CONFIG['cookie_name'].'_instadotk_year';
$selectedYear = date('Y');
if ($superCage->cookie->keyExists($cookieName)) {
$selectedYear = $superCage->cookie->getInt($cookieName);
}
if ($superCage->get->keyExists('year')) {
$yearGetStr = $superCage->get->getRaw('year');
$yearGetInt = $superCage->get->getInt('year');
switch ($yearGetStr){
case "minus":
$selectedYear--;
break;
case "add":
$selectedYear++;
break;
default:
if (($yearGetInt > 1900)&&($yearGetInt <= (date('Y')+5))){
$selectedYear = $yearGetInt;
}
break;
}
setcookie($cookieName, $selectedYear, time() + (CPG_DAY*1), $CONFIG['cookie_path']);
header("Location: /");
}
}
dotk_checkRequest();
Vervolgens moeten we het jaartal af gaan vangen in de gallerylist.php:
global $superCage;
global $_COOKIE;
$cookieName = $CONFIG['cookie_name'].'_instadotk_year';
$selectedYear = date('Y');
if ($superCage->cookie->keyExists($cookieName)) {
$selectedYear = $superCage->cookie->getInt($cookieName);
}
Vervolgens kunnen we in de query het jaar gebruiken (ik geef de categorie waar een album in zit als naam het jaartal, dus ik kan daar op filteren).
Het heeft een paar uurtjes gekost, maar ik heb nu een werkend footer-menu waar ik makkelijk mee kan bladeren!