Implement image display

This commit is contained in:
Zoey 2022-12-14 21:39:19 -08:00
parent a0e50d5edc
commit 731db752b1
No known key found for this signature in database
GPG key ID: 0E87B6A5795E040B
19 changed files with 730 additions and 25 deletions

View file

@ -2,3 +2,6 @@ base_url: "https://zyl.gay"
title: Zyllian
description: "Zoey's website."
sass_styles: [index.scss]
images_per_page: 10
cdn_url: "https://i.zyl.gay"
s3_prefix: z/

6
site/images/amogus.yml Normal file
View file

@ -0,0 +1,6 @@
title: among us 😱
timestamp: 2022-12-14T00:00:00.00Z
alt: Screenshot of Pokémon White on an evolution screen. Text reads "Congratulations! Your amogus evolved into Amoonguss!"
desc: aaahhhh
file: amogus.png
tags: [pokémon, sussy]

5
site/images/cat.yml Normal file
View file

@ -0,0 +1,5 @@
title: cat
timestamp: 2022-12-14T00:00:00.00Z
alt: Picture of my cat sleeping curled up on top of some pillows.
file: cat.jpeg
tags: [cat]

5
site/images/cat2.yml Normal file
View file

@ -0,0 +1,5 @@
title: cat 2
timestamp: 2022-12-14T00:00:00.00Z
alt: Close up picture of my cat laying on a shelf while staring not quite at the camera.
file: cat2.jpeg
tags: [cat]

5
site/images/cat3.yml Normal file
View file

@ -0,0 +1,5 @@
title: cat 3
timestamp: 2022-12-14T00:00:00.00Z
alt: Picture of my cat sleeping in a box barely large enough for them. Their head is reasting on one edge of the box.
file: cat/boxtop.jpeg
tags: [cat]

View file

@ -0,0 +1,6 @@
title: shorts to dresses
timestamp: 2022-12-14T00:00:00.00Z
alt: Screenshot from Pokémon Black 2 of an NPC saying "This dress is comfy and easy to wear..."
desc: yooo they're turning the comfy shorts kid trans
file: trans-comfy.png
tags: [pokémon, trans]

View file

@ -51,3 +51,44 @@ main.page {
abbr {
cursor: help;
}
.images-list {
display: flex;
flex-wrap: wrap;
.image {
position: relative;
padding: 4px;
height: auto;
.image-actual {
display: block;
width: 300px;
height: 100%;
object-fit: cover;
}
.title {
position: absolute;
bottom: 0;
left: 0;
padding: 4px;
margin: 4px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
}
}
.image-full {
.title, .tags-title {
margin-bottom: 0;
}
.image-actual {
width: 100%;
max-height: 80vh;
object-fit: contain;
background-color: rgba(0, 0, 0, 0.3);
}
}

View file

@ -2,7 +2,6 @@
<html lang="en">
<head>
{{{head}}}
<meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="/styles/index.css">
</head>
@ -14,6 +13,7 @@
<span class="pronouns">she/they</span>
</span>
<span class="spacer"></span>
<a href="/images/">Images</a> |
<a href="https://github.com/Zyllian/zyllian.github.io" rel="noopener noreferrer">Source</a>
</header>
<main class="page">

View file

@ -0,0 +1,8 @@
<h1>{{title}}</h1>
<div class="link-list">
<ul>
{{#each links}}
<li><a href="{{this.link}}">{{this.title}}</a></li>
{{/each}}
</ul>
</div>

15
site/templates/image.hbs Normal file
View file

@ -0,0 +1,15 @@
<div class="image-full">
<h1 class="title">{{title}}</h1>
<span class="timestamp">{{timestamp}}</span>
<img class="image-actual" src="{{src}}" alt="{{alt}}">
{{#if desc}}
<p>{{desc}}</p>
{{/if}}
<p><a href="{{src}}">View full size image</a></p>
<h3 class="tags-title">Tags</h3>
<div class="image-tags">
{{#each tags}}
<a class="tag" href="/i/tag/{{this}}/">{{this}}</a>{{#unless @last}},{{/unless}}
{{/each}}
</div>
</div>

22
site/templates/images.hbs Normal file
View file

@ -0,0 +1,22 @@
{{#if tag}}
<h1>Images tagged {{tag}}</h1>
<p><a href="/images/">View all images</a></p>
{{else}}
<h1>Images</h1>
<p><a href="/i/tags">View image tags</a></p>
{{/if}}
<h3>Page {{page}}/{{page_max}}</h3>
{{#if previous}}
<a href="./{{previous}}">Previous page</a>
{{/if}}
{{#if next}}
<a href="./{{next}}">Next page</a>
{{/if}}
<div class="images-list">
{{#each images}}
<a class="image" href="/i/{{id}}">
<img class="image-actual" src="{{src}}" alt="{{alt}}">
<span class="title">{{title}}</span>
</a>
{{/each}}
</div>

View file

@ -0,0 +1 @@
<img src="{{src}}" alt="{{alt}}">