fix: gallery
This commit is contained in:
		
							parent
							
								
									d6cd4628d8
								
							
						
					
					
						commit
						0596f600a5
					
				
					 3 changed files with 27 additions and 12 deletions
				
			
		| 
						 | 
				
			
			@ -21,6 +21,7 @@ body, #wrapper
 | 
			
		|||
.card-columns
 | 
			
		||||
{
 | 
			
		||||
    column-gap: 1em;
 | 
			
		||||
    column-count: 2;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.card-columns.card
 | 
			
		||||
| 
						 | 
				
			
			@ -28,14 +29,6 @@ body, #wrapper
 | 
			
		|||
    margin-bottom: 1em;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (min-width: 576px)
 | 
			
		||||
{
 | 
			
		||||
    .card-columns
 | 
			
		||||
    {
 | 
			
		||||
        column-count: 2;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (min-width: 768px)
 | 
			
		||||
{
 | 
			
		||||
    .card-columns
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -15,12 +15,34 @@
 | 
			
		|||
        {% else %}
 | 
			
		||||
            <hr class="my-4">
 | 
			
		||||
        {% endif %}
 | 
			
		||||
        <a href="{{ child.url }}">
 | 
			
		||||
        <a class="text-decoration-none" href="{{ child.url }}">
 | 
			
		||||
            <h4 class="text-body">
 | 
			
		||||
                {{ child.title }}
 | 
			
		||||
            </h4>
 | 
			
		||||
            <span class="text-body">
 | 
			
		||||
                {{ child.content }}
 | 
			
		||||
            </span>
 | 
			
		||||
            <div class="card-columns">
 | 
			
		||||
                {% for media_item in child.media.images[:10] %}
 | 
			
		||||
                {% for media_item in child.media.images[:5] %}
 | 
			
		||||
                    <div class="card">
 | 
			
		||||
                        {{ media_item.quality(25).html }}
 | 
			
		||||
                        {% if loop.last %}
 | 
			
		||||
                            {{ debug(media_item) }}
 | 
			
		||||
                            {{ debug(media_item.height) }}
 | 
			
		||||
                            {% set height_ratio = media_item.height / media_item.width %}
 | 
			
		||||
                            <p class="p-2" style="
 | 
			
		||||
                                    text-align: center;
 | 
			
		||||
                                    background-color: #343a40;
 | 
			
		||||
                                    border-radius:10%;
 | 
			
		||||
                                    color: white;
 | 
			
		||||
                                    opacity: 80%;
 | 
			
		||||
                                    position: absolute;
 | 
			
		||||
                                    top: 50%;
 | 
			
		||||
                                    left: 50%;
 | 
			
		||||
                                    transform: translate(-50%,-50%);">
 | 
			
		||||
                                Mehr anzeigen
 | 
			
		||||
                            </p>
 | 
			
		||||
                        {% endif %}
 | 
			
		||||
                    </div>
 | 
			
		||||
                {% endfor %}
 | 
			
		||||
            </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue