mastodon-wall/templates/default/index.html.twig
2023-05-19 22:31:29 +02:00

86 lines
2.0 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}Hello DefaultController!{% endblock %}
{% block body %}
<style>
.example-wrapper {
margin: 1em auto;
max-width: 1600px;
width: 95%;
font: 18px/1.5 sans-serif;
}
.example-wrapper img {
width: 100%;
float:left;
}
.example-wrapper strong {
float: left;
margin-top: -4em;
position: relative;
padding: 0.5em;
background: rgba(0, 0, 0, .7);
color: #fff;
width: 100%;
text-align: right;
}
.example-wrapper code {
background: #F5F5F5;
padding: 2px 6px;
}
a{
float:left;
width: 50%;
}
a:hover strong{
color: #ddd;
background: rgba(0, 0, 0, .7);
}
</style>
<div class="example-wrapper">
<h1>Découverte d'artistes sur mastodon</h1>
<h2>
{{ data | length }} Images
</h2>
{# {{ (data) | length }}#}
<fieldset>
<h2> liste des images</h2>
{% for img in (data) %}
{# {{ img }}#}
{# {{ img.media_attachments | length }}#}
{% for media in img.media_attachments %}
<a href="{{ img.url }}">
<figure>
<img src="{{ media.preview_url }}" alt="image" class="gallery_img /">
<strong>
{{ img.account.acct }}
</strong>
</figure>
</a>
{% endfor %}
{% endfor %}
</fieldset>
{# <h2>debug</h2>#}
{# {{ dump(data) }}#}
</div>
<style>
img {
max-width: 90vw;
margin-right: 1em;
margin-bottom: 1em;
width: 600px;
}
</style>
{% endblock %}