How to display properly images under sub headersCSS Display an Image Resized and CroppedHow to properly ignore exceptionsHow do I give text or an image a transparent background using CSS?How to display HTML in TextView?How do I combine a background-image and CSS3 gradient on the same element?How do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a divHow to display Base64 images in HTML?Save plot to image file instead of displaying it using MatplotlibCannot display HTML string
What is it exactly about flying a Flyboard across the English channel that made Zapata's thighs burn?
Which genus do I use for neutral expressions in German?
Does a humanoid possessed by a ghost register as undead to a paladin's Divine Sense?
Why do cheap flights with a layover get more expensive when you split them up into separate flights?
What is the German idiom or expression for when someone is being hypocritical against their own teachings?
Can you take actions after being healed at 0hp?
Ancients don't give a full level?
Why does putting a dot after the URL remove login information?
Not been paid even after reminding the Treasurer; what should I do?
Did silent film actors actually say their lines or did they simply improvise “dialogue” while being filmed?
Why do dragons like shiny stuff?
If the interviewer says "We have other interviews to conduct and then back to you in few days", is it a bad sign to not get the job?
The meaning of "scale" in "because diversions scale so easily wealth becomes concentrated"
How to approach protecting my code as a research assistant? Should I be worried in the first place?
How and where to get you research work assessed for PhD?
Why does capacitance not depend on the material of the plates?
Description of past perfect tense
If someone else uploads my GPL'd code to Github without my permission, is that a copyright violation?
“The Fourier transform cannot measure two phases at the same frequency.” Why not?
Identify Batman without getting caught
Are valid inequalities worth the effort given modern solvers?
Which pronoun to replace an infinitive?
What date did Henry Morgan capture his most famous flagship, the "Satisfaction"?
`printf` improvement with C++ variadic templates
How to display properly images under sub headers
CSS Display an Image Resized and CroppedHow to properly ignore exceptionsHow do I give text or an image a transparent background using CSS?How to display HTML in TextView?How do I combine a background-image and CSS3 gradient on the same element?How do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a divHow to display Base64 images in HTML?Save plot to image file instead of displaying it using MatplotlibCannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I'm building a very simple webApp (using python flask) that will display some images to the user. How to display properly images under sub headers?
CURRENT
EXPECTED
dictionary returned from a flask app
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>
python html css flask jinja2
asked Mar 27 at 3:38
jonjon
355 bronze badges
add a comment |
0
I'm building a very simple webApp (using python flask) that will display some images to the user. How to display properly images under sub headers?
CURRENT
EXPECTED
dictionary returned from a flask app
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>
python html css flask jinja2
asked Mar 27 at 3:38
jonjon
355 bronze badges
add a comment |
0
0
0
I'm building a very simple webApp (using python flask) that will display some images to the user. How to display properly images under sub headers?
CURRENT
EXPECTED
dictionary returned from a flask app
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>
python html css flask jinja2
asked Mar 27 at 3:38
jonjon
355 bronze badges
I'm building a very simple webApp (using python flask) that will display some images to the user. How to display properly images under sub headers?
CURRENT
EXPECTED
dictionary returned from a flask app
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>
python html css flask jinja2
python html css flask jinja2
asked Mar 27 at 3:38
jonjon
355 bronze badges
asked Mar 27 at 3:38
jonjon
355 bronze badges
asked Mar 27 at 3:38
jonjon
355 bronze badges
asked Mar 27 at 3:38
jonjon
355 bronze badges
asked Mar 27 at 3:38
jonjon
355 bronze badges
355 bronze badges
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
I was able to fix it by moving the <div class="row"> inside the % for key,value in image.items() % for loop
Updated 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>
answered Mar 27 at 4:37
jonjon
355 bronze badges
add a comment |
0
<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>
this is how would I do it. Hope this helps.
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
I tired but output is not as I expected it to be% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif %Images were skewed
– jon
Mar 27 at 4:23
add a comment |
0
You can try this:
in 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>
in css:
.header
border-bottom: 1px solid #e4e6e8;
border-top: 1px solid #e4e6e8;
.image
border-bottom: 1px solid #e4e6e8;
.col-sm
padding: 10px;
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369425%2fhow-to-display-properly-images-under-sub-headers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I was able to fix it by moving the <div class="row"> inside the % for key,value in image.items() % for loop
Updated 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>
answered Mar 27 at 4:37
jonjon
355 bronze badges
add a comment |
1
I was able to fix it by moving the <div class="row"> inside the % for key,value in image.items() % for loop
Updated 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>
answered Mar 27 at 4:37
jonjon
355 bronze badges
add a comment |
1
1
1
I was able to fix it by moving the <div class="row"> inside the % for key,value in image.items() % for loop
Updated 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>
answered Mar 27 at 4:37
jonjon
355 bronze badges
I was able to fix it by moving the <div class="row"> inside the % for key,value in image.items() % for loop
Updated 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>
answered Mar 27 at 4:37
jonjon
355 bronze badges
edited Mar 27 at 16:38
answered Mar 27 at 4:37
jonjon
355 bronze badges
answered Mar 27 at 4:37
jonjon
355 bronze badges
answered Mar 27 at 4:37
jonjon
355 bronze badges
355 bronze badges
add a comment |
add a comment |
0
<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>
this is how would I do it. Hope this helps.
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
I tired but output is not as I expected it to be% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif %Images were skewed
– jon
Mar 27 at 4:23
add a comment |
0
<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>
this is how would I do it. Hope this helps.
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
I tired but output is not as I expected it to be% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif %Images were skewed
– jon
Mar 27 at 4:23
add a comment |
0
0
0
<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>
this is how would I do it. Hope this helps.
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
<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>
this is how would I do it. Hope this helps.
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
answered Mar 27 at 3:55
aRtooaRtoo
6710 bronze badges
6710 bronze badges
I tired but output is not as I expected it to be% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif %Images were skewed
– jon
Mar 27 at 4:23
add a comment |
I tired but output is not as I expected it to be% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif %Images were skewed
– jon
Mar 27 at 4:23
I tired but output is not as I expected it to be
% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif % Images were skewed– jon
Mar 27 at 4:23
I tired but output is not as I expected it to be
% if loop.index0 == 0 % <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" url_for('send_image', filename=image_name)"> % endif % Images were skewed– jon
Mar 27 at 4:23
add a comment |
0
You can try this:
in 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>
in css:
.header
border-bottom: 1px solid #e4e6e8;
border-top: 1px solid #e4e6e8;
.image
border-bottom: 1px solid #e4e6e8;
.col-sm
padding: 10px;
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
add a comment |
0
You can try this:
in 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>
in css:
.header
border-bottom: 1px solid #e4e6e8;
border-top: 1px solid #e4e6e8;
.image
border-bottom: 1px solid #e4e6e8;
.col-sm
padding: 10px;
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
add a comment |
0
0
0
You can try this:
in 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>
in css:
.header
border-bottom: 1px solid #e4e6e8;
border-top: 1px solid #e4e6e8;
.image
border-bottom: 1px solid #e4e6e8;
.col-sm
padding: 10px;
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
You can try this:
in 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>
in css:
.header
border-bottom: 1px solid #e4e6e8;
border-top: 1px solid #e4e6e8;
.image
border-bottom: 1px solid #e4e6e8;
.col-sm
padding: 10px;
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
answered Mar 27 at 4:12
Seba CherianSeba Cherian
1,0091 silver badge14 bronze badges
1,0091 silver badge14 bronze badges
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369425%2fhow-to-display-properly-images-under-sub-headers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
