brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2024-11-21 15:56:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

Added support for images within toots

Browse source
This commit is contained in:
Brandon Rozek 2022-05-14 19:19:47 -04:00
parent 1c52c9e391
commit 440c6a7db4
1 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
layouts/shortcodes/displayToots.html
View file

@ -12,25 +12,42 @@
vertical-align: top; vertical-align: top;
margin-bottom: 0; margin-bottom: 0;
} }
.toot .e-content img { .toot-avatar { display: inline-block; }
display: inline-block; .toot .e-content img { border: 2px solid black; }
border: 2px solid black;
}
.toot .e-content p:first-of-type { .toot .e-content p:first-of-type {
display: inline-block; display: inline-block;
} }
.toot-photos {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
main .e-content .toot-photos img {
width: 100%;
max-width: 300px;
}
.toot-social { margin-top: 1rem; }
</style> </style>
{{ range sort $dataJ "created_at" "desc" }} {{ range sort $dataJ "created_at" "desc" }}
{{ if ne .content "" }} {{ if ne .content "" }}
<article class="toot h-entry"> <article class="toot h-entry">
<div class="e-content"> <div class="e-content">
<img width=50 src="{{ .account.avatar }}"/> <img class="toot-avatar" width=50 src="{{ .account.avatar }}"/>
<p class="date">Tooted on <time class="dt-published" datetime='{{ .created_at }}'>{{ dateFormat "January 2, 2006 15:04" (time .created_at) }}</time></p> <p class="date">Tooted on <time class="dt-published" datetime='{{ .created_at }}'>{{ dateFormat "January 2, 2006 15:04" (time .created_at) }}</time></p>
{{ .content | safeHTML }} {{ .content | safeHTML }}
{{ if gt (len .media_attachments) 0 }}
<div class="toot-photos">
{{ range .media_attachments}}
{{ if eq .type "image" }}
<img src="{{ .preview_url }}" alt="{{ .description }}"/>
{{ end }}
{{ end }}
</div>
{{ end }}
</div> </div>
<div class=".toot-social"> <div class="toot-social">
<span><i class='fas fa-share'></i> {{ .replies_count }} </span> <span><i class='fas fa-share'></i> {{ .replies_count }} </span>
<span><i class='fas fa-retweet'></i> {{ .reblogs_count }} </span> <span><i class='fas fa-retweet'></i> {{ .reblogs_count }} </span>
<span><i class='fas fa-star'></i> {{ .favourites_count }} </span> <span><i class='fas fa-star'></i> {{ .favourites_count }} </span>