When i am adding products under the same category in a dynamic site, only the first product is getting displayed

Question

I am doing a dynamic site. The products are added from the backend. In my main page, i have 5 sections for displaying the products. On clicking a particular section, only its products should be displayed.

The problem is when I am adding more than one product under a particular category, images of the product are getting overlapped over each other. Can somebody help me?

The second image of each category is going under the first image

This is how it should be displayed. but this is possible only when adding one product of each category

<section id="services">
      <div class="container">

        <header class="section-header wow fadeInUp">
          <h3>Products</h3>
          <section id="portfolio"  class="section-bg" >
      <div class="container">

      

        <div class="row">
          <div class="col-lg-12">
            <ul id="portfolio-flters">
              <li data-filter="*" class="filter-active">All</li>
              <li data-filter=".filter-app">Tiles</li>
              <li data-filter=".filter-card">Sanitary Ware</li>
              <li data-filter=".filter-web">Plumbing</li>
              <li data-filter=".filter-web1">Electrical</li>
            </ul>
          </div>
        </div>

        <div class="row portfolio-container">
  
  <!--tiles-->
          <div class="col-lg-4 col-md-6 portfolio-item filter-app wow fadeInUp" data-wow-delay="0.2s">
    <div class="portfolio-wrap">
   
 <figure>
 <?php                    
                   require_once("admin/config/connection.php");
       $proname="";
       $pid="";
       $query1="select * from products where protype='Tiles'";
       $resource1=mysql_query($query1,$connection);
                   $result1="";
       $id="";
   
   while($record=mysql_fetch_array($resource1))
   {
   $pid=$record['pid'];
     $img="uploads/".$record['proimg'];
     $proname=$record['proname'];
     $result1.="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>
                    <img  src='$img'>
                      </div>";
   }
   ?>
   <div class="img-fluid">
                          <?php  echo $result1;?>
   </div>
                <!--<img src="img/t2.jpg" class="img-fluid" alt="">
                <a href="img/t2.jpg" class="link-preview" data-lightbox="portfolio" data-title="Tile" title="Preview"><i class="ion ion-eye"></i></a>
               -->
              </figure>

              <div class="portfolio-info">
                <h4><a href="#">Tile</a></h4>
              
              </div>
            </div>
          </div>
    <!--tiles-->

          
    <!--sanitary wares-->
    <div class="col-lg-4 col-md-6 portfolio-item filter-card wow fadeInUp">
            <div class="portfolio-wrap">
              <figure>
     <?php                    
                   require_once("admin/config/connection.php");
       $proname="";
       $pid="";
       $query1="select * from products where protype='Sanitary Ware'";
       $resource1=mysql_query($query1,$connection);
                   $result1="";
       $id="";
   
   while($record=mysql_fetch_array($resource1))
   {
   $pid=$record['pid'];
     $img="uploads/".$record['proimg'];
     $proname=$record['proname'];
     $result1.="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>
                    <img src='$img'>
                      </div>";
   }
   ?>
   <div class="img-fluid">
                          <?php  echo $result1;?>
        </div>
                <!--<img src="img/s3.jpg" class="img-fluid" alt="">
                <a href="img/s3.jpg" class="link-preview" data-lightbox="portfolio" data-title="Sanitary ware" title="Preview"><i class="ion ion-eye"></i></a>
                -->
              </figure>

              <div class="portfolio-info">
                <h4><a href="#">Sanitary ware</a></h4>
               
              </div>
            </div>
          </div>
    <!--sanitary wares-->
    
    <!--plumbing-->
<div class="col-lg-4 col-md-6 portfolio-item filter-web wow fadeInUp" data-wow-delay="0.1s">
            <div class="portfolio-wrap">
              <figure>
     <?php                    
                   require_once("admin/config/connection.php");
       $proname="";
       $pid="";
       $query1="select * from products where protype='Plumbing'";
       $resource1=mysql_query($query1,$connection);
                   $result1="";
       $id="";
   
   while($record=mysql_fetch_array($resource1))
   {
   $pid=$record['pid'];
     $img="uploads/".$record['proimg'];
     $proname=$record['proname'];
     $result1.="<div class='col-lg-4 col-md-6 mrgn_less prd'>
                    <img src='$img'>
                      </div>";
   }
   ?>
   
   <div class="img-fluid">
                          <?php  echo $result1;?>
        </div>
                <!--<img src="img/p1.jpg" class="img-fluid" alt="">
                <a href="img/p1.jpg" class="link-preview" data-lightbox="portfolio" data-title="Plumbing" title="Preview"><i class="ion ion-eye"></i></a>
               <!-- <a href="#" class="link-details" title="More Details"><i class="ion ion-android-open"></i></a>-->
              </figure>

              <div class="portfolio-info">
                <h4><a href="#">Plumbing</a></h4>
              
              </div>
            </div>
          </div>
    <!--plumbing-->
    
    
    <!--electrical-->
<div class="col-lg-4 col-md-6 portfolio-item filter-web1 wow fadeInUp" data-wow-delay="0.1s">
            <div class="portfolio-wrap">
              <figure>
     <?php                    
                   require_once("admin/config/connection.php");
       $proname="";
       $pid="";
       $query1="select * from products where protype='Electrical'";
       $resource1=mysql_query($query1,$connection);
                   $result1="";
       $id="";
   
   while($record=mysql_fetch_array($resource1))
   {
   $pid=$record['pid'];
     $img="uploads/".$record['proimg'];
     $proname=$record['proname'];
     $result1.="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>
                    <img src='$img'>
                      </div>";
   }
   ?>
   <div class="img-fluid">
                          <?php  echo $result1;?></div>
                <!--<img src="img/p3.jpg" class="img-fluid" alt="">
                <a href="img/p3.jpg" class="link-preview" data-lightbox="portfolio" data-title="Electrical" title="Preview"><i class="ion ion-eye"></i></a>
               <!-- <a href="#" class="link-details" title="More Details"><i class="ion ion-android-open"></i></a>-->
              </figure>

              <div class="portfolio-info">
                <h4><a href="#">Electrical</a></h4>
              
              </div>
            </div>
          </div>
    <!--electrical-->
    
    
      </div>
   

        </div>

      </div>
    </section>

`require_once("admin/config/connection.php");` it's called **once** so why it's include many times ? — Temani Afif, Mar 12 '18 at 09:40
would you like to go the images one under another, or you want them to be there in smaller dimensions. — Rajan Benipuri, Mar 12 '18 at 10:22
There are 5 sections here. When i click 'all', all the products of all categories should be displayed as separate images. but only first product of the 4 categories are displayed here. the second and remaining products are not getting displayed. its going below the image of its category. — chinu, Mar 12 '18 at 10:43

jtheman · Answer 1 · 2018-03-12T12:20:51.610

0

The easiest way to only show one image per box would be to limit your query to only show the first post in each category.

Adding LIMIT 1 to each query would do that, IE:

$query1="select * from products where protype='Tiles' LIMIT 1";

Please note that the page template you use cannot show only one product from a category and then show all products of the category when the filter is selected. So you would need to add all products in your listing at start. If you still need to have a category overview I would suggest that you skip the filter function and instead made two page templates. One product overview page with only the four categories, and another template for showing each product category, with all products within.

I can think of many ways to improve your code, but that is not the scope here. However you really should stop using deprecated mysql_*functions, use mysqli or PDO instead. Why shouldn't I use mysql_* functions in PHP?

edited Mar 12 '18 at 12:20

answered Mar 12 '18 at 09:56

jtheman

7,421
3
28
39

Can you help me with this? I am not able to display more than one product under a specific category. i mean the product image is going below the other. – chinu Mar 12 '18 at 10:12
OK, I understand your issue. You are trying to do something that the page template you use doesn't support. The filter function only removes images/products, and never adds images. So in the 'All' listing you CANNOT only show one of each category and then SHOW ALL of each category when one category is selected. You need to loop out all products as separate boxes, that is the only solution without rewriting the whole page code. – jtheman Mar 12 '18 at 12:04

When i am adding products under the same category in a dynamic site, only the first product is getting displayed

1 Answers1