<?php
/*
{
	"id" : "image-container",
	"category": "container",
	"name": "Image Folder"
}
*/

$SiteShell->append('head', '	
	<style type="text/css">
		h1, h2, h3 { font-weight: 200; }
		.section_head { font-size: 1.125rem; font-size: clamp(1.125rem, 2vw, 2rem); }
		.section_head > *:first-child { margin-top: 0; }
		.section_head > *:last-child { margin-bottom: 0; }
	</style>' . PHP_EOL);

$posts					= $sw->extend("posts")->type("article")->section($result["id"])->limit(120)->posts();
$posts					= (new ComponentModule())->data($posts)->markupHTML('
<div class="image-card" style="padding:0.6rem;text-align:center;" data-viewbox="<!--image_large-->" data-paragraph="<!--paragraph_encoded-->">
	<a href="<!--url-->">
		<figure class="sw-ui-figure">
			<div class="sw-ui-media-wrapper">
				<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 <!--width--> <!--height-->"></svg>
				<img class="lazyload" src="<!--image_url-->" data-lazyload-placeholder="<!--thumb-->" data-lazyload-scheme="<!--image_scheme-->" alt="<!--image_alt-->">
			</div>
		</figure>
	</a>
</div>' . PHP_EOL);

ob_start();
?>
<div class="body padding revoscroll" data-revoscroll="anim: fade-left; duration: 0.5; delay: 0.25; ease: ease-in-out;">
	<div class="section_head">
<?php e($result["content"] . PHP_EOL); ?>
	</div>

	<div style="margin: 3rem auto 4rem auto;">
		<section class="sw-ui-gallery-wrapper" style="margin: 0 -0.6rem; width: auto;">
			<div class="masonry-columns min-1-max-3">
<?php e($posts->cards(1500)); ?>
			</div>
		</section>
	</div>
</div>
<?php
$content				= ob_get_clean();

$SiteShell->replace('article', PHP_EOL . $content);

