I'm trying to pull wordpress content to the grid structure created with Bootstrap. But I don't want to create separate query for each column. How can I pull content from the same category in a single query? My codes are as follows.I want to show the last 3 items added
<div class="container">
<?php query_posts('showposts=3&orderby=date&cat=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-8">
<img src="" class="img-fluid rounded" alt="...">
</div>
<div class="col-4">
<img src="" class="img-fluid mb-3 rounded" alt="...">
<img src="" class="img-fluid rounded" alt="...">
</div>
</div>
<?php endwhile; ?>
</div>
what i want to do
<div class="container">
<div class="row">
<?php $i = 1; query_posts('showposts=3&orderby=date&cat=1'); ?>
<div class="col-8">
<?php while (have_posts()) : the_post(); ?>
<?php if($i==1){ ?>
<img src="" class="img-fluid rounded" alt="...">
</div>
<div class="col-4">
<?php } elseif($i==2){ ?>
<img src="" class="img-fluid mb-3 rounded" alt="...">
<?php } else { ?>
<img src="" class="img-fluid rounded" alt="...">
<?php } $i++; endwhile; ?>
</div>
</div>
</div>
click the picture for the problem
else created a problem. Also the 2 contents in the right column are the same. I wanted it to be different.
Related
I want to make a photo gallery with 3 columns using Bootstrap. My gallery structure should be like this:
<div class="row">
<div class="col-4" id="box1">
<img class="img-fluid" src="images/image1.jpg">
<img class="img-fluid" src="images/image4.jpg">
</div>
<div class="col-4" id="box2">
<img class="img-fluid" src="images/image2.jpg">
<img class="img-fluid" src="images/image5.jpg">
</div>
<div class="col-4" id="box3">
<img class="img-fluid" src="images/image3.jpg">
<img class="img-fluid" src="images/image6.jpg">
</div>
</div>
Currently, I'm fetching the imageURL all in the box1 div. But how can I fetch the images information and organise them in such a way that the 1st image URL value goes as a src in the first div (box1) and the 2nd in the box2 div, 3rd in the box3 div and 4th again in box1 and so on. How can I loop this logic?
<div class="row">
<?php
$imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC") or die($mysqli->error);
while ($rowImage = $imageQuery->fetch_array()) { ?>
<div class="col-4" id="box1">
<img class="img-fluid" src="<?php echo $rowImage['imageURL']; ?>">
</div>
<?php } ?>
</div>
You should be able to chunk your array of images into 3 columns each with array_chunk(). Then you can use a normal foreach loop to iterate each one of the 3 columns separately.
<?php
$imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC");
$images = $imageQuery->fetch_all(MYSQLI_ASSOC);
$images = array_chunk($images, 3);
?>
<div class="row">
<div class="col-4" id="box1">
<?php foreach (array_column($images, 0) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
<div class="col-4" id="box2">
<?php foreach (array_column($images, 1) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
<div class="col-4" id="box3">
<?php foreach (array_column($images, 2) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
</div>
I am trying to display something like a thumbnail for my post. Is there any wordpress function that can do that? I read about wordpress featured images but I dont see the option to set one on the wordpress admin page.
I also tried using the_post_thumbnail() but it didnt work.
this is what my div looks like at the moment:
<div class="card" style="width: 22rem;">
<img src="<?php the_post_thumbnail(); ?>" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php the_title() ?></h5>
<p class="card-text">Random Card content</p>
</div>
</div>
Just use:
<?php the_post_thumbnail(); ?>
Like below codes:
<div class="card" style="width: 22rem;">
<?php the_post_thumbnail('post-thumbnail', ['class' => 'card-img-top']);?>
<div class="card-body">
<h5 class="card-title"><?php the_title(); ?></h5>
<p class="card-text">Random Card content</p>
</div>
</div>
When you use the_post_thumbnail() dont use extra img tag!
the_post_thumbnail(); directly output the image.So please don't use echo
the_post_thumbnail( $size, $attr );
the_post_thumbnail( 'thumbnail' );
<div class="card" style="width: 22rem;">
<?php the_post_thumbnail('thumbnail'); ?>
<div class="card-body">
<h5 class="card-title"><?php the_title() ?></h5>
<p class="card-text">Random Card content</p>
</div>
</div>
I also found another way to do it while using the img tag
<img class="card-img-top" src="<?php the_post_thumbnail_url() ?>" alt="Card image cap">
I need my gallery to show images that are saved within my database please. So rather than me using the images source tag, I need the gallery to be filled with what's saved in the database please. So essentially showing the user all the images that ONLY belong to them if that makes sense? I guess the html code of the gallery should fall within the php while loop ?
The html gallery code:
<div class="row">
<div class="grid-full">
<h3>ALL OF MY COMPETITION ENTRIES</h3>
<div class="masonry">
<div class="item">
<img alt src="Images/Nude.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/LakeDistrict.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/MarbleCase.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/HeadwoodBeach.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/MacDesk.png" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/CoffeeonTable.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/SilverMarble.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Peonies.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Trousers.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Greys.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Sunset.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Grey2.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Nature.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/autumn.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Tulips.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Pink.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Outfit.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/BandW.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/TheLakeDistrict.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/FlowerTable.jpg" class="ImgRound">
</div>
</div>
</div>
</div>
My Tables:
I think my PHP query would look something like this:
<?php
$query = "SELECT * FROM `tblImage` WHERE `fldMemberID` = 1";
$result = $conn -> query($query);
while($row = $result -> fetch_assoc()) {
?>
<img src="<?php echo $row['fldFilePath']; ?>"> <br>
<?php
}
$conn -> close();
?>
UPDATE: After running the code, the following errors I get this appear where the gallery should be:
The answer was given by another user #RiggsFolly in the comments, further up in the code I had used a $conn -> close(); by deleting this the code ran fine.
I don't know why my images get positioned below each other even though they are inside a col-6 Bootstrap div. I want them to be next to each other, not below.
Code, in case it's unreadable in the text below: https://imgur.com/S6tSXng
Page: https://imgur.com/7FZl2lM
I have already tried putting the col-6 inside the foreach block, but it only made the second image smaller. I don't know what else to try.
<section id="listaoldal">
<div class="container">
<div class="row">
<div class="col-6">
<?php foreach ($characterDetails as $key):?>
<img data-toggle="modal" data-target="#<?= $key['modal']?>" class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
<?php endforeach;?>
Well, I expect the images to be next to each other like they should be not below.
foreach out of col-6.
<?php foreach ($characterDetails as $key):?>
<div class="col-6"><img ... /></div>
<?=endforeach?>
<section id="listaoldal">
<div class="container">
<div class="row">
<?php foreach ($characterDetails as $key):?>
<div class="col-6">
<img data-toggle="modal" data-target="#<?= $key['modal']?>" class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
<?php endforeach;?>
Actually your images are placed into one "col-6" you have to create one for each images, like this:
<div class="col-6">
<img .../>
</div>
<div class="col-6">
<img .../>
</div>
<div class="col-6">
<img .../>
</div>
...
Quick exemple of what you could use to make it work :
<section id="listaoldal">
<div class="container">
<div class="row">
<?php foreach ($characterDetails as $key):?>
<div class="col-6">
<img data-toggle="modal" data-target="#<?= $key['modal']?>" class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
</div>
<?php endforeach;?>
I recommend you to read more about Bootstrap's Grid system:
https://getbootstrap.com/docs/4.0/layout/grid/
I have a loop which I want to take this behaver
first to add item div then loop into this div to add 6 items And after complete 6 items it will close this div and start again with next six items until finish
my current code like this :
<?php $x = 0; ?>
<?php foreach ($files as $lst) { ?>
<div class="item <?= ($x == 1 ? 'active' : ''); ?>">
<div class="row">
<div class="col-xs-2">
<a href="<?= base_url() ?>global/uploads/<?= $lst['FileName'] ?>"
rel="prettyPhoto[gallery1]">
<?php if ($lst['FileName'] != "" && file_exists(PUBPATH . "global/uploads/" . $lst['FileName'])) { ?>
<img src="<?= thumb($lst['FileName'], 150, 150); ?>" class="img-responsive">
<?php } else { ?>
<img src="<?= base_url() ?>global/site/data/1.jpg" class="img-responsive">
<?php } ?>
</a>
</div>
</div>
</div>
<?php $x++;
} ?>
but i want final structure to be like this
<div class="item active">
<div class="row">
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="data/1.jpg" class="img-responsive">
</div>
</div>
</div>
You should clean the code a bit, instead of filtering inside the loop the array should contain the files and urls you want to enlist.
That would separate HTML from your PHP code making it much easier to read.
$files = [
'data/1.jpg', // can make an array as well, ['src'=>'data/1.jpg', 'href => 'link.com']
'data/2.jpg',
'data/3.jpg',
'data/4.jpg',
'data/5.jpg',
'data/6.jpg',
'data/7.jpg',
];
foreach(array_chunk($files, 6) as $row){
echo '<div class="item"><div class="row">';
foreach($row as $col){
echo '<div class="col-xs-2">';
echo '<img src="'.$col.'" class="img-responsive">';
//echo '<img src="'.$col['src'].'" class="img-responsive">';
echo '</div>';
}
echo '</div></div>';
}