mastodon-wall/templates/default/index.html.twig
2023-05-22 16:10:59 +02:00

95 lines
2.2 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}Hello DefaultController!{% endblock %}
{% block body %}
<style>
body{
background: #313543;
}
.example-wrapper {
margin: 1em auto;
max-width: 1600px;
width: 95%;
font: 18px/1.5 sans-serif;
}
figure{
max-height: 422px;
max-width: 479px;
overflow: auto;
padding: 0;
margin: 5px;
}
.example-wrapper img {
width: 100%;
float:left;
min-height: 422px;
}
.example-wrapper strong {
float: left;
margin-top: -3em;
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;
}
a:hover strong{
color: #ddd;
background: rgba(0, 0, 0, .7);
}
img {
max-width: 90vw;
margin-right: 1em;
/*margin-bottom: 1em;*/
/*width: 600px;*/
}
</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>
</div>
<style>
</style>
{% endblock %}