---
layout: layouts/main.html
eleventyComputed:
    description: "Example artwork page for PPL's Art Gallery, an easy-to-use art gallery website template."
    ogImage: "art/{{ fileName }}"
    ogImageAlt: "{{ altText }}"
    summaryLargeImage: true
---
{# This is the layout for the art page, being built atop the main layout. #}
<!--Artwork image-->
<div class="art-page-img-div">
    <img src="{{ artSiteSettings.siteDirectory }}img/art/{{ fileName }}" alt="{{ altText }}" onclick="openImgModal()"/>
</div>

<!--Title-->
<h2>{{ title }}</h2>
<!--Date-->
<p>{{ date | artDate }}</p>

<!--Categories
Nunjucks code finds categories that match the artwork's category IDs.
artCategories collection formed by Eleventy configuration.-->
<p class="p-categories"><span>Categories:</span>
{%- for cateId in categories %}
    {%- set category = "test" %}
    {%- for object in artCategories %}
        {%- if object.id == cateId %}
            {%- set category = object.name %}
        {%- endif %}
    {%- endfor %}
    <a class="art-tag" href="{{ artSiteSettings.siteDirectory }}category/{{ category | slugify }}/">{{ category }}</a> 
{%- endfor %}
</p>

<!--Tags
artTags collection formed by Eleventy configuration.-->
<p class="p-tags"><span>Tags:</span> {% for artTag in artTags %}<a class="art-tag" href="{{ artSiteSettings.siteDirectory }}tag/{{ artTag | slugify }}/">{{ artTag }}</a> {% endfor %}</p>

<hr class="hr-line">

<!--Description-->
{{ content | safe }}

<!--Image modal-->
<div id="img-modal" class="modal">
    <!--Close button-->
    <span class="modal-close" onclick="closeImgModal()">&times;</span>
    <img src="{{ artSiteSettings.siteDirectory }}img/art/{{ fileName }}" alt="{{ altText }}" class="modal-img" eleventy:pictureattr:class="modal-pict"/>
</div>

<script src="{{ artSiteSettings.siteDirectory }}scripts/imgModal.js" defer></script>