My code for the picture below is this:
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
<div class="col-md-4 col-xs-6">
<img src="images/1.jpg" class="img-responsive img-thumbnail">
</div>
</div>
</div>
I think it's okay to do it like that if the images are not called from the database. So my problem is, if i had several images in the database(MySQL) and want to call and display it as in the picture, what is the effective way to display them other than having to repeat the same code over and over. Am using bootstrap 3.3.7. Beginner here and would really appreciate some guidance, thanks.
<div class="container">
<div class="row">
<?php
include('conexion.php');
$query = "SELECT * from your_tables";
$result = $mysqli->query($query);
while($row = $result->fetch_array()){
echo ' <div class="col-md-4 col-xs-6">
<img src="'.$row["image"].'" class="img-responsive img-thumbnail">
</div>';
} <?
</div>
</div>
Related
I have created a home page in codeigniter and have created a home controller in it. Index method has been created in the home controller, in which all articles have been shown.
Now another function is added in the home controller in which to show all articles of single category, I also made model but in this show all articles in all categories.
If I am calling only method then query is working but showing in home html page then all data showing all category.please help me
<?php
class Home extends CI_Controller{
function index(){
$this->load->model('Article_model');
$param['offset']=4;
$param['limit']=0;
$articles=$this->Article_model->getArticlesFront($param);
$data['articles']=$articles;
$this->load->view('front/home',$data);
}
function computerCategory(){
$this->load->model('Article_model');
$param['offset']=4;
$param['limit']=0;
$articles=$this->Article_model->getComputerArticlesFront($param);
$data['articles']=$articles;
$this->load->view('front/computer_category',$data);
}
}
?>
/*front computer category methods*/
function getComputerArticlesFront($param= array()){
$query = $this->db->get('articles');
if(isset($param['offset']) && isset($param['limit'])){
$this->db->limit($param['offset'],$param['limit']);
}
if(isset($param['q'])){
$this->db->or_like('title',trim($param['q']));
$this->db->or_like('author',trim($param['q']));
}
if(isset($param['category_id'])){
$this->db->where('category',$param['category_id']);
}
$this->db->select('articles.*,categories.name as category_name');
$this->db->where('articles.category',43);
$this->db->order_by('articles.created_at','DESC');
$this->db->join('categories','categories.id=articles.category','left');
$query = $this->db->get('articles');
//echo $this->db->last_query();
$articles = $query->result_array();
//echo $this->db->last_query();
return $articles;
}
<!--computer news start-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<div class="row gx-4">
<div class="p-3 border bg-success text-white">
<h3>कंप्यूटर</h3>
</div>
</div>
<div class="row pb-3 pt-4">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
</div>
</div>
</div><!--latest blogs-->
<?php }?>
<!--computer news end-->
this page is being open but when i put this page then show all category
just like
<?php $this->load->view('front/header'); ?>
<div class="container pt-4 pb-4">
<h3 class="pb-3">About Company</h3>
<p class="text-muted"> Nike clearly knows its audience and makes their mission obvious to them as soon as they land on the About Us page. There's no question that the visitor is in the right place and understands exactly what Nike has set out to do. </p>
<p class="text-muted"> Nike clearly knows its audience and makes their mission obvious to them as soon as they land on the About Us page. There's no question that the visitor is in the right place and understands exactly what Nike has set out to do. </p>
</div>
<!--computer category list-->
<?php if(!empty($articles)){?>
<?php $this->load->view('front/computer_category');?>
<?php }?>
<!--yoga news start-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<div class="row gx-4">
<div class="p-3 border bg-success text-white">
<h3>योग</h3>
</div>
</div>
<div class="row pb-3 pt-4">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
</div>
</div>
</div><!--latest blogs-->
<?php }?>
<!--yoga news end-->
<!--lifestyle news start-->
<?php $this->load->view('front/lifestyle');?>
<!--lifestyle news end-->
<!--technology news start-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<div class="row gx-4">
<div class="p-3 border bg-success text-white">
<h3>लाइफस्टाइल</h3>
</div>
</div>
<div class="row pb-3 pt-4">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
</div>
</div>
</div><!--latest blogs-->
<?php }?>
<!--technology news end-->
<div class="bg-light pb-4">
<div class="container">
<h3 class="pb-3 pt-4">OUR SERVICES</h3>
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box1.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box2.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box3.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box4.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Website Development</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div><!--card 1-->
</div>
</div>
</div><!--our services-->
<?php if(!empty($articles)){?>
<div class="pb-4 pt-4">
<div class="container">
<h3 class="pb-3 pt-4">LATEST BLOGS</h3>
<div class="row">
<?php foreach ($articles as $article) {?>
<div class="col-md-3">
<div class="card">
<?php if(file_exists('./public/uploads/articles/thumb_admin/'.$article['image'])){?>
<img src="<?php echo base_url('public/uploads/articles/thumb_admin/'.$article['image'])?>" class="card-img-top" alt="">
<?php }?>
<div class="card-body">
<p class="card-text"><?php echo $article['title'];?></p>
Go somewhere
</div>
</div>
</div><!--card 1-->
<?php }?>
<!--<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box2.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>card 1-->
<!--<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box3.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>card 1-->
<!--<div class="col-md-3">
<div class="card">
<img src="<?php echo base_url('public/images/box4.jpg');?>" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>card 1-->
</div>
</div>
</div><!--latest blogs-->
<?php }?>
load->view('front/footer'); ?>
then page show
in this page all category article show
i requesting to all please help me
I'm new into PHP. I googled this question but cannot get value still.
I have a PHP project where
<?php
foreach($categories as $key => $cat){
?>
<div class="container-fluid ">
<div class="row justify-content-around mt-5">
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img style="margin-bot: 100px;" class="card-img-top" src="imagenes/drinks3.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img class="card-img-top" src="imagenes/snacks.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img class="card-img-top" src="imagenes/postres1.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
</div>
</div>
I need to print each value once time to get a card with each category of $categories.
But im getting 9 cards with each category repeated 3 times.
I tried with index but it only get broken with offset 0.
Print the nested div you need to be unique in a loop:
<div class="container-fluid ">
<div class="row justify-content-around mt-5">
<?php
foreach($categories as $key => $cat){
?>
<div class="card border-0" style="width: 25rem;">
<div class="display-3"><?php echo $cat ?></div>
<img style="margin-bot: 100px;" class="card-img-top" src="imagenes/drinks3.png" alt="Card image cap">
<div class="card-body">
</div>
</div>
<?php } ?>
</div>
</div>
I am new to opencart,i am trying to change the store name in footer.
please answer me fast.
Go to Catalog/view/theme/default/template/common/footer.tpl
<div class="container-fluid bottom-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p>Copyright 2016. Cartridgewala.com. All Rights Reserved.</p>
</div>
<div class="col-sm-12 text-center">
<p><img src="<?php echo 'image/weaccept.png'; ?>" title=" " alt=" " class="img-responsive" style=" display:inline-block" /></p>
</div>
</div>
</div>
Currently I have three col-md-4 columns displaying an image in each. If a user only has say 1 or 2 images uploaded it will float the content left as normal but leave the third with wasted space.
Is it possible with CSS to centre the 1-2 columns until a 3rd has been added?
<div class="container>
<div class="row">
<div class="col-md-4 image-1">
<img>
</div>
<div class="col-md-4 image-2">
<img>
</div>
<div class="col-md-4 image-3">
<img>
</div>
</div>
</div>
I think you should not mix left-aligned items (when 3 or more) with center aligned items. What happens when a group of 2 items follows a group of 4 or 5?
If you want them all centered, just add a custom class (.centerRows in my case) to the container and use the CSS below:
.centerRows>.row {
text-align: center;
}
.centerRows>.row>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
If you only want to center the rows with 2 or less children, add a custom class to the rows you want centered, after counting their children via js. Proof of concept:
$('.container>.row').each(function(){
if($(this).children().size() < 3) $(this).addClass('centerMe');
})
.centerMe {
text-align: center;
}
.centerMe>[class^="col-"] {
text-align: initial;
float: none;
margin: 0 auto;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-3">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="row">
<div class="col-md-4 image-1">
<img src="http://placehold.it/350x150">
</div>
<div class="col-md-4 image-2">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
IMHO you can't do this with css. It can be done
using JS. Something like this:
if($('.image-3').length === 0){
$('.row').find('div').RemoveClass('col-md-4');
$('.row').find('div').AddClass('col-md-6');
}
But if you'll add more statement to the algorithm, i mean
"if it will be only one div, or only 4(with one on next row)"
you'll have to get more complicated code.
i am using a main fours divs first div has class ad1, second and third div has class ad2 and then last div has class ad3...
i want to display 4 images from database
How to do it through while loop, please help, Thanks :)
here is html code and the php code....
<div class="col-md-9 hidden-sm hidden-xs">
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="ad1">
<img src="" alt="">
</div>
</div>
<div class="col-md-2">
<div class="ad2">
<img src="" alt="">
</div>
</div>
<div class="col-md-2">
<div class="ad2">
<img src="" alt="">
</div>
</div>
<div class="col-md-5">
<div class="ad3">
<img src="" alt="">
</div>
</div>
</div>
php code is
<?php
$query = "SELECT * FROM headerimages limit 4";
$result = mysqli_query($con, $query) or die(mysqli_error($query));
while ($row = mysqli_fetch_array($result))
{?>
<?php
}
?>
First of all I recommend to use pdo database driver.
In your code the fast fix will be to assign result to array and simply echo it in the view.
$result = array();
while ($row = mysqli_fetch_array($result))
{
$result[]=$row['img'];
}
and in view echo it
<div class="col-md-9 hidden-sm hidden-xs">
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="ad1">
<img src="<?=$result[0]?>" alt="">
</div>
</div>
<div class="col-md-2">
<div class="ad2">
<img src="<?=$result[1]?>" alt="">
</div>
</div>
<div class="col-md-2">
<div class="ad2">
<img src="<?=$result[2]?>" alt="">
</div>
</div>
<div class="col-md-5">
<div class="ad3">
<img src="<?=$result[3]?>" alt="">
</div>
</div>
</div>