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>
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
Hello guys!
I'm trying to use a foreach cicle to show some images from my disk but something is getting wrong. It show and error saying
Message: Array to string conversion
Line Number: 306
Here is my foreach cicle
<div class="col-lg-9">
<div class="row">
{foreach $products as $product}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top border-bottom" src="{$product.image}" alt="">
<div class="card-body">
<h6 class="card-title">
<p class="text-dark">{$product.name}</p>
</h6>
</div>
<button type="button" class="btn btn-secondary"><i class="material-icons">local_grocery_store</i><span class="float-right mr-4">Adicionar ao carrinho</span></button>
</div>
</div>
{/foreach}
</div>
</div>
My error said the problem is on this line
$data['products'] = '.base_url(' . $this->Cart_model->get_img() . ').';
Also my model with get_img() is this
public function get_img(){
$sql = "SELECT * FROM products";
$query = $this->db->query($sql);
return $query->result();
}
and this is my database
Data base example
I think the issue is that you're using base_url to call the model, remove the base_url and then call the model. Like this -
$data['products'] = $this->Cart_model->get_img(); // returns array of objects
In your view file, use foreach to traverse the data then you'll have to do something like
<?php echo base_url()."path/to/folder/$product->table_image_column"; ?>
View (in php) // this is how I'd do.
<?php foreach($products as $product) { ?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top border-bottom" src="<?php echo base_url()."your/path/$product->image"; ?>" alt="">
<div class="card-body">
<h6 class="card-title">
<p class="text-dark"><?php echo $product->name; ?></p>
</h6>
</div>
<button type="button" class="btn btn-secondary"><i class="material-icons">local_grocery_store</i><span class="float-right mr-4">Adicionar ao carrinho</span></button>
</div>
</div>
<?php } ?>
or if you're using any framework and don't want to mingle php in it. Use foreach in the controller itself and add base_url() to the image. You don't have to make any changes in the view for this-
Controller
$i= 0;
foreach($products as $product) {
$products[$i]->image = base_url()."path/to/image/$product->image"; // change the products array with new values
$i++;
}
See if it helps you.
The answer is add src="<?php echo base_url('{$product.image}'); ?>" in the Views
<div class="row">
{foreach $products as $product}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top border-bottom" src="<?php echo base_url('{$product.image}'); ?>" alt="" style="width:30px;height:30px;">
<div class="card-body">
<h6 class="card-title">
<p class="text-dark">{$product.name}</p>
</h6>
<div class="text-danger"><b><span>{$product.price}€ </span></b><span class="text-secondary float-right"><del>{number_format((float)$product.price*1.5, 2, '.', '')}€</del></span></div>
</div>
<button type="button" class="btn btn-secondary"><i class="material-icons">local_grocery_store</i><span class="float-right mr-4">Adicionar ao carrinho</span></button>
</div>
</div>
{/foreach}
</div>
I am working on codeigniter and i want to show multiple images on each slider and images i am getting from database , i am able to show one image but how can i achieve this
front end code is this
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
<img src="<?php echo base_url('/assets/images/car.jpg') ?>">
</div>
</div>
</div>
</div>
As you told, that you'll receive data from database and it seems like an array, lets take it as next:
$urls = ['/assets/images/car.jpg',
'/assets/images/car2.jpg',
'/assets/images/car3.jpg',
'/assets/images/car4.jpg',
'/assets/images/car5.jpg',
'/assets/images/car6.jpg'
];
You can use foreach loop (or for loop, or while loop):
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<?php foreach($urls as $item): ?>
<img src="<?= base_url($item); ?>">
<?php endforeach; ?>
</div>
</div>
</div>
</div>
Here <?= equal to <?php echo.
Simplified Demo in PHP
This way will give you 6 images in a row. You can apply third-party plugin and get carousel with 2 rows.
If you want to separate them with hard-code you can define HTML as next:
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<div class="row">
<?php foreach($urls as $ind => $item): ?>
<?php if($ind % 3 == 0 && $ind != 0): ?>
</div><div class="row">
<?php endif; ?>
<img src="<?= base_url($item); ?>">
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
This way will give you 6 images in 2 rows.
If you're using carousel put next in the body of it:
<div class="item active">
<div class="row">
<div class="col-md-12">
<div class="six-image">
<div class="carousel">
<?php foreach($urls as $item): ?>
<div><img src="<?= base_url($item); ?>"></div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
$('.carousel').slick({
dots: true,
slidesPerRow: 3,
rows: 2,
responsive: [
{
breakpoint: 478,
settings: {
slidesPerRow: 1,
rows: 1,
}
}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css"/><script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="carousel">
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://d.newsweek.com/en/full/520858/supermoon-moon-smartphone-photo-picture.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://d.newsweek.com/en/full/520858/supermoon-moon-smartphone-photo-picture.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://cdn.images.express.co.uk/img/dynamic/151/590x/Black-hole-picture-please-time-date-first-image-black-hole-event-horizon-telescope-1112295.jpg" alt=""></div>
<div class=""><img width="60px" height="60px" src="https://d.newsweek.com/en/full/520858/supermoon-moon-smartphone-photo-picture.jpg" alt=""></div>
</div>
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>
I'm trying to show my news block with bootstrap4 as
<div class="col-md-3">
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
</div>
<div class="col-md-3">
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
</div>
<div class="col-md-6">
<div class="card mb-big">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
</div>
I have an array with results of database query in
$arResult["ITEMS"]
I want to do this with loop by
<? foreach ($arResult["ITEMS"] as $arItem): ?>
<?endforeach?>
I know i need to use something like
$i=0
if (i===2){
} else if ($k === 4) {
} else {}
$i++;
but how can i remove col-md-3 from loop.
<?php
$i=0
foreach ($arResult["ITEMS"] as $arItem): ?>
<div class="col-md-3">
<div class="card mb-4"></div>
</div>
if (i===2){
<div class="col-md-3">
<div class="card mb-4"></div>
</div>
}
if (i===4){
<div class="col-md-6">
<div class="card mb-4"></div>
</div>
}
I'm afraid I'm a little confused. How to show it in one loop?
Assuming you have 5 elements in the array, you could use %2 (modulo) to write <div class="col-md-3"> and check if it's the last element to change col-md-3 to col-md-6 and mb-4 to mb-big:
if (!empty($arResult["ITEMS"])) {
foreach ($arResult["ITEMS"] as $k => $item) {
$is_last = $k == count($arResult["ITEMS"]) - 1;
if ($k%2 == 0) {
echo '<div class="'.($is_last?'col-md-6':'col-md-3').'">';
}
echo' <div class="card '.($is_last?'mb-big':'mb-4').'"></div>';
if ($k%2 == 1) echo '</div>';
}
echo '</div>';
}
Will output (reformatted):
<div class="col-md-3">
<div class="card mb-4"></div>
<div class="card mb-4"></div>
</div>
<div class="col-md-3">
<div class="card mb-4"></div>
<div class="card mb-4"></div>
</div>
<div class="col-md-6">
<div class="card mb-big"></div>
</div>