Custom Wordpress Loop (Grid/Row) - php

Basically I need a custom Wordpress post loop which outputs posts in the following format (it should be formatted that way for every two posts, so two posts each in a "col" div both contained in the "row" div.):
<div class="row cols2">
<div class="col left">
<img src="featured-image.jpg" />
<h2>Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div><!-- /.col left -->
<div class="col right">
<img src="featured-image.jpg" />
<h2>Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div><!-- /.col right -->
</div><!-- /.row cols2 -->
I have more or less achieved this using the following loop:
<?php $counter=1;$grids=2;global $query_string;query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');if(have_posts()):while(have_posts()):the_post();if($counter==1):?>
<div class="row cols2">
<div class="col left">
<?php the_post_thumbnail('default-thumb')?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt() ?>
</div><!-- /.col left -->
<?php elseif($counter==$grids):?>
<div class="col right">
<?php the_post_thumbnail('default-thumb')?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt() ?>
</div><!-- /.col right -->
</div><!-- /.row cols2 -->
<?php $counter=0;endif;$counter++;endwhile;endif;?>
The only problem with this is when there is only one post in the ".row cols2" div it messes up because the ".row cols2" closing tag is only outputted when there are two posts in a row. If anyone has any idea on how to help it would be GREATLY appreciated!

I'm so glad i dont have to work with your code, it's a nightmare to read. I would recommend not bunching up conditions and loops like that, it just makes reading and debugging so much more difficult.
On to your question, the basic idea is that you output the container every even count increment, then check the counter at the end to find if your missing any requirements (i.e. table cells in a table, an ending tag for an element e.c.t.).
So all you need to do is check it at the end (i've also rewritten your post output, never duplicate the same code unnecessarily, it could cause you issues later on when you make changes to one and not the other).
<?php
$counter=1;
$grids=2;
global $query_string;
query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');
if(have_posts()):
while(have_posts()):
the_post();
//-- ouput start elements
if($counter==1): ?>
<div class="row cols2">
<div class="col left">
<?php
elseif($counter == $grids): ?>
<div class="col right">
<?php endif; ?>
<?php /* Output column box content */ ?>
<?php the_post_thumbnail('default-thumb')?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt() ?>
<?php /* always need to close the inner div */ ?>
</div>
<?php
//-- if its the second column, then end row and reset counter
if($counter == $grids): ?>
</div>
<?php
$counter = 0;
endif; ?>
<?php
$counter++;
endwhile;
if($counter == 1):
//--- output empty second column div then end the row
?>
<div class="col right"></div>
</div>
<?php
endif;
?>
<?php
/** Forgot this one */
endif;
?>

Finally got it working correctly, based off Lee's code, really appreciate the help! The code:
<?php $counter=1;global $query_string;query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');if(have_posts()):while(have_posts()):the_post();if($counter==1):?>
<div class="row cols2">
<div class="col"><?php elseif($counter==2): ?><div class="col"><?php endif; ?>
<?php the_post_thumbnail('default-thumb')?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt() ?>
</div><!-- /.col -->
<?php if($counter==2): ?></div><!-- /.row cols2 -->
<?php $counter=0;endif;$counter++;endwhile;if($counter==2):?></div><!-- /.row cols2 --><?php endif;endif; ?>

Related

The main html in Wordpress front-page is not displaying, how can i fix it?

The html inside the main tag is not displaying but when I inspect the code, the html is there. This happens after I added the get_header function which gets a new header that is only for the front-page (other pages will get the normal header). The header and the footer are displaying without issues, only some listed items in the hero section aren't displaying either. I'm new to Wordpress and PHP, what is the best way to fix this?
My header-new.php code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Title</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex align-items-center">
<div id="navbar-container">
<div class="logo d-block d-lg-none">
<img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Maite Richert Logo" class="img-fluid">
</div>
<nav class="nav-menu d-none d-lg-block">
<ul class="nav-inner">
<li class="active">Meet Me</li>
<li class="drop-down">Programs
<ul>
<li>One-to-one Coaching</li>
<li>Posing Lessons</li>
</ul>
</li>
<li class="nav-logo"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Logo" class="img-fluid logo-image"></li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">
My footer.php code:
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="social-links">
<img src="<?php bloginfo('template_directory');?>/assets/img/tiktok.png" alt="TikTok Icon" class="tiktok">
<i class="bx bxl-instagram"></i>
<i class='bx bxl-youtube'></i></i>
</div>
</div>
</div>
<div class="container footer-bottom clearfix">
<div class="copyright">
© <strong><span>Maite Richert</span></strong>. All Rights Reserved. 2020
</div>
</div>
</footer><!-- End Footer -->
<i class="icofont-simple-up"></i>
<?php wp_footer();?>
</body>
</html>
And my front-page.php code:
<!-- ======= About Us Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Meet Me</h2>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-right">
<div class="image">
<img src="<?php bloginfo('template_directory');?>/assets/img/maite.jpg" class="img-fluid" alt="Fitness Coach">
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="content pt-4 pt-lg-0 pl-0 pl-lg-3 ">
<h3>Hi, I'm Maite</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End About Us Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Programs</h2>
</div>
<div class="row" style="margin-bottom: 10vh;">
<div class="col-lg-6 order-2 order-lg-1 services-box">
<div class="icon-box mt-5 mt-lg-0" data-aos="fade-up">
<i class="icofont-muscle-weight"></i>
<h4>One-to-one coaching</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="learn-more-btn">Learn More</div>
</div>
<div class="icon-box mt-5" data-aos="fade-up" data-aos-delay="100">
<i class="icofont-trophy"></i>
<h4>Posing Coach</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="learn-more-btn">Learn More</div>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100"><img class="img-fluid" src="<?php bloginfo('template_directory');?>/assets/img/services.jpg" alt="Fitnees posing"></div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-1 d-flex flex-column justify-content-center align-items-stretch">
<div class="content" data-aos="fade-up">
<h3><b>Why should you choose me?</b></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>How can you help you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Will this work for you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Aren't all the personal trainers the same?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</section><!-- End Why Us Section -->
<!-- ======= Sponsors Section ======= -->
<section id="sponsors" class="sponsors">
<div class="container">
<h3>Sponsors</h3>
<div class="row sponsor-img-container">
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="400">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-5-1.png" id="womens-best" class="img-fluid" alt="Women's Best">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="500">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-6.png" class="img-fluid" alt="Ryderwear">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="300">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-4-1.png" id="wbff" class="img-fluid" alt="WBFF">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="100">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-2.png" class="img-fluid" alt="FitGriff">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="200">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-3-1.png" id="f4" class="img-fluid" alt="Factory 4">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-1.png" class="img-fluid" alt="Basic Fit">
</div>
</div>
</div>
</section><!-- End Sponsors Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>If you are interested in my services or if you have any questions, don't hesitate to contact me!</p>
</div>
<div class="row">
<div class="col-lg-8 mt-5 mt-lg-0 form-box">
<form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-left">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
<p>So I can get to know you better.</p>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
<p>Only to reply you back. No marketing.</p>
</div>
</div>
<div class="form-group" style="padding-bottom: 2rem;">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center form-btn-container"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<?php get_footer();?>
This is not a direct answer to your question, but it may solve your problem, so I hope the answer is helpful for you.
If you only want to add a hero section to your front page, I think you do not need a page template and header template only for this one case. You could add a if clause inside of your default header.php checking if you are on frontpage. If it is true, your hero section is being inserted:
<body>
<?php if (is_front_page()) { ?>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<?php } ?>
.
.
.
This would be my solution. Does it work for you? If not, try chaning the content of your hero-container to check if something is wrong with this code. Just add a <p>test</p> to see that the if clause is working and that only the frontpage is outputting the paragraph with "test".
If you want to have a different page template (maybe because there are more pages you want to show the hero section), make sure you use the right file names to make wordpress template hierarchy work: https://developer.wordpress.org/themes/basics/template-hierarchy/
Page Template can be created with copying the page.php, renaming it page-frontpage.php and adding /* Template Name: Frontpage */ at the top of it. Go to your wordpress backend and edit your frontpage. On the right side under "page attributes" select the created page template.
Inside of your page-frontpage.php change the get_header() function to:
get_header('frontpage');
Then create a copy of your header.php and name it "header-frontpage.php".
Now every page that has the "frontpage" page template, will use the header with the name "frontpage". In the header-frontpage.php you make your changes.
For me a template only makes sense, if it is applied to more pages. For one case, you can do more easy and faster using an if clause.
Hope this can help you.

Content of HTML file has changed after copying files from one directory to another in Laravel

I've created the functionality for copying the HTML files from one directory to another using File::copyDirectory($source, $destination); in Laravel. But after copying the files the HTML content is getting changed.
For Ex:
Files From Source Dir (/themes/myDir/):
index.html
about.html
Destingation Dir is (/apps/myNewDir/)
Now, I am copying the file from 'themes/myDir/' dir to 'apps/myNewDir/' dir. For that, I've written below code
$theme_dir = __DIR__.'/../../../themes/myDir';
$apps_dir = __DIR__.'/../../../apps/myNewDir';
File::makeDirectory($apps_dir);
return File::copyDirectory($theme_dir, $apps_dir);
After copying the file from one to another the html content is getting changed.
Let's take content index.html file from themes/myDir below which is original
<div class="row">
<div id="fh5co-board" data-columns class="ftb-gallery">
<div class="item">
<div class="animate-box">
<img src="assets/images/img_6.jpg" alt="Free HTML5 Bootstrap template">
</div>
<!--<div class="fh5co-desc">Lorem ipsum dolor sit amet, consectetur adipiszcing elit. Explicabo, eos?</div>-->
</div>
</div>
</div>
Now, after copying the file with above php/laravel code the html data is showing like below.
<div class="row">
<div id="fh5co-board" data-columns="4" class="ftb-gallery">
<div class="column size-1of4"><div class="column size-1of4">
<div class="column size-1of4"><div class="column size-1of4">
<div class="item">
<div class="animate-box bounceIn animated">
<a href="assets/images/img_6.jpg" class="image-popup fh5co-board-img" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, eos?" data-url="assets/images/img_6.jpg">
<img src="assets/images/img_6.jpg" alt="Free HTML5 Bootstrap template">
</a>
</div>
<!--<div class="fh5co-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, eos?</div>-->
</div>
</div>
</div>
</div>
</div>
This is something weird happening with me but I am sure there is some problem in this case. Now, I am struggling with finding the cause of this issue. How can it be possible? How is data changed? Is it possible?
You can see more in view source from below links:
Original HTML Code
Copied HTML Code
Note: Please ignore the top missed code (in copied code) <!DOCTYPE html> or <!--[if lt IE 7]> which I've removed manually. Please target the code from <div id="fh5co-board"> and so on, you'll get difference between both.
Only sometimes it happens.

Call to a member function result_array() on a non-object 4

i have trouble when open my web and its said Call to a member function result_array() on a non-object and i cant figure out how to solve it. i hope any of you guys can help me out.
so this is my web controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Web extends CI_Controller {
public function index(){
$data = array(
"produk_populers" => $this->mymodel->GetProduk()->result_array()
);
$comp = array(
"header" => $this->load->view("header",array(),true),
"navbar" => $this->load->view("navbar",array(),true),
"iklan" => $this->load->view("iklan",array(),true),
"produk_populer" => $this->load->view("produk_populer",$data,true),
"kategori" => $this->load->view("kategori",array(),true),
"footer" => $this->load->view("footer",array(),true),
);
$this->load->view("index",$comp);
}
public function html_produk_populer(){
$data = array(
"produk_populer" => $this->mymodel->GetProduk()
);
return $this->load->view("produk_populer",$data,true);
}
}
and this is my produk_populer.php
<div class="allcontain">
<div class="feturedsection">
<h1 class="text-center"><span class="bdots">&bullet;</span>P R O D U K<span class="carstxt">P O P U L E R</span>&bullet;</h1>
</div>
<div class="feturedimage">
<div class="row firstrow">
<div class="col-lg-6 costumcol colborder1">
<div class="row costumrow">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 img1colon">
<img src="<?php echo base_url()."assets/"; ?>images/<?php echo $produk_populer['gambar_produk']; ?>" alt="floridina">
</div>
<?php foreach ($produk_populers as $produk_populer) { ?>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 txt1colon">
<div class="featurecontant">
<h1><?php echo $produk_populer['nama_produk']; ?></h1>
<p><?php echo $produk_populer['info_produk']; ?></p>
<h1><?php echo $produk_populer['harga_produk']; ?></h1>
<!--<<button id="btnRM" onClick="rmtxt()">READ MORE</button>
<div id="readmore">
<h1></h1>
<p><br>
sed do eiusmod tempor incididunt <br>"Lorem ipsum dolor sit amet, consectetur ,<br>
sed do eiusmod tempor incididunt"Lorem ipsum dolor sit amet, consectetur1 ,
sed do eiusmod tempor incididunt"Lorem ipsum dolor sit amet, consectetur1
sed do eiusmod tempor incididunt"Lorem ipsum dolor sit amet, consectetur1<br>
</p>
<button id="btnRL">READ LESS</button>
</div>-->
</div>
</div>
<?php } ?>
</div>
</div>
<!--<div class="col-lg-6 costumcol colborder2">
<div class="row costumrow">
<?php //foreach ($produk_populers as $produk_populer) { ?>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 img2colon">
<img src="<?php //echo base_url()."assets/"; ?>images/<?php //echo $produk_populer['gambar_produk']; ?>" alt="floridina">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 txt1colon ">
<div class="featurecontant">
<h1><?php //echo $produk_populer['nama_produk']; ?></h1>
<p><?php //echo $produk_populer['info_produk']; ?></p>
<h1><?php //echo $produk_populer['harga_produk']; ?></h1>
<div id="readmore">
<h1></h1>
<p><br>
sed do eiusmod tempor incididunt <br>"Lorem ipsum dolor sit amet, consectetur ,<br>
sed do eiusmod tempor incididunt"Lorem ipsum dolor sit amet, consectetur1 ,
sed do eiusmod tempor incididunt"Lorem ipsum dolor sit amet, consectetur1
sed do eiusmod tempor incididunt"Lorem ipsum dolor sit amet, consectetur1<br>
</p>
<button id="btnRL">READ LESS</button>
</div>
</div>
</div>
<?php } ?>
</div> -->
</div>
</div>
</div>
also this is mymodel.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Mymodel extends CI_Model {
public function GetProduk($where=""){
$data = $this->db->query('select * from produk');
return $data -> result_array();
}
}
so that is all i need to ask, i hope theres anyone who can help me. Thanks
Following should work assuming you have loaded DB class.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Mymodel extends CI_Model {
public function GetProduk($where=""){
$data = $this->db->query('select * from produk');
return $data;
}
}
$this->mymodel->GetProduk()->result_array();
$this->mymodel is not working. You didn't load model. You have to load mymodel before call it by using $this->load->model('mymodel'). Or also you can load it from globally by using autoload.php

How to separate php mysqli result by limit each 4 result in a row

i'm trying to fetch the result from database with php mysqli function where by i can successfully fetch all the result, but it all show in a same row. How to make them to separate the row after display 4 result?
Let say i have total of 8 result in database. So if i'm using while loop to fetch the data and echo it it should be something like this:
data1 data2 data3 data4 data5 data6 data7 data8
But how to make it to show display like this :
data1 data2 data3 data4
data5 data6 data7 data8
This is the sample hardcoded div result:
<div class="row">
<div id="portofolio">
<!-- Project 1-->
<div class="three columns category trains">
<h5>Sponsor 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo1.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 2-->
<div class="three columns category castles">
<h5>Sponsor 2</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo2.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 3-->
<div class="three columns category nature">
<h5>Sponsor 3</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo7.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 4-->
<div class="three columns category castles">
<h5>Sponsor 4</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo3.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 5--><!-- Project 6--><!-- Project 7-->
<!-- Project 8-->
</div>
</div>
<div class="row">
<div id="portofolio">
<!-- Project 1-->
<div class="three columns category trains">
<h5>Sponsor 5</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo4.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 2-->
<div class="three columns category castles">
<h5>Sponsor 6</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo5.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 3-->
<div class="three columns category nature">
<h5>Sponsor 7</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo8.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 4-->
<div class="three columns category castles">
<h5>Sponsor 8</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img src="images/temp/logo6.jpg" class="fourimage" alt=""/>
</div>
</div>
<!-- Project 5--><!-- Project 6--><!-- Project 7-->
<!-- Project 8-->
</div>
</div>
Here is the php code that i'm going to display the result but i had no clue how to separate the result with 4 and go to next line and display.
PHP Code here:
<?php
include 'dbConnection.php';
global $dbLink;
$image = "SELECT * FROM sponsor_item where sponsor_data !='' ";
$result=mysqli_query($dbLink,$image);
// Numeric array
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<div class="row">
<div id="portofolio">
<!-- Project 1-->
<div class="three columns category trains">
<h5>Sponsor 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img style="margin-left: 0px; margin-top: -218.375px; width: 100%; height: 1150px;" src="data:image/jpeg;base64,<?php echo base64_encode($row['sponsor_data']); ?>" alt="image0<?php echo $row['sponsor_item_id']; ?>">
</div>
</div>
</div>
<?php
}
mysqli_free_result($result);
// Close the mysql connection
$dbLink->close();
?>
You need to add a counter and look when the counter value is a multiple of 4. If it's the case, just echo the the DIV end tag and a new DIVstart tag. You also need to exclude the first and last DIV tags from the WHILE loop :
<?php
include 'dbConnection.php';
global $dbLink;
$image = "SELECT * FROM sponsor_item where sponsor_data !='' ";
$result=mysqli_query($dbLink,$image);
$item = 0;
?>
<div class="row">
<div id="portofolio">
<?php
// Numeric array
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<!-- Project 1-->
<div class="three columns category trains">
<h5>Sponsor 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img style="margin-left: 0px; margin-top: -218.375px; width: 100%; height: 1150px;" src="data:image/jpeg;base64,<?php echo base64_encode($row['sponsor_data']); ?>" alt="image0<?php echo $row['sponsor_item_id']; ?>">
</div>
</div>
<?php
$item++;
if ($item % 4 == 0) { echo '</div></div><div class="row"><div id="portofolio">'; }
}
mysqli_free_result($result);
// Close the mysql connection
$dbLink->close();
?>
</div>
</div>
Count how many rows you've printed, then use that to insert a row after however many rows
$counter = 0;
foreach($result as....)
{
print $result->whatever;
$counter++;
if($counter % 4 == 0) // Counter divides cleanly by 4
{
print "<br />";
//Or whatever goes between your rows, eg </div><div class="whatever">
}
}
To do this, use the modulus operator, %. This gives the remainder of dividing the first number by the second, so gives an answer of 0 if the number cleanly divides
eg
1 % 4 = 1 // No new line
2 % 4 = 2 // No new line
3 % 4 = 3 // No new line
4 % 4 = 0 // New line!
5 % 4 = 1 // No new line
Use
<?php
$counter=1;
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
{
if($counter%4==0)
{
?>
<div class="row">
<div id="portofolio">
<?php
}
?>
<!--Your Regular repeating DIVS start here-->
<div class="three columns category trains">
<h5>Sponsor 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="portofoliothumb">
<img style="margin-left: 0px; margin-top: -218.375px; width: 100%; height: 1150px;" src="data:image/jpeg;base64,<?php echo base64_encode($row['sponsor_data']); ?>" alt="image0<?php echo $row['sponsor_item_id']; ?>">
</div>
</div>
<!--Your Regular repeating DIVS end here-->
<?php
if($counter%4==0)
{
?>
</div>
</div>
<?php
}
$count+=1;
}
?>

How to show dynamic content into a div using bootstrap vertical tab by click event in PHP

Basically i show static content a into div using Bootstrap vertical tab. Something like that.
Html: http://ezytheme.com/test/verticaltimeline/index.html
But problem is that i can't show dynamic content into a div using bootstrap vertical tab by click event in PHP
I'm trying to solve but can't get any proper guide. Anybody tell me a way to solve this problem.
Bellow my code:
index.php
<?php
include("vars.php");
?>
<div class="lan_vertical_timeline">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<?php $j=3; ?>
<?php for($i=1; $i<=$j; $i++)
{ ?>
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon"></div>
<div class="cbp_tmlabel">
<h3>CHIILDREN IN CARE</h3>
<p>Ad munere detraxit.</p>
</div>
</li>
</ul>
</a>
</li>
<?php } ?>
</ul>
<?php
$i = 0;
foreach($blog_item as $newItem) {
?>
<div class="back-thumbnail">
<div class="blog-content">
<h2><?php echo $newItem['name']; ?></h2>
<?php echo $newItem['description']; ?>
</div>
</div>
</div>
<?php
$i++;
}
?>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show');
$( ".tab-pane" ).addClass( "animated fadeInRight" );
});
</script>
vars.php
<?php
$blog_item = array(
array(
"name" => "Item One",
"description" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
),
array(
"name" => "Item Two",
"description" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
),
array(
"name" => "Item Three",
"description" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
)
);
Please see this link: http://ezytheme.com/test/php/verticaltimeline/
How do I achieve something like that?
http://ezytheme.com/test/verticaltimeline/index.html
jsfiddle: http://jsfiddle.net/bretlee45/btt07zsj/1/
You can use JQuery Ajax
Api Documentation

Categories