I have the site set up to have 3 columns with image, under the image a title, and under title the description x 3.
If i was to input the words using php all shows fine but when i use the fetch array it breaks the columns and puts each one on a different row. My current code is:
<!-- /.row -->
<?
while($row = mysql_fetch_array($result)){
?>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../assets/img/tienda/<? echo $row["images"];?>" alt="">
</a>
<h3>
<? echo $row["top"];?>
</h3>
<p><? echo $row["desc"];?></p>
</div>
</div>
</div>
<hr>
<!-- /.row -->
<? } ?>
This answer will handle the possibility that more than 3 results will be returned by PHP, which would necessitate another row of 1-3 results. You'd have to add a .clearfix to your CSS that did clear:both which would safely clear the floats contained within the col-md-4.....and besides, it's just good practice to ensure floats don't propagate.
<?
$inc = 0; //This is your incrementor
while($row = mysql_fetch_array($result)){
if ($inc == 0) {
?>
<div class="row">
<?
}
?>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../link/<? echo $row["images"];?>" alt="">
</a>
<h3>
<? echo $row["top"];?>
</h3>
<p><? echo $row["desc"];?></p>
</div>
<?
if ($inc == 0} {
?>
<div class="clearfix"></div>
</div>
<?
}
$inc = ($inc == 2)? 0 : $inc++; //Increment unless value = 2, then set to zero
}
?>
<hr>
try
<!-- /.row -->
<div class="row">
<?
while($row = mysql_fetch_array($result)){
?>
<!-- Projects Row -->
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../assets/img/tienda/<? echo $row["images"];?>" alt="">
</a>
<h3>
<? echo $row["top"];?>
</h3>
<p><? echo $row["desc"];?></p>
</div>
<!-- /.row -->
<? } ?>
</div>
<hr>
Related
I'm using data from MySQL database and display looks like this:
I want 3 articles in one line. The pictures below are made with HTML and CSS.
This is my code:
while($row=mysqli_fetch_array($result))
{?>
<div class="container">
<div class="row padding">
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
</div>
</div>
<?php }?>
This seems to be a nice point in your project to implement a template engine. There a couple out there. I really liked working with typo3 fluid, but back to your question...
For your existing code, you can end your php code, use html and just echo the php variables you need.
<?php
// ... some php stuff
?>
<div class="container">
/* some html stuff * /
<img class="malaSlika" src="<?php echo UPLPATH . $row['slika']; ?>">
/* some more html stuff */
/* <?= is short for <?php echo
<img class="malaSlika" src="<?= UPLPATH . $row['slika']; ?>">
</div>
<?php
// ... some more php stuff
As said, maybe a template engine would help this even further.
Edit: To add div class="row" it could be something like this.
<?php ... ?>
<div class="container">
<?php
$i = 0;
while($row=mysqli_fetch_array($result)) :
if($i % 3 == 0) : ?>
<div class="row padding">
<?php endif; ?>
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
<?php if($i % 3 == 0) : ?>
</div>
<?php endif; ?>
<?php
$i++;
endwhile;
?>
</div>
It will always get ugly at some point I think. This is a quick solution. the modulo (%) devides by the number and returns the rest value. so $i modulo 3 return 0 at 0, 3, 6, 9, 12 etc. Meaning it will always add the "row padding" div.
I am making a ranking page where I am displaying the username by descending order. The names already appear in the correct order but I am having trouble showing the position on the user, like 1º place, 2º place...
This is my code (simplified):
I tried to do a for loop (in every place I could think of) and print the value of $i, but it doesn't seem to work, either $i has always the same value in every position or all of them in the same position.
<?php
for($i=0;$i<8;$i++){
while($row = mysqli_fetch_assoc($result)) {
$names =$row['username'];
?>
<li>
<a href="#">
<div class="container">
<div class="image">
<svg></svg>
</div>
<div class="content">
<h2><?php print $i; // print the positions ?></h2>
<p><?php print $names ?></p>
</div>
</div>
</a>
</li>
<?php }} ?>
If your SQL orders the users in the correct order, then instead of having a loop, just have a counter and increment it each time (using $i++)...
<?php
$i=1;
while($row = mysqli_fetch_assoc($result)) {
$names =$row['username'];
?>
<li>
<a href="#">
<div class="container">
<div class="image">
<svg></svg>
</div>
<div class="content">
<h2><?php print $i++; // print the positions ?></h2>
<p><?php print $names ?></p>
</div>
</div>
</a>
</li>
<?php } ?>
<?php
$counter=0;
while($row = mysqli_fetch_assoc($result)) {
$names =$row['username'];
$counter++;
?>
<li>
<a href="#">
<div class="container">
<div class="image">
<svg></svg>
</div>
<div class="content">
<h2><?php echo $counter; ?></h2>
<p><?php print $names ?></p>
</div>
</div>
</a>
</li>
<?php } ?>
I have a horizontal carousel that is working fine, here is the code for it
Now i wish to fetch the data from database and display it that corousel. Following is the code that i used
<div class='row'>
<div class='col-xs-12'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach($student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
but the view is distorted and instead of all the slides sliding in one row, the view is coming like this
That's because unless the row is active, the other .item row gets the property display:none; If you were to remove the display:none; it should work as you want.
Create the class="row" inside the loop. Also keep in mind that the screen consists of 12 units only, so if you create a row of more than 12 units it will go to next line automatically. As you have created the loop that creates "col-md-3" for more than 4 times which sums more than 12, so it moves to next line.
For reference view this
As you have not given the php code, i am giving u sample of it
The array that you are getting divide it into a group of 4 (or as many as you want) like given below
$query = $this->db->get('student');
$r = $query->result();
$s = (array_chunk($r, 4));
return $s;
And then on the code you have given, change into following
<div class="carousel-inner">
<?php foreach($s as $key => $per_student): ?>
<?php if($key=='0'): ?>
<div class="item active">
<?php else: ?>
<div class="item ">
<?php endif; ?>
<div class="row">
<?php foreach($per_student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
I have 10 images of each brand and want to display brand by brand with there press releases images.
Example:
Product 1:
press release_image1,press release_image2,press release_image3 so on..
Product 2:
press release_image1,press release_image2,press release_image3 so on..
Product 3:
press release_image1,press release_image2,press release_image3 so on..
<?php foreach($press as $p){ ?>
<div class="header">
<h1 class=''>
<a href="<?php echo base_url('index.php/brand/view')."/".$p->brand_id;?>">
<?php
echo $p->brand_name;
?>
</a>
</h1>
</div>
<section id="portfolio-preview-items" class="row four-cols rows_1">
<?php //$row = $this->dashboard->get_press_release($id);
?>
<!-- Portfolio Normal Mode -->
<div class="portfolio-item design web-design v3" data-id="354" style="height: 475px; margin-bottom: 20px;">
<div class="he-wrap tpl2">
<a href="<?php echo base_url('assets/files/press_release') . '/' . $p->press_image; ?>" class="image-614" data-lightbox="event_img" data-title="<?php echo $p->press_title; ?>" >
<img style="cursor:pointer;" src="<?php echo base_url('assets/files/press_release') . '/' . $p->press_image; ?>" alt="">
</a>
<div class="shape4"></div>
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar v1">
<a href="<?php echo base_url('index.php/brand/view').'/'.$p->brand_id; ?>" class="link a0" data-animate="zoomIn">
<i class="moon-link-4"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Normal Mode End -->
</section>
<?php } ?>
You can combine id and particular images(concat by ',') from mysql query.
then in php code u can use explode and implode to display each images
I have a foreach loop which retrieves the subcategories of the current category.
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<div class="item">
<?php echo $this->htmlEscape($_category->getName()) ?>
</div>
<?php endforeach; ?>
I want to divide the results in rows of three columns. The desired format is then:
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
...
---------------EDIT----------------
My code is now as follows. How and where do i close the row div?
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<?php if ($i % 3 == 0) { ?>
<div class="row">
<?php } ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<?php $i++; endforeach; ?>
---------------EDIT 2----------------
Getting closer. This is the result:
<div class="category-list">
<div class="row"></div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
</div>
How do I get rid of the empty row?
The code is now as follows:
<div class="category-list">
<?php
$i=0;
echo '<div class="row">';
$_categories = $this->getCurrentChildCategories();
foreach($_categories as $_category):
{
if($i %3 ==0)
{ ?>
</div>
<div class="row">
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
else
{ ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
$i++;
}
endforeach;
?>
</div>
---------------EDIT 3----------------
Solved by hiding the empty row via CSS.
You have to introduce az iterator (?) variable for example $i = 0
if ($i % 3 == 0) { //modulo
// use for whatever you want
}
In every cycle (maybe at the end of it, it depends on your real solution) you have to increment $i (++$i);
Hope this helps
<?php
$i=0;
echo"<div class="row" >
foreach($category as $cat)
{
if($i %3 ==0)
{
echo"</div><div class='row'> <div class='item'> Content </div>";
}
else
{
echo"<div class='item'> Content </div>";
}
$i++;
}
echo"</div>";
?>