I have the following array:
<?php
$sets = array (
array (
'img' => 'file.png',
'heading' => 'Slide Title 1',
'lead' => 'Slide leadription 1',
),
array (
'img' => 'file.png',
'heading' => 'Slide Title 2',
'lead' => 'Slide leadription 2',
),
array (
'img' => 'file.png',
'heading' => 'Slide Title 3',
'lead' => 'Slide leadription 2',
),
array (
'img' => 'file.png',
'heading' => 'Slide Title 3',
'lead' => 'Slide leadription 2',
)
);
?>
Which provides the input for this
<?php
foreach ($sets as $set) {
?>
<!-- START THE FEATURETTES -->
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
</div>
<?php
}
?>
Now this is working perfectly but I want the md-7 HTML and md-5 HTML to alternate so every other one will now be
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
</div>
So basically alternating between the picture and details left-right
UPDATE
As per Jhansen's suggestion This DOES NOT WORK. It will only take the first set, it won't alternate between the two.
<?php
foreach ($sets as $set) {
?>
<!-- START THE FEATURETTES -->
<?php $count = 1; ?>
<?php if( $count % 2 != 0 ): ?>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
</div>
<?php else: ?>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
</div>
<?php endif; ?>`
<?php
}?>
If you're just wanting to alternate, why not encapsulate the html within a modulus statement?
IE,
<?php $count = 1; ?>
<?php if( $count % 2 != 0 ): ?>
... HTML for first arrangement ...
<?php else: ?>
... HTML for second arrangement ...
<?php endif; ?>`
If you want to switch all loops, the proposed jhansen is correct:
<?php
$count=1;
foreach ($sets as $set) { ?>
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<?php if($count % 2 != 0){ ?>
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<?php }else{ ?>
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<?php } ?>
</div>
<?php $count++; } ?>
If you want to switch only the first should do something like this:
<?php
foreach ($sets as $k => $set) { ?>
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<?php if($k==0){ ?>
<div class="col-md-7">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<div class="col-md-5">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<?php }else{ ?>
<div class="col-md-7">
<h2 class="featurette-heading"><?php echo $set['heading']?></h2>
<p class="lead"><?php echo $set['lead']?></p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" src="<?php echo $set['img']?>" alt="Feature">
</div>
<?php } ?>
</div>
<?php } ?>
Related
I want to use pjax with pagination in yii2.
When user clicks on next page, i want to reload only one div with dynamic contents.
I have put pjax::begin() and pjax::end() before and end of my div.
This is my controller code :
public function actionRestaurantDetails(){
$this->layout = "detail";
if(isset($_REQUEST['rid']) && !empty($_REQUEST['rid'])){
$rid = $_REQUEST['rid'];
$snRestaurantsDetail = Restaurants::find()->where(['id'=>$_REQUEST['rid']])->one();
$snRestaurantMenuCategoryArr = MenuCategories::find()->where(["status"=>"1"])->all();
$snRestaurantMenusArr = RestaurantMenu::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"])->all();
$query = RestaurantsGallery::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"]);
$snRestaurantgallerysArr = RestaurantsGallery::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"])->all();
$pagination = new Pagination(['totalCount' => $query->count(), 'pageSize'=>3]);
$models = $query->offset($pagination->offset)
->limit($pagination->limit)
->all();
$snRestaurantLayoutsArr = $snRestaurantsDetail->getRestaurantLayouts();
$snRestaurantTablesArr = $snRestaurantsDetail->getRestaurantTables();
$snRestaurantWorkingHoursArr = $snRestaurantsDetail->getRestaurantWorkingHours();
$snRestaurantMealTimesArr = $snRestaurantsDetail->getRestaurentMealTimes();
//p($snRestaurantsDetail);
}
return $this->render('restaurant_detail', [
'snRestaurantsDetail' => $snRestaurantsDetail,
'snRestaurantMenuCategoryArr' => $snRestaurantMenuCategoryArr,
'snRestaurantMenusArr' => $snRestaurantMenusArr,
'snRestaurantMealTimesArr' => $snRestaurantMealTimesArr,
'snRestaurantWorkingHoursArr' => $snRestaurantWorkingHoursArr,
'snRestaurantgallerysArr' => $snRestaurantgallerysArr,
'models' => $models,
'pagination' => $pagination,
]);
}
And this is my view :
<?php
use common\models\RestaurantMenu;
use yii\widgets\Pjax;
?>
<div class="container">
<div class="row align-items-center site-vh-100">
<div class="col-md-12">
<?php
$url = Yii::getAlias('#web')."/img/chiefs-rs-text.png";
?>
<!-- <a class="brand" href="#"><img src="<?php echo $url; ?>" width="35%" height="35%"></a> -->
<h1 class="site-heading site-animate mb-3"><?= !empty($snRestaurantsDetail) ? $snRestaurantsDetail->name : "-" ?></h1>
<h2 class="h5 site-subheading mb-5 site-animate">Please book our restaurant now</h2>
<?php if(Yii::$app->user->isGuest){ ?>
<p>For Booking Restaurant :Register Now</p>
<?php }else{ ?>
<p>Book Now</p>
<?php } ?>
</div>
</div>
</section>
<section class="site-section section_details" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-5 site-animate mb-5">
<h4 class="site-sub-title">Our Story</h4>
<h2 class="site-primary-title display-4">Welcome</h2>
<p><?= !empty($snRestaurantsDetail->description) ? $snRestaurantsDetail->description : "No contents found." ?></p>
<!-- <p class="mb-4">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> -->
</div>
<div class="col-md-1"></div>
<div class="col-md-6 site-animate img" data-animate-effect="fadeInRight">
<img src="<?= ($snRestaurantsDetail->photo) ? Yii::getAlias('#web')."../../../uploads/".$snRestaurantsDetail->photo : "No image uploaded"?>" alt="chiefsRS" class="img-fluid" style="width:100%;height: 60vh">
</div>
</div>
</div>
</section>
<section class="site-section section_details" id="section-menu">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mb-5 site-animate">
<h2 class="display-4">Delicious Menu</h2>
<div class="row justify-content-center">
<div class="col-md-7">
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<ul class="nav site-tab-nav nav-pills mb-5" id="pills-tab" role="tablist">
<?php
if(!empty($snRestaurantMenuCategoryArr)){
foreach ($snRestaurantMenuCategoryArr as $key => $category) { ?>
<li class="nav-item site-animate">
<a class="nav-link <?= (strtolower($category->name) == "breakfast") ? 'active' : '' ?>" id="pills-<?= strtolower($category->name)?>-tab" data-toggle="pill" href="#pills-<?= strtolower($category->name)?>" role="tab" aria-controls="pills-<?= strtolower($category->name);?>" aria-selected="true"><?= $category->name;?></a>
</li>
<?php }
}
?>
</ul>
<div class="tab-content text-left">
<?php
if(!empty($snRestaurantMenuCategoryArr)){
foreach ($snRestaurantMenuCategoryArr as $key => $category) { ?>
<div class="tab-pane fade <?= (strtolower($category->name) == "breakfast") ? 'show active' : '' ?>" id="pills-<?= strtolower($category->name)?>" role="tabpanel" aria-labelledby="pills-<?= strtolower($category->name)?>-tab">
<div class="row">
<?php
$breakfastMenu = RestaurantMenu::find()->where(['restaurant_id'=>$_REQUEST['rid'],'menu_category_id'=>$category->id,'status'=>"1"])->all();
// p($breakfastMenu);
if(!empty($breakfastMenu)){
foreach ($breakfastMenu as $key_menu => $menu) { ?>
<div class="col-md-6 site-animate">
<div class="media menu-item">
<img class="mr-3" src="<?php echo Yii::getAlias('#web')."/../../uploads/".$menu->photo; ?>" class="img-fluid" alt="chiefsRS">
<div class="media-body">
<h5 class="mt-0"><?= !empty($menu->name) ? $menu->name : ""?></h5>
<p><?= !empty($menu->description) ? $menu->description : ""?></p>
<h6 class="text-primary menu-price"><?= !empty($menu->price) ? "$".$menu->price : ""?></h6>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
<?php }
}
?>
</div>
</div>
</div>
</div>
</section>
<!-- END section -->
<?php
Pjax::begin(['id' => 'gallery_r','timeout'=>100000]); ?>
<section class="site-section section_details" id="section-gallery">
<div class="container">
<div class="row site-custom-gutters">
<div class="col-md-12 text-center mb-5 site-animate">
<h2 class="display-4">Gallery</h2>
<div class="row justify-content-center">
<div class="col-md-7">
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
</div>
<div id="categories"></div>
<?php if (!empty($models)) {
foreach ($models as $key => $image) {
?>
<div class="col-md-4 site-animate">
<a href="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" class="site-thumbnail image-popup">
<img src="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title; ?>">
</a>
</div>
<?php
}
}
?>
</div>
</div>
</section>
<?php echo \yii\widgets\LinkPager::widget([
'pagination' => $pagination,
]);
Pjax::end();?>
<!-- END section -->
<section class="site-section section_details bg-light" id="section-contact">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mb-5 site-animate">
<h2 class="display-4">Get In Touch</h2>
<div class="row justify-content-center">
<div class="col-md-7">
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="text-black">
<?php
if(!empty($snRestaurantsDetail)){ ?>
Address: <br><?= $snRestaurantsDetail->address; ?><br>
Phone: <br><?= $snRestaurantsDetail->contact_no; ?><br> <br>
Email: <br> <?= $snRestaurantsDetail->email; ?>
<?php } ?>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="map"></div>
<?php// p($snRestaurantsDetail); ?>
<input type="hidden" name="lat" id="lat" value="<?= $snRestaurantsDetail->lattitude; ?>">
<input type="hidden" name="long" id="long" value="<?= $snRestaurantsDetail->longitude; ?>">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvpANF446OIBFdLaqozAf-lheEZ__oVVg&libraries=geometry"></script>
<script type="text/javascript">
$.pjax.reload({container: '#gallery_r'});
</script>
<?php Pjax::begin(['id'=>'gallery_r']);
if(!empty($models)){
foreach ($models as $key => $image) { ?>
<div class="col-md-4 site-animate">
<a href="<?php echo Yii::getAlias('#web')."../../../uploads/".$image->image_name;?>" class="site-thumbnail image-popup">
<img src="<?php echo Yii::getAlias('#web')."../../../uploads/".$image->image_name;?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title;?>">
</a>
</div>
<?php }
Pjax::end();
echo \yii\widgets\LinkPager::widget([
'pagination' => $pagination,
]);
}?>
And this is my js code :
$.pjax.reload({container: '#gallery_r'});
And I call this jquery to add class after pjax load to display contents :
jQuery(document).on("pjax:success", "#gallery_r", function(event){
contentWayPoint();
}
);
var contentWayPoint = function() {
var i = 0;
$('.site-animate').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('site-animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .site-animate.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
if ( effect === 'fadeIn') {
el.addClass('fadeIn site-animated');
} else if ( effect === 'fadeInLeft') {
el.addClass('fadeInLeft site-animated');
} else if ( effect === 'fadeInRight') {
el.addClass('fadeInRight site-animated');
} else {
el.addClass('fadeInUp site-animated');
}
el.removeClass('item-animate');
}, k * 50, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '95%' } );
};
And on one button click I am calling this URL like this :
<p class="mb-0">Read More</p>
This URL calls as ajax call and loads only pjax container div, When i reload this page manually then it will display the whole page.I don't know why this happened ?
You should move the LinkPager inside the Pjax scope.
<?php
Pjax::begin(['id' => 'gallery_r']);
if (!empty($models)) {
foreach ($models as $key => $image) {
?>
<div class="col-md-4 site-animate">
<a href="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" class="site-thumbnail image-popup">
<img src="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title; ?>">
</a>
</div>
<?php
}
echo \yii\widgets\LinkPager::widget([
'pagination' => $pagination,
]);
Pjax::end();
}
?>
Have a website in three languages. The porducts select from a mysql database and showed wiht a do-while-loop.
<!-- Shop Page Area Start-->
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
<h2>
<?php echo $page['subtitle']; ?>
</h2>
<?php echo $page['content']; ?>
</div>
<div class="row">
<?php
do {
?>
<!--Product Start-->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo $product['img']; ?>" alt=""/>
<h2>
<a href="#">
<?php echo $product['name']; ?>
</a>
</h2>
</div>
<h3>
<?php echo $product['desc']; ?>
</h3>
<span><?php echo $product['size']; ?></span> <span class="price"><?php echo $product['price']; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo $product['uniqueid']; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<!-- Product End -->
<?php
} while ($product = $res->fetch_assoc()) ?>
</div>
<!-- end Row -->
</div>
</div>
The problem is that in one language showed correctly and in the other i get a lot spaces between the products. See the image
enter image description here
How i can solve this
Add an additional class flex-row to the product wrapping row element. And try applying the following styles.
.flex-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
You can divide your column like this
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
</div>
<div class="row">
<?php $i=1;
do {
?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo "test"; ?>" alt=""/>
<h2><?php echo "test"; ?> </h2>
</div>
<h3><?php echo ($i==2)? " testtesttesttesttesttest testtesttesttest test": "test"; ?></h3>
<span><?php echo "test"; ?></span> <span class="price"><?php echo 12321; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo "1231"; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<?php
echo $i%4;
if($i%4== 0 && $i > 1) {
echo '</div><div class="row">';
}
$i++;
} while ($i<=10) ?>
</div>
</div>
</div>
When I try to view multiple data from database my static images are also showing multiple time. I try to use foreach and while with i++ but both time I get the same result.
How to view one image but multiple data.
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
foreach ($array as $arrays)
{
?>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
</div>
<?php } ?>
</div>
It's normal because your images are in the foreach.
Remove your first foreach
Make function like
foreach($array as $value){
echo $value;
}
and put them below your images.
example with your code : (but better make functions for all the foreach)
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
?>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
<h4><?php foreach ($array as $arrays)
{
echo $arrays['mobile_no'];
}?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
<h4>//same here</h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
<h4>//same here </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
<h4>//same here</h4>
</div>
</div>
</div>
</div>
Define the Image field outside the loop:
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
</div>
</div>
foreach ($array as $arrays)
{
?>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item text-center">
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
</div>
<?php } ?>
</div>
Simplest put not the most beatiful solution is to just check if its your "header" line and adding those images at first run.. you can also add the if around your images instead of dublication to much. but you will get the idea
<div class="row">
<?php
// set array
$array = array();
while($row=mysqli_fetch_assoc($result1))
{
// add each row returned into an array
$array[] = $row;
}
// debug:
$i = 0;
foreach ($array as $arrays)
{
?>
if($i == 0){
//first line
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-1.png" alt="">
<h3>Address</h3>
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/call.png" alt="">
<h3>Mobile </h3>
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-2.png" alt="">
<h3>Phone</h3>
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<img src="img/soul-icon/address-3.png" alt="">
<h3>Email</h3>
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
}else{
<div class="col-sm-3">
<div class="address_item">
<h3>Address</h3>
<h4><?php echo $arrays['address']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<h3>Mobile </h3>
<h4><?php echo $arrays['mobile_no']; ?></h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<h3>Phone</h3>
<h4><?php echo $arrays['phone_no'];?> </h4>
</div>
</div>
<div class="col-sm-3">
<div class="address_item">
<h3>Email</h3>
<h4><?php echo $arrays['email']; ?></h4>
</div>
</div>
</div>
}
<?php } ?>
</div>
I merge wordpress with bootstrap and i want get something like this:
1|
| 2
3|
I check if there is post (there is 3 at that moment). Next is loop and showing the blogs... But its show empty boxes...
What i done wrong ?
Or maybe there is better way to do this?
<div class="wrapper">
<?php
$rest_query = new WP_Query(array(
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'post_status' => 'publish'
));
if($rest_query->have_posts()):
?>
<?php while($rest_query->have_posts()): $rest_query->the_post(); ?>
<?php
if ($rest_query->current_post == 0)
{
echo '<div class="row">
<div class="col-md-6">
<div class="single first-post">
<div class="thumb"><?php the_post_thumbnail(); ?></div>
<div class="content">
<h1><?php the_title(); ?></h1>
<div class="data">
<p class="date"><?php echo get_the_date();s ?></p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
<div class="middleLine"></div>
<div class="col-md-6"></div>
</div>';
}
elseif ($rest_query->current_post == 1)
{ echo '<div class="row">
<div class="col-md-6"></div>
<div class="middleLine"></div>
<div class="col-md-6">
<div class="single secound-post">
<div class="thumb"><?php the_post_thumbnail(); ?></div>
<div class="content">
<h1><?php the_title(); ?></h1>
<div class="data">
<p class="date"><?php echo get_the_date();s ?></p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
</div>'; }
?>
<?php endwhile; ?>
<?php endif; ?>
</div>
I think you code has some error while showing in the page. While you use ECHO you should not use PHP tag inside it which is why it is not working in your case.
Revising your code:
<div class="wrapper">
<?php
$rest_query = new WP_Query(array(
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => array('post'),
'post_status' => 'publish'
));
if($rest_query->have_posts()):
?>
<?php while($rest_query->have_posts()): $rest_query->the_post(); ?>
<?php
if ($rest_query->current_post == 0)
{
echo '<div class="row">
<div class="col-md-6">
<div class="single first-post">
<div class="thumb">'.the_post_thumbnail().'</div>
<div class="content">
<h1>'.the_title().'</h1>
<div class="data">
<p class="date">'.get_the_date().'</p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
<div class="middleLine"></div>
<div class="col-md-6"></div>
</div>';
}
elseif ($rest_query->current_post == 1)
{ echo '<div class="row">
<div class="col-md-6"></div>
<div class="middleLine"></div>
<div class="col-md-6">
<div class="single secound-post">
<div class="thumb">'.the_post_thumbnail().'</div>
<div class="content">
<h1>'.the_title().'</h1>
<div class="data">
<p class="date">'.get_the_date().'</p>
<p class="social">0 shares / 0 comments</p>
</div>
</div>
</div>
</div>
</div>'; }
?>
<?php endwhile; ?>
<?php endif; ?>
NOTE: If you want to print any PHP variable then it should be used as i have have shown above code.
THank you
I'm making a WordPress theme. I made a grid structure shown below,
It contains two rows, and every row has three columns. I want to show random posts from my WordPress database in this grid.
This is my code
<div class="row">
<div class="col-xs-12">
<div class="rst-mediagrid">
<div class="div">
<?php
$args = array(
'posts_per_page' => 6,
'offset' => 0,
'category' => '2',
'category_name' => '',
'orderby' => 'date',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'post_status' => 'publish',
'suppress_filters' => true
);
global $post;
$post = get_post($args);
$next_post = get_adjacent_post( true, '', false, 'taxonomy_slug' );
?>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($post->ID); //latest post thumbnail ?>
</div>
</div>
<?php //endif; ?>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="clear"></div>
</div>
<div class="div">
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<?php echo get_the_post_thumbnail($next_post->ID); ?>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
The above code repeats the same image that I want to show thumbnails for in a perfect order, like the first row has three columns, and the first column has the latest image second column has image of previous post and third column has image of previous of previous mean 3rd post from latest post and second row also has same things.
If you have better suggestion kindly tell me.
use this It does not need to use id of current post as argument.
<?php echo get_next_post(); ?>
at last i found a solution of my question if some one else have same issue then use this
<?php
global $post;
$loop = new WP_Query( array( 'posts_per_page' => 9,'orderby'=>rand) );
$posts = array();
while ( $loop->have_posts() ) :
$items = array();
$items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
$items['Image'] = get_the_post_thumbnail($loop->the_post());
$items['LinkPost']=get_permalink($post->ID);
$items['Title']=get_the_title($post->ID);
$items['PostTime']=get_the_time('M d,Y', $post->ID);
array_push($posts, $items);
endwhile;
for($i = 1; $i< count($posts); $i++){
?>
<?php
if($i==1){
?>
<div class="div">
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<?php //endif; ?>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+1]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+2]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!-- end first row-->
<?php } //end if ?>
<?php
if($i == 2 ){
?>
<div class="div">
<div class="rst-col rst-col-25">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-25">
<div class="rst-postpic rst-postvideo">
<img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+1]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
</div>
</div>
<div class="rst-col rst-col-50">
<div class="rst-postpic">
<img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
</div>
<div class="rst-postinfo">
<span>Sport</span>
<h6><?php echo $posts[$i+2]['Title']; ?></h6>
<time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
</div>
</div>
<div class="clear"></div>
</div><!--end second row-->
<?php
}//end if
}//end for loop ?>
if some have better suggestion kindly post you answer here and also any logical issue in my code then also tell me