How to display images from mysql database, specifically two images in a row. I've read many articles in stack overflow, all of them discussed using the table tag. But I couldn't find any article using div.
Here is my SQL code which is not completely correct.(displays images, but not in correct order) :
$result=mysql_query("SELECT * FROM images WHERE tag='$tag' ");
while($info=mysql_fetch_array($result))
{
if($count==2) //two images per row
{
print "</div>";
$count = 0;
}
if($count==0)
print '<div class="row"><div class="col-md-6 col-sm-6 gallery-display">';
?>
<figure>
<a href="first-image.php">
<img src="1.jpg" alt="Texture Paper" class="display-image">
</a>
<a href="first-image.php" class="figcaption">
<h3>Texture Paper</h3>
</a>
</figure>
<?php
$count++;
print '</div>';
}
if($count>0)
print "";
?>
This How Code should come !
<div class="row">
<div class="col-md-4 col-sm-4 gallery-display">
<figure>
<a href="first-image.php">
<img src="1.jpg" alt="Texture Paper" class="display-image">
</a>
<a href="first-image.php" class="figcaption">
<h3>Texture Paper</h3>
</a>
</figure>
<!--figure-->
</div>
<div class="col-md-4 col-sm-4 gallery-display">
<figure>
<a href="sec-image.php">
<img src="2..jpg" alt="Photo (:" class="display-image">
</a>
<a href="sec-image.php" class="figcaption">
<h3>Photo Caption</h3>
</a>
</figure>
</div>
<!--.gallery-display-->
<div class="row">
<div class="col-md-4 col-sm-4 gallery-display">
..........loop code continues.......
It looks like you want to use array_chunk. You might want to check around before posting this kind of stuff, because this appears to be a duplicate/very similar to
PHP: display entries from Database in groups of five?
Related
Iam trying to get my web page to display all of my shop items in bootstrap 4 cards. 3 wide by however many deep ( i may add pagination another day )
I've got a php foreach loop which populates bootstrap4 cards perfectly. The trouble is they display vertically ( one on top of the other ) . ive tried class= columns which works on dummy divs but not when i integrate with my for each loop.
I ve tried everything regarding bootstrap docs but cant get the cards to display 3 wide and however many deep ( the foreach and the items control this. )
Should i be even using 'cards' or use something else. thx for your time
<div class="container">
<!-- $result = my php code using x-path to get results from xml query goes here. -->
<?php
foreach ( $result as $elements){
?>
<div class="row-fluid ">
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div></div></div></div>
<?php
}
}
?>
</div>
</div> <!--container close div -->
As stated, the .row-fluid should be outside of the loop :
<div class="container">
<div class="row-fluid ">
<!-- my php code which uses x-path to get results from xml query. -->
<?php foreach ( $result as $elements) : ?>
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div> <!--container div -->
You need to move your <div class="row-fluid "> class outside of the foreach loop, otherwise it will create a new row for each class.
Also, as a comment has mentioned, you need to close all your divs correctly.
I am doing a project in codeigniter 3.3(latest version). Is there any method/function that is related to skip while inside the foreach? For example, I have 5 data in my table(ofcourse you need to use foreach in view to get all the data). The 3 images will be display on the top part and the last 2 will be display in the bottom part, is it possible
View
<div class="container-fluid proj-bottom">
<div class="row">
<?php foreach($getContent as $content){ if($content->id=="1"){ skip();}?>
<div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn">
<?=$content->id?>
<a href="#fly" data-toggle="modal" data-animation="animated zoomInRight" ><img src="<?= base_url() .'uploaded/'. $content->img_path?>" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3>Fly</h3>
<span>View</span>
</a>
</div>
<?php } ?>
</div>
</div>
You can use continue:
<div class="container-fluid proj-bottom">
<div class="row">
<?php foreach($getContent as $content){ if($content->id=="1"){ skip();}?>
<div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn">
<?=$content->id?>
<a href="#fly" data-toggle="modal" data-animation="animated zoomInRight" ><img src="<?= base_url() .'uploaded/'. $content->img_path?>" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3>Fly</h3>
<span>View</span>
</a>
</div>
<?php } ?>
</div>
</div>
The continue (Manual reference) will skip the current loop and go for the next record if it exists.
The break (Manual reference) will skip and quit the loop.
I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">
I'm able to display mysql data from my database by simply echoing it in a blank div however I'd like to display it into an existing div style, by that I mean the style is already set.
I'm having trouble showing the right information in the write places and I could use abit of help with fixing up my code.
Here is the code for the html div :
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]" style="margin-top: 10px">
<ul class="event-list">
<li>
<time datetime="2014-08-22">
<span class="day">22</span>
<span class="month">AUG</span>
<span class="year">2014</span>
<span class="time">ALL DAY</span>
</time>
<img alt="Steakout" src="http://www.thedramateacher.com/wp-content/uploads/2014/04/vcaa-2014.jpg" />
<div class="info">
<h2 class="title">Night before VCAA</h2>
<p class="desc">Staying.</p>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><span class="fa fa-facebook"></span></li>
<li class="twitter" style="width:34%;"><span class="fa fa-twitter"></span></li>
<li class="google-plus" style="width:33%;"><span class="fa fa-google-plus"></span></li>
</ul>
</div>
</li>
In php I've decided to just recreate the whole div and just add the data I'd like to show into the div, it worked when I was just displaying unested divs but now that theres more it's gotten confusing.
Here is my Php code:
include('Specials.html');
$Category = 'Specials';
$query = $pdo->prepare("SELECT * FROM adsubm WHERE CATEGORY LIKE '%$Category%'");
$query->execute();
while($row = $query->fetch()) {
echo "<div class ='[ col-xs-12 col-sm-offset-2 col-sm-8 ] style='margin-top: 10px'>
<ul class='event-list'>
<div class='info'>
<div class='info'>
<h2 class='title'>".$row['ADTITLE'],
<time datetime>.$row['DATE'],
<p class='desc'> $row['DESCRIPTION']."</div></ul></div></div></h2></p>";
}
?>
I've been doing it piece by piece and testing each time but this time there are errors just popping up everywhere.
Kudos.
while($row = $query->fetch()) {
echo "<div class ='[ col-xs-12 col-sm-offset-2 col-sm-8 ] style='margin-top: 10px'>
<ul class='event-list'>
<div class='info'>
<div class='info'>
<h2 class='title'>".$row['ADTITLE'].
"<time datetime>".$row['DATE'].
"<p class='desc'>". $row['DESCRIPTION']."</div></ul></div></div></h2></p>";
}
some minor changes
Place this after your MySQL query.
<?php
while($row = $query->fetch()) {
?>
Put this where you want each row to show. You can easily place HTML around it.
<?php echo $row['ROWNAME']; ?>
Then this at the end of the document.
<?php
}
?>
i am new to wordress
i want to make image gallery from basic bootstrap template
i have this template for example:
<div class="row portfolio-images">
<div class="col-md-3">
<img src="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
</div>
i want to know how to create image database or gallery in wordpress in the panel
and get the images url in an array and do something like this:
<div class="row portfolio-images">
<?php
for(the array){ ?>
<div class="col-md-3">
<img src="<?php echo image url ?> ">
<a class="title" ><?php echo image title ?></a>
</div>
<?php }?>
</div>
because im lost right now and i need some guidence
There are various plugins that you can use to generate the gallery. If you need to generate one without plugin then you can define a custom post type and then add images post on the relevant post type, which then can be listed on the required page.
Usually I use ACF plugin to generate custom field and then list it on the page. You can check it more here: http://www.advancedcustomfields.com/resources/gallery/