allow carousels

This commit is contained in:
Ell 2023-08-12 14:28:29 +02:00
parent e04e12e662
commit d6e0b587b5
3 changed files with 29 additions and 3 deletions

View file

@ -8,7 +8,8 @@
"links": {
"Steam": "https://steamcommunity.com/sharedfiles/filedetails/?id=2965803577",
"YouTube": "https://www.youtube.com/channel/UC87-8FM-U9OSUYCzIqlhztA"
}
},
"carousel": ["itty.png", "itty.png"]
},
{
"name": "TEMP!! Designing the Modern Home",

View file

@ -24,7 +24,32 @@ summary: A fun simulation game where you mess with people's lives
<div class="community-content-box">
<a id="{{ content.slug }}"></a>
{% if section.images %}
<img src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
{% if content.carousel %}
<div id="{{ content.slug }}-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for item in content.carousel %}
<li data-target="#{{ content.slug }}-carousel" data-slide-to="{{ forloop.index0 }}" {% if forloop.first %}class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for item in content.carousel %}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<img class="d-block w-100" src="/media/community/{{ item }}" alt="A carousel slide showing off {{ content.name }}">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#{{ content.slug }}-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{{ content.slug }}-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% else %}
<img src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
{% endif %}
{% endif %}
{% if section.embeds %}
<div class="video-embed">

View file

@ -105,7 +105,7 @@ pre.highlight {
.community-content-box-content {
margin: 0;
top: auto;
bottom: 30px;
bottom: 50px;
white-space: initial;
}