Skip to content

Instantly share code, notes, and snippets.

@Flobin

Flobin/article.php Secret

Last active August 6, 2018 11:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Flobin/643411d95facde2fb46a49c6d1229883 to your computer and use it in GitHub Desktop.
Save Flobin/643411d95facde2fb46a49c6d1229883 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
article.php
<article class="homepage-article <?= $article->project(); ?> grid-item" itemscope itemtype="http://schema.org/Article">
<div class="homepage-article-content">
<header class="homepage-article-header lightbox">
<a href="<?= $article->url() ?>" itemprop="url"><h2 class="h4 homepage-article-title" itemprop="name"><?= $article->title()->html() ?></h2></a>
<meta itemprop="datePublished" content="<?= $article->date() ?>">
<time class="homepage-article-date"><?= $article->date('d/m/Y') ?></time>
<?php if($article->showImage() != 'nee'): ?>
<?php if($article->hasImages()):
$images = $article->images()->sortBy('sort', 'asc');
$firstimage = $images->sortBy('sort', 'asc')->first(); ?>
<a href="<?= $firstimage->url(); ?>" data-caption="<?= $firstimage->alt()->html(); ?>" class="article-image-link first">
<figure class="homepage-article-image" itemprop="image">
<?= $firstimage->thumb(array('width' => 600)); ?>
</figure>
</a>
<?php foreach($images->not($firstimage) as $image):?>
<a href="<?= $image->url(); ?>" class="hidden" data-caption="<?= $image->alt()->html(); ?>">
<figure class="">
<?= $image->thumb(array('width' => 11)); ?>
</figure>
</a>
<?php endforeach; ?>
<?php elseif($article->image()):
$image = $article->image(); ?>
<a href="<?= $image->url(); ?>" data-caption="<?= $image->alt()->html(); ?>" class="article-image-link">
<figure class="homepage-article-image" itemprop="image">
<?= $image->thumb(array('width' => 600)); ?>
</figure>
</a>
<?php elseif($article->project() != ''):
$projectname = $article->project();
$image = page('projecten/' . $projectname)->images()->sortBy('sort', 'asc')->first();
if($image):?>
<a href="<?= $image->url(); ?>" data-caption="<?= $image->alt()->html(); ?>" class="article-image-link">
<figure class="homepage-article-image" itemprop="image">
<?= $image->thumb(array('width' => 600)); ?>
</figure>
</a>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
</header>
<section class="homepage-article-body" itemprop="articleBody">
<?= $article->richtext()->kirbytext(); ?>
</section>
<?php if($article->project() != ''): ?>
<nav class="homepage-article-link">
<a class="button" href="projecten/<?= $article->project(); ?>">meer <?= $article->project()->title(); ?> &rarr;</a>
</nav>
<?php endif; ?>
</div>
</article>
Raw
home-controller.php
<?php
// this is the controller which is actually named home.php
// https://getkirby.com/docs/cookbook/ajax-load-more
return function($site, $pages, $page) {
$articles = $page->children()->visible()->offset(14);
$count = $articles->count();
$more = false;
// check if the request is an Ajax request and if the limit and offset keys are set
if(r::ajax() && get('offset') && get('limit')) {
// convert limit and offset values to integer
$offset = intval(get('offset'));
$limit = intval(get('limit'));
// limit articles using offset and limit values
$articles = $articles->offset($offset)->limit($limit);
// check if there are more articles left
$more = $count > $offset + $limit;
// otherwise set the number of articles initially displayed
} else {
$offset = 14;
$limit = 4;
$articles = $articles->limit($limit);
$paginate = false;
}
return compact('offset', 'limit', 'articles', 'more', 'paginate');
};
Raw
home.js
var imagesLoaded = require('imagesloaded');
var Headroom = require('headroom.js');
// var tags = document.querySelectorAll('.homepage-article-tag');
// var showAll = document.querySelector('.show-all');
// colors of header and items in between news
var backgroundColors = ['pink','green','orange','dark-blue'];
// this is to show the header when you scroll past projects
var projects = document.querySelector('.home-projects');
var projectsPosition = 1200;
// load more with AJAX
var articlesContainer = document.querySelector('.content');
var limit = parseInt(articlesContainer.dataset.limit);
var page = articlesContainer.dataset.page + '/home.json'
var offset = limit;
var loadMoreButton = document.querySelector('.load-more');
var loadMoreData = {
'limit': limit,
'offset': offset
}
// resizes grid items so they fit content height
function resizeGridItem(item){
console.log('resizeGridItem');
var grid = document.querySelector('.grid');
var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
var content = item.querySelector('.homepage-article-content');
var rowSpan = Math.ceil((outerSize(content, 'height') + rowGap) / (rowHeight + rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}
function resizeAllGridItems(){
console.log('resizeAllGridItems');
var allItems = document.querySelectorAll('.grid-item');
forEach(allItems, function(index, element){
resizeGridItem(element);
});
}
function DOMContentLoaded() {
// console.log('DOMContentLoaded home.js');
// set background colors on items in between news
forEach(document.querySelectorAll('.random-background'), function(index, element){
var color = backgroundColors[Math.floor(Math.random()*backgroundColors.length)];
element.classList.add(color);
// console.log('applied '+color+' to '+element);
});
var color = backgroundColors[Math.floor(Math.random()*backgroundColors.length)];
document.querySelector('#home-header-img').classList.add(color);
// show items and resize once DOMContentLoaded
forEach(document.querySelectorAll('.grid-item'), function(index, element) {
element.classList.add('visible');
resizeGridItem(element);
});
//once images loaded, resize again just to make sure
imagesLoaded(articlesContainer, resizeAllGridItems);
// get projects position
if (projects) {
projectsPosition = projects.offsetTop + outerSize(projects, 'height');
}
// grab an element
var homeHeader = document.querySelector(".site-header");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(homeHeader, {
"offset": projectsPosition,
"tolerance": 10,
"classes": {
"initial": "top",
"pinned": "pinned",
"unpinned": "unpinned"
}
});
headroom.init();
// load more with AJAX
loadMoreButton.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
var params = 'limit=' + limit + '&offset=' + offset;
var getURL = page + '?' + params;
console.log('getURL: ' + getURL);
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var jsonResponse = xhr.responseText;
var data = JSON.parse(jsonResponse);
if(data.more == false) {
// hide button
console.log('no more');
}
// append new articles
console.log(data.html);
articlesContainer.insertAdjacentHTML('beforeend', data.html);
forEach(document.querySelectorAll('.grid-item'), function(index, element) {
element.classList.add('visible');
resizeGridItem(element);
});
// increase offset
console.log('the rest');
offset += limit;
resizeAllGridItems;
}
};
xhr.open('GET', getURL);
xhr.send();
}, false);
}
document.addEventListener('DOMContentLoaded', DOMContentLoaded);
// resize items when window changes size
window.addEventListener("resize", resizeAllGridItems);
// forEach for nodes
function forEach(array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// size of elements
function outerSize(el,direction) {
var height = el.offsetHeight;
var width = el.offsetWidth;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
if (direction === 'height') {
return height;
} else if (direction === 'width') {
return width;
}
}
Raw
home.json
{"html":"<article class=\"homepage-article coolhouse grid-item\" itemscope itemtype=\"http:\/\/schema.org\/Article\">\n <div class=\"homepage-article-content\">\n <header class=\"homepage-article-header lightbox\">\n <a href=\"http:\/\/localhost:8888\/home\/coolhouse-bouw-update\" itemprop=\"url\"><h2 class=\"h4 homepage-article-title\" itemprop=\"name\">Coolhouse bouw update<\/h2><\/a>\n <meta itemprop=\"datePublished\" content=\"1512950400\">\n <time class=\"homepage-article-date\">11\/12\/2017<\/time>\n\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171211-coolhouse-bouw-update\/coolhouse_update_6.jpg\" data-caption=\"\" class=\"article-image-link first\">\n <figure class=\"homepage-article-image\" itemprop=\"image\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/coolhouse-bouw-update\/coolhouse_update_6-600x800.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171211-coolhouse-bouw-update\/Coolhouse_update_0.jpg\" class=\"hidden\" data-caption=\"\">\n <figure class=\"\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/coolhouse-bouw-update\/coolhouse_update_0-11x8.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171211-coolhouse-bouw-update\/Coolhouse_update_1.jpg\" class=\"hidden\" data-caption=\"De structuur van het gebouw wordt langzaam zichtbaar.\">\n <figure class=\"\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/coolhouse-bouw-update\/coolhouse_update_1-11x8.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171211-coolhouse-bouw-update\/Coolhouse_update_2.jpg\" class=\"hidden\" data-caption=\"Eerste verdiepingsvloer toren in voorbereiding\">\n <figure class=\"\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/coolhouse-bouw-update\/coolhouse_update_2-11x9.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171211-coolhouse-bouw-update\/Coolhouse_update_3.jpg\" class=\"hidden\" data-caption=\"Eerste &lsquo;grote&rsquo; Balqoon&reg; elementen (3m bij 8m) zijn geproduceerd.\">\n <figure class=\"\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/coolhouse-bouw-update\/coolhouse_update_3-11x8.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171211-coolhouse-bouw-update\/Coolhouse_update_5.jpg\" class=\"hidden\" data-caption=\"De eerste hoekschuifpui zonder hoekstijl voor het Coolhouse is geproduceerd. Mooi stukje vakwerk uitgevoerd in de Reynaers CP155-LS in goud geanodiseerd, zelfs het beslag is in deze kleur uitgevoerd!\">\n <figure class=\"\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/coolhouse-bouw-update\/coolhouse_update_5-11x8.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <\/header>\n\n <section class=\"homepage-article-body\" itemprop=\"articleBody\">\n <p>De bouw van het Coolhouse loopt voorspoedig. Op dit moment is men bezig met de ruwbouw. De twee stalling garages zijn gereed en er is begonnen met de verdiepingen van de toren.\u00a0<\/p> <\/section>\n\n <nav class=\"homepage-article-link\">\n <a class=\"button\" href=\"projecten\/coolhouse\">meer coolhouse &rarr;<\/a>\n <\/nav>\n <\/div>\n<\/article>\n<article class=\"homepage-article Werf07 grid-item\" itemscope itemtype=\"http:\/\/schema.org\/Article\">\n <div class=\"homepage-article-content\">\n <header class=\"homepage-article-header lightbox\">\n <a href=\"http:\/\/localhost:8888\/home\/stem-op-davl-studio\" itemprop=\"url\"><h2 class=\"h4 homepage-article-title\" itemprop=\"name\">WERF07<\/h2><\/a>\n <meta itemprop=\"datePublished\" content=\"1513036800\">\n <time class=\"homepage-article-date\">12\/12\/2017<\/time>\n\n <a href=\"http:\/\/localhost:8888\/content\/home\/20171212-stem-op-davl-studio\/05_Werf07.jpg\" data-caption=\"\" class=\"article-image-link first\">\n <figure class=\"homepage-article-image\" itemprop=\"image\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/stem-op-davl-studio\/05_werf07-600x881.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <\/header>\n\n <section class=\"homepage-article-body\" itemprop=\"articleBody\">\n <p>In 2017 is na een grote inspanning de WERF07 opgeleverd. Het project telt 20 unieke maatwerk woningen en 15 bedrijfsunits. Het project is de voorloper geweest van de verdere ontwikkeling op het voormalige Norfolkterrein.\u00a0<\/p> <\/section>\n\n <nav class=\"homepage-article-link\">\n <a class=\"button\" href=\"projecten\/Werf07\">meer Werf07 &rarr;<\/a>\n <\/nav>\n <\/div>\n<\/article>\n<article class=\"homepage-article trix grid-item\" itemscope itemtype=\"http:\/\/schema.org\/Article\">\n <div class=\"homepage-article-content\">\n <header class=\"homepage-article-header lightbox\">\n <a href=\"http:\/\/localhost:8888\/home\/tender-trix\" itemprop=\"url\"><h2 class=\"h4 homepage-article-title\" itemprop=\"name\">Tender TRIX<\/h2><\/a>\n <meta itemprop=\"datePublished\" content=\"1513123200\">\n <time class=\"homepage-article-date\">13\/12\/2017<\/time>\n\n <a href=\"http:\/\/localhost:8888\/content\/projecten\/7-trix\/Trix_01.jpg\" data-caption=\"\" class=\"article-image-link\">\n <figure class=\"homepage-article-image\" itemprop=\"image\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/projecten\/trix\/trix_01-600x400.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <\/header>\n\n <section class=\"homepage-article-body\" itemprop=\"articleBody\">\n <p>Samen met eindgebruikers heeft DAVL Studio een visie ontwikkeld voor een maritiem bedrijfsverzamelgebouw te Scheveningen. Hiermee wordt de lokale bedrijvigheid behouden en gestimuleerd.\u00a0<\/p> <\/section>\n\n <nav class=\"homepage-article-link\">\n <a class=\"button\" href=\"projecten\/trix\">meer trix &rarr;<\/a>\n <\/nav>\n <\/div>\n<\/article>\n<article class=\"homepage-article bommerig grid-item\" itemscope itemtype=\"http:\/\/schema.org\/Article\">\n <div class=\"homepage-article-content\">\n <header class=\"homepage-article-header lightbox\">\n <a href=\"http:\/\/localhost:8888\/home\/fantastisch-uitzicht\" itemprop=\"url\"><h2 class=\"h4 homepage-article-title\" itemprop=\"name\">Villa Bommerig - Fantastisch uitzicht<\/h2><\/a>\n <meta itemprop=\"datePublished\" content=\"1524614400\">\n <time class=\"homepage-article-date\">25\/04\/2018<\/time>\n\n <a href=\"http:\/\/localhost:8888\/content\/home\/20180425-fantastisch-uitzicht\/bommerig_uitzicht.jpg\" data-caption=\"\" class=\"article-image-link first\">\n <figure class=\"homepage-article-image\" itemprop=\"image\">\n <img src=\"http:\/\/localhost:8888\/thumbs\/home\/fantastisch-uitzicht\/bommerig_uitzicht-600x443.jpg\" alt=\"\"> <\/figure>\n <\/a>\n <\/header>\n\n <section class=\"homepage-article-body\" itemprop=\"articleBody\">\n <p>De omlijsting van de omgeving wordt van binnen langzaam zichtbaar.\u00a0<\/p> <\/section>\n\n <nav class=\"homepage-article-link\">\n <a class=\"button\" href=\"projecten\/bommerig\">meer bommerig &rarr;<\/a>\n <\/nav>\n <\/div>\n<\/article>\n","more":false}
Raw
home.json.php
<?php
$html = '';
foreach($articles as $article) {
// reuse the article snippet to create the HTML for each article
// we need to set the third parameter to true, to return the
// snippet content instead of echoing it
$html .= snippet('article', compact('article'), true);
}
// add $html and $more to the $data array
$data['html'] = $html;
$data['more'] = $more;
// JSON encode the $data array
echo json_encode($data);
Raw
home.php
<?php snippet('header') ?>
<main class="main content grid" role="main" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php $firstarticles = page('home')->children()->visible()->flip()->limit(10);
//this is the homepage template
// the below is used when pagination is used
// $rest = page('home')->children()->visible()->flip()->offset(10)->paginate(4);
// $pagination = $rest->pagination();
// if($pagination->isFirstPage()):
// snippet('homepage_firstpage', array('articles' => $firstarticles));
// endif;
snippet('homepage_firstpage', array('articles' => $firstarticles));
foreach($articles as $article):
snippet('article', array('article' => $article));
endforeach; ?>
<button class="button load-more">meer berichten</button>
</main>
<?php snippet('footer') ?>
Raw
homepage_firstpage.php
<?php $first_set = $articles->limit(2);
$second_set = $articles->offset(2)->limit(2);
$third_set = $articles->offset(4)->limit(2);
$fourth_set = $articles->offset(6)->limit(2);
$fifth_set = $articles->offset(8)->limit(2);
foreach($first_set as $article):
snippet('article', array('article' => $article));
endforeach ?>
<article class="article grid-item home-projects">
<div class="homepage-article-content">
<a href="/projecten"><h2 class="h4">Projecten</h2></a>
<section class="home-projects-list">
<?php $projects = page('projecten')->children()->visible()->filterBy('hasImages', true)->shuffle()->limit(16);
foreach($projects as $project): ?>
<a href="/projecten" class="home-project-link">
<img src="<?= $project->images()->sortBy('sort', 'asc')->first()->thumb(array('width' => 150, 'crop' => true))->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="home-project-image" />
</a>
<?php endforeach; ?>
</section>
<nav class="homepage-article-link">
<a href="/projecten" class="button">meer projecten &rarr;</a>
</nav>
</div>
</article>
<?php foreach($second_set as $article):
snippet('article', array('article' => $article));
endforeach ?>
<article class="homepage-article grid-item about">
<div class="homepage-article-content">
<h2 class="h4">Over DAVL Studio</h2>
<section class="about random-background">
<?= kirbytext($page->about()) ?>
</section>
<nav class="homepage-article-link">
<a class="button" href="over">meer over DAVL Studio &rarr;</a>
</nav>
</div>
</article>
<?php foreach($third_set as $article):
snippet('article', array('article' => $article));
endforeach ?>
<article class="homepage-article grid-item instagram">
<div class="homepage-article-content">
<h2 class="h4">Instagram</h2>
<a href="//instagram.com/davlstudio">
<figure class="homepage-article-image">
<img src="/assets/build/img/instagram.jpg" alt="Interieur van Werf07">
<figcaption>Volg ons op Instagram om op de hoogte te blijven van het laatste nieuws.</figcaption>
</figure>
</a>
<nav class="homepage-article-link">
<a class="button" href="//instagram.com/davlstudio">@davlstudio &rarr;</a>
</nav>
</div>
</article>
<?php foreach($fourth_set as $article):
snippet('article', array('article' => $article));
endforeach ?>
<article class="homepage-article social grid-item random-background">
<div class="homepage-article-content">
<a href="https://www.facebook.com/DAVLstudio/" class="facebook social-icon">
<svg viewBox="0 0 800 800"><path d="M445 643h-90V419h-75v-87h75v-64q0-55 32-86 30-29 80-29 28 0 67 3v78h-47q-42 0-42 38v60h86l-11 87h-75v224z"/></svg>
</a>
<a href="https://www.instagram.com/davlstudio/" class="instagram social-icon">
<svg viewBox="0 0 800 800"><path d="M150 400c0-119 0-166 42-208s88-42 208-42 166 0 208 42 42 89 42 208 0 166-42 208-88 42-208 42-166 0-208-42-42-89-42-208zm455 0c0-114 0-148-29-176-29-29-62-29-176-29s-148 0-176 29c-29 29-29 62-29 176s0 148 29 176c29 29 62 29 176 29s148 0 176-29c29-29 29-62 29-176zM400 272a128 128 0 1 1 0 256 128 128 0 0 1 0-256zm0 211c46 0 83-37 83-83s-37-83-83-83-83 37-83 83 37 83 83 83zm163-216c0 16-13 30-30 30-16 0-30-14-30-30 0-17 14-30 30-30 17 0 30 13 30 30z"/></svg>
</a>
<a href="https://www.linkedin.com/company-beta/2685474/" class="linkedin social-icon">
<svg viewBox="0 0 800 800"><path d="M268 629h-97V319h97zm157 0h-97V319h93v42h1q31-50 93-50 114 0 114 133v185h-96V466q0-70-49-70-59 0-59 69z"/><circle cx="219" cy="220" r="56"/></svg>
</a>
</div>
</article>
<?php foreach($fifth_set as $article):
snippet('article', array('article' => $article));
endforeach ?>
<article class="article grid-item home-contact">
<div class="homepage-article-content">
<h2 class="h4">Contact</h2>
<section class="random-background">
<p class="home-contact-address">
DAVL Studio<br />
Berkstraat 2<br />
2565MS Den Haag<br />
<a href="tel:+31703462358">+31 (0)70 3462358</a><br />
<a href="mailto:info@davlstudio.com">info@davlstudio.com</a>
</p>
<a class="home-contact-map" href="https://www.google.nl/maps/place/Berkstraat+2,+2565+MS+Den+Haag/">
<img id="home-contact-map-img" src="/assets/build/img/kaart.png" alt="kaart van Berkstraat 2, Den Haag" />
</a>
</section>
<nav class="homepage-article-link">
<a class="button" href="/contact/">neem contact op &rarr;</a>
</nav>
</div>
</article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment