Как правильно отображать изображения под подзаголовками - PullRequest
Новая
       14

Как правильно отображать изображения под подзаголовками

0 голосов
/ 27 марта 2019

Я создаю очень простое веб-приложение (использующее флакон Python), которое будет отображать некоторые изображения для пользователя.Как правильно отображать изображения под подзаголовками?

CURRENT my current output

EXPECTED enter image description here

словарь, возвращенный из приложения фляги 

images:{'fish': ['/images/fish/Jellyfish.jpg'], 
             'mammal': ['/images/mammal/Koala.jpg']}
            }

show.html 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Images</h1>
                </div>
                <hr>
{% if images %}     
                  {% for key,value in image.items() %}
                    <h4>{{key}}<h4>
                    <hr> 
                    {% for image_name in value %}
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> 
<hr>                </div>
                   {% endfor %}{% endfor %}{% endif %}
            </div>
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

Ответы [ 3 ]

1 голос
/ 27 марта 2019

Мне удалось это исправить, переместив <div class="row"> внутри {% for key,value in image.items() %} для цикла

Обновленный html 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <body>
        <div class="container">
            <div class="col-lg-12">
                <h1 class="page-header">Images</h1>
            </div>
            <hr>
            {% if images %}     
            {% for key,value in image.items() %}
            <div class="row">
                <h4>
                {{key}}
                <h4>
                <hr>
                {% for image_name in value %}
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> 
                    <hr>
                </div>
                {% endfor %}
            </div>
            {% endfor %}{% endif %}            
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>
0 голосов
/ 27 марта 2019

Вы можете попробовать это: в html: 

<div class="container">
  <div class="row">
    <div class="col-sm header">Fish</div>
  </div>
  <div class="row">
    <div class="col-sm image">
      //Image of fish
    </div>
  </div>
  <div class="row">
    <div class="col-sm header">Flower</div>
  </div>
  <div class="row">
    <div class="col-sm image">
      //Image of first flower
    </div>
    <div class="col-sm image">
      //Image of secondflower
    </div>
    <div class="col-sm image">
     //Image of thirdflower
    </div>
  </div>
</div>

в css: 

.header {
  border-bottom: 1px solid #e4e6e8;
  border-top: 1px solid #e4e6e8;
}

.image {
  border-bottom: 1px solid #e4e6e8;
}

.col-sm {
  padding: 10px;
}
0 голосов
/ 27 марта 2019 
<div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Images</h1>
                </div>
                <hr>
{% if images %}     
                  {% for key,value in image.items() %}
                    <h4>{{key}}<h4>
                    <hr> 
                    {% for image_name in value %}
                    // have a condition here to check if its first image, then 
                     display it with a <div> tag.
                     if(first) {
                        <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', 
                     filename=image_name)}}"> 
                       }
                    //end here
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', 
                       filename=image_name)}}"> 
<hr>                </div>
                   {% endfor %}{% endfor %}{% endif %}
            </div>
        </div>

вот как бы я это сделал.Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...