using library simple_html_dom.php
$html = file_get_html($link);
In structure like this
<div class="ps">
<h3>Lorem ipsum 1</h3>
<p>Lorem ipsum 2</p>
<h3>Lorem ipsum 3</h3>
<p>Lorem ipsum 4</p>
<div class="extras250">
<div class="boxType3 naSkroty">
<div class="boxBody shortList">
<h3>Lorem ipsum 5</h3>
</div>
</div>
<div class="boxType4 wsparcie">
<div class="boxBody">
<h3>Lorem ipsum 6</h3>
<p>Lorem ipsum 7</p>
</div>
</div>
</div>
</div>
foreach ($html->find('.ps h3') as $naglowek) {
$info['naglowek'][$i] = $naglowek->plaintext;
$i++;
}
I'd like to find <h3> but only first level (not nested) but foreach finding all of them. How to do this ? I tried
foreach ($html->find('.ps > h3') as $naglowek)
but not works.
not sure but check once
foreach ($html->find('.ps > h3:first') as $naglowek)
Related
I'm creating a movie database website. What I'm trying to achieve is that when a user clicks on one of the movies in the Latest movies collection (shown in the picture) the main movie banner (currently displaying "Transformers", show in the picture) will update and display the selected movie's title and poster, using PHP.
Picture showing the Main Movie and Latest Movie
Main movie code:
<!-- SPECIAL MOVIE SECTION -->
<div class="section">
<div class="hero-slide-item">
<img src="./images/transformer-banner.jpg" alt="">
<div class="overlay"></div>
<div class="hero-slide-item-content">
<div class="item-content-wraper">
<div class="item-content-title">
Transformer
</div>
<div class="movie-infos">
<div class="movie-info">
<i class="bx bxs-star"></i>
<span>9.5</span>
</div>
<div class="movie-info">
<i class="bx bxs-time"></i>
<span>120 mins</span>
</div>
<div class="movie-info">
<span>HD</span>
</div>
<div class="movie-info">
<span>16+</span>
</div>
</div>
<div class="item-content-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, possimus eius. Deserunt non odit, cum vero reprehenderit laudantium odio vitae autem quam, incidunt molestias ratione mollitia accusantium, facere ab suscipit.
</div>
<div class="item-action">
<a href="#" class="btn btn-hover">
<i class="bx bxs-right-arrow"></i>
<span>Watch now</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- END SPECIAL MOVIE SECTION -->
Latest movie code:
<!-- MOVIE ITEM -->
<a href="#" class="movie-item">
<img src="<?php echo $row ["PosterLink"]; ?>" alt="">
<div class="movie-item-content">
<div class="movie-item-title">
<?php echo $row ["Title"]?>
</div>
<div class="movie-infos">
<div class="movie-info">
<i class="bx bxs-star"></i>
<span><?php echo $rating?></span>
</div>
<div class="movie-info">
<i class="bx bxs-time"></i>
<span><?php echo $runTime?></span>
</div>
<div class="movie-info">
<span>Director: <?php echo $director?></span>
</div>
</div>
</div>
</a>
<!-- END MOVIE ITEM -->
there
If you want to use only PHP, then you can pass some parameter to server when a user clicks on any movies in latest movie section so,
add some unique query parameter in anchor tag where user will be redirected when he clicks on a movie.
<your code>
then on server side get movie_id using $_GET['movie_id'] and fetch data of that movie,
then you need to make SPECIAL MOVIE SECTION also dynamic,
store movie data in any variable and use that variable in rendering SPECIAL MOVIE SECTION.
Let me know if you don't understand anything.
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.
I just got into bootstrap recently before I only worked with normal html,php ,css code
tbh I'm too scared of using bootstrap I'm trying to create e commerce website and I add all my works on html and decided to switch and transfer my php/sql code and apply it using bootstrap I have two questions:
is it hard or complicated to move my php/sql code and apply it to another pages in bootstrap
how can I load url data from mysql into my thumbnail (image, product info..etc)
I apologies for using the snippet I tried to insert the code using ctrl -k but the format is messy
<div class="container">
<div class="row text-center">
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6 hidden-lg hidden-md hidden-sm">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
</div>
<div class="row text-center hidden-xs">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
</div>
</div>
bootstrap is just css and javascript although the html markup can be much more than you are used too. If you have done it before without using bootstrap then you already have your answer because the process is the same. Just add
on the thumbnail 'img' tag 'src' attribute
Use like this it may work for you.
<div class="container">
<div class="row text-center">
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT image_path FROM tbl_name";
$result = $conn->query($sql);
while($row = $result->fetch_assoc())
{
?>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="<?=$row['image_path']; ?>" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
Is it hard or complicated to move my php/sql code and apply it to another pages in bootstrap?
No it is not hard or complicated at all. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive sites. Just you should learn basics.
How can I load url data from mysql into my thumbnail (image, product info..etc)
Hope you know basic select query. By using select query fetch image path and display path in img src. It will work perfectly.
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;
}
?>
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; ?>