Show 2 results by div - php

I have the following foreach:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
?>
<div class='wrapper'>
<div class="album"><img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246"></div>
</div>
<?php } ?>
But thus appears only a div .album within each div .wrapper. How do I see two divs .album within each div .wrapper?
UPDATE
Guys, found the solution:
<?php
$total = 0;
foreach($result15 as $row15){
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
if($total == 0){
echo '<div class="wrapper">';
}
?>
<div class="album" data-disco="disco<?php echo $id15; ?>">
<img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246">
</div>
<?php
$total = $total + 1;
if($total % 2 == 0){
echo '</div>';
$total = 0;
}
}
?>

<div class='wrapper'>
<div class="album"><img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246">
<div class="album"><img src="img/..." alt="" width="246" height="246"></div>
</div>
Something like this?
EDIT
I dont understand what you want. But you can do this to get two divs, but you will need to get your image path for the second div image:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
echo "<div class='wrapper'>";
echo '<div class="album"><img src="img/'.$thumb15.' alt="" width="246" height="246"></div>';
echo '<div class="album"><img src="img/'.$thumb15.' alt="" width="246" height="246"></div>';
echo '</div>';
} ?>

Try this:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
echo "<div class='wrapper'>";
echo '<div class="album"><img src="img/'.$id15 .' alt="" width="246" height="246"></div>';
echo '<div class="album"><img src="img/'.$id15 .' alt="" width="246" height="246"></div>';
echo '</div>';
} ?>

A nice solution could be to use array chunk considering you want to treat the data in 'chunks' of 2 images at a time. This way, if you want to alter how many images appear in a wrapper you only need to change your chunk size.
$chunkSize = 2;
foreach (array_chunk($result15, $chunkSize) as $wrapperImages) {
echo '<div class="wrapper">';
foreach ($wrapperImages as $image) {
$thumb = $image->thumb;
echo '<div class="album"><img src="img/'.$thumb.' alt="" width="246" height="246"></div>';
}
echo '</div>';
}

Related

WP Loop Geo + jQuery .hide() not working correctly

I have a WP loop where each post has a collection of 4 country based images (using ACF).
I only would like to output 1 image per country, however it is displaying all of 4 images per post.
<?php
$args = array( 'post_type' => 'quick_links', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$image_au = get_field("au_image");
$image_nz = get_field("nz_image");
$image_us = get_field("us_image");
$image_gl = get_field("global_image"); //default image
?>
<script type="text/javascript">
var image_au = <?php echo json_encode($image_au['url']); ?>;
var image_nz = <?php echo json_encode($image_nz['url']); ?>;
var image_us = <?php echo json_encode($image_us['url']); ?>;
var image_gl = <?php echo json_encode($image_gl['url']); ?>;
jQuery.get("http://ipinfo.io", function (response) {
if (response.country === "AU"){
jQuery("#resultQLAU").show();
jQuery("#resultQLNZ").hide();
jQuery("#resultQLUS").hide();
jQuery("#resultQLGlobal").hide();
} else if(response.country === "NZ"){
jQuery("#resultQLNZ").show();
jQuery("#resultQLAU").hide();
jQuery("#resultQLUS").hide();
jQuery("#resultQLGlobal").hide();
} else if(response.country === "US"){
jQuery("#resultQLUS").show();
jQuery("#resultQLNZ").hide();
jQuery("#resultQLAU").hide();
jQuery("#resultQLGlobal").hide();
} else {
jQuery("#resultQLGlobal").show();
jQuery("#resultQLNZ").hide();
jQuery("#resultQLUS").hide();
jQuery("#resultQLAU").hide();
}
if(image_au === "" && image_nz === "" && image_us === "" && image_gl !== ""){
jQuery("#resultQLGlobal").show();
}
}, "jsonp");
</script>
<?php
echo '<div class="col-lg-4 col-sm-6" style="padding:2px">';
echo '<a href="' . get_field('page_url') . '" class="portfolio-box">';
?>
<div id="resultQLAU">
<img class="img-responsive" src="<?php echo $image_au['url']; ?>" alt="<?php echo $image_au['alt']; ?>" />
</div>
<div id="resultQLNZ">
<img class="img-responsive" src="<?php echo $image_nz['url']; ?>" alt="<?php echo $image_nz['alt']; ?>" />
</div>
<div id="resultQLUS">
<img class="img-responsive" src="<?php echo $image_us['url']; ?>" alt="<?php echo $image_us['alt']; ?>" />
</div>
<div id="resultQLGlobal">
<img class="img-responsive" src="<?php echo $image_gl['url']; ?>" alt="<?php echo $image_gl['alt']; ?>" />
</div>
<?php
echo '<div class="portfolio-box-caption">';
echo '<div class="portfolio-box-caption-content">';
echo '<div class="project-category text-faded">' . get_the_title() . '</div>';
echo '<div class="project-name">' . get_the_content() . '</div>';
echo '</div>';
echo '</div>';
echo '</a>';
echo '<h6 class="news-title text-center">' . get_the_title() . '<span style=""> <i class="fa fa-angle-double-right"></i></span></h6>';
echo '</div>';
endwhile;
?>
I originally had the code e.g <div id="resultQLAU" style="display:none"> and just had jQuery("#resultQLAU").show(); in script which outputed only the first
GEO image of the first post (so GEO was working correct for that 1 post)
Not sure what problem is?
Your help would be much appreciated. Thanks
You are using ID inside your loop so all the block will have the same ids which isn't good as id need to be unique. You may change this by adding a suffix/prefix depending the iteration and use classes instead.
1) add a new var the increment inside your loop like this :
$i = 0
while ( $loop->have_posts() ) : $loop->the_post();
$i++;
2) for each id append the content of $i, for example :
jQuery(".resultQLAU_<?php echo $i; ?>").show();
do this everywhere you have the id.

How to loop a php code?

I wanted to do the DRY approach in my code but I'm having a hard time figuring it out. And also, I want to hide the entire code if there's no image_1. Hope you could help me do the trick.
Here's the code
<div class="col-md-4">
<?php
$image = get_field('image_1');
if(get_field('image_1'))
{
echo '<a href="' . get_field('image_link_1') . '">';?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
<div class="col-md-4">
<?php
$image = get_field('image_2');
if(get_field('image_2'))
{
echo '<a href="' . get_field('image_link_2') . '">';?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
<div class="col-md-4">
<?php
$image = get_field('image_3');
if(get_field('image_3'))
{
echo '<a href="' . get_field('image_link_3') . '">';?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
You should put differences to arrays and then wrap everything into for loop:
<?php
$images = array('image_1', 'image_2', 'image_3');
$links = array('image_link_1', 'image_link_2', 'image_link_3');
for($i=0; $i<3; $i++){
?>
<div class="col-md-4">
<?php
$image = get_field($images[$i]);
if(get_field($images[$i])){
echo '<a href="' . get_field($links[$i]) . '">';
?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
}
?>
</div>
<?php
}
?>
Just a hint...:
<?php
for ($i = 0; $i < 3; $i++) {
echo "<div class='col-md-4'>" . "\n";
$image = get_field("image_" . ($i + 1));
...
echo "</div>" . "\n";
}
?>
Something along these lines should get you started if I'm understanding you correctly:
<?php for ($q = 1; $q <= 3; $q++) {
$image_loop = 'image_' . $q;
echo '<div class="col-md-4">';
if ($image = get_field($image_loop)) {
echo '<a href="' . get_field('image_link_' . $q) . '">';
?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
<?php } // end loop ?>
The other suggestions here will work as well but here's what I would do:
First arrange the images in an associative array with keys being the image name and values being the image link and then iterate via a foreach loop.
I generally try to not echo HTML unless strictly necessary.
<?php
$array = [
"image_1" => "image_link_1",
"image_2" => "image_link_2",
"image_3" => "image_link_3",
"image_4" => "image_link_4"
];
foreach ($array as $name => $link):
$image = get_field($name);
if ($image): ?>
<div class="col-md-4">
<a href="<?=get_field($link)?>">
<img src="<?= $image['url']; ?>" title="<?= $image['title']; ?>" alt="<?= $image['alt']; ?>" />
</a>
<?php else: ?>
<img src="http://localhost/image.png">
<?php endif; ?>
</div>
<?php endforeach; ?>

PHP loop need to create new div every 5 elements

I've got a forech loop that displays 50 logos. But what I need is another loop that creates a new div(.autogrid_wrapper .cte .block) every 5 images.
<div class="autogrid_wrapper cte block">
<div class="inner">
<?php foreach($this->entries as $entry): ?>
<figure class="image_container">
<img src="<?php echo $entry->field('logo')->generate(); ?>" title="<?php echo $entry->field('name')->value(); ?>" alt="<?php echo $entry->field('name')->value(); ?>" >
</figure>
<?php endforeach; ?>
</div>
</div>
I hope you guys can help me.
A simple counter could help -
<div class="autogrid_wrapper cte block">
<div class="inner">
<?php
$i = $j = $k = 0;
foreach($this->entries as $entry):
$i++;
$class = '';
if($j === 0) {
$class = 'first';
}
$j++;
$html = '';
if($i % 5 === 0) {
$k++;
$j = ($i - (5 * $k));
$class = 'last';
$html = "</div></div>
<div class='autogrid_wrapper cte block'><div class='inner'>";
}
?>
<figure class="image_container <?php echo $class; ?>">
<img src="<?php echo $entry->field('logo')->generate(); ?>" title="<?php echo $entry->field('name')->value(); ?>" alt="<?php echo $entry->field('name')->value(); ?>" >
</figure>
<?php
echo $html;
endforeach;
?>
</div>
</div>

Grouping database results within while loop

I am running a while loop to return all the results of a mysqli query but I want to use php to group the results.
My code is
while($row = mysqli_fetch_array($result))
{
if($row['total'] >0)//row['total'] is found out within the query itself
{
$recipeWords = str_word_count(preg_replace('/\s{1,}(and\s*)*/', ' ', $row['title']));
if($countTerms == $recipeWords)
{
echo "<h2>Exact Match</h2>";?>
<div class="fluid recipeContainerSmall">
<a href="recipe_details.php?id=<?php echo $row['recipeID']?>">
<img src="images/recipes/<?php echo $row['image']?>" alt="<?php echo $row['title']?>" title="<?php echo $row['title']?>" />
<h4><?php echo $row['title']?></h4></a>
</div><?php
}
elseif($countTerms == ($recipeWords-1))
{
echo "<h2>Closest Matches</h2>";?>
<div class="fluid recipeContainerSmall">
<a href="recipe_details.php?id=<?php echo $row['recipeID']?>">
<img src="images/recipes/<?php echo $row['image']?>" alt="<?php echo $row['title']?>" title="<?php echo $row['title']?>" />
<h4><?php echo $row['title']?></h4></a>
</div><?php
}
else
{
echo "<h2>Other Suggestions</h2>";?>
<div class="fluid recipeContainerSmall">
<a href="recipe_details.php?id=<?php echo $row['recipeID']?>">
<img src="images/recipes/<?php echo $row['image']?>" alt="<?php echo $row['title']?>" title="<?php echo $row['title']?>" />
<h4><?php echo $row['title']?></h4></a>
</div><?php
}
}
}?>
What I am trying to do is group the results so that:
all the exact matches are displayed first
then I want all the records where all but one of the keywords are found
then the rest
at the moment they are being displayed on what seems a random order.
<?php
while($row = mysqli_fetch_array($result))
{
if($row['total'] >0)//row['total'] is found out within the query itself
{
$recipeWords = str_word_count(preg_replace('/\s{1,}(and\s*)*/', ' ', $row['title']));
$exactMatches = "";
$closestMatches = "";
$otherSuggestions = "";
if($countTerms == $recipeWords)
{
$exactMatches .= <<<EXACT_MATCH
<h2>Exact Match</h2>
<div class="fluid recipeContainerSmall">
<a href="recipe_details.php?id={$row['recipeID']}">
<img src="images/recipes/{$row['image']}" alt="{$row['title']}" title="{$row['title']}" />
<h4>{$row['title']}</h4></a>
</div>
EXACT_MATCH;
}
elseif($countTerms == ($recipeWords-1))
{
$closestMatches .= <<<CLOSEST_MATCH
<h2>Closest Match</h2>
<div class="fluid recipeContainerSmall">
<a href="recipe_details.php?id={$row['recipeID']}">
<img src="images/recipes/{$row['image']}" alt="{$row['title']}" title="{$row['title']}" />
<h4>{$row['title']}</h4></a>
</div>
CLOSEST_MATCH;
}
else
{
$otherSuggestions .= <<<OTHER_SUGGESTIONS
<h2>Other Suggestions</h2>
<div class="fluid recipeContainerSmall">
<a href="recipe_details.php?id={$row['recipeID']}">
<img src="images/recipes/{$row['image']}" alt="{$row['title']}" title="{$row['title']}" />
<h4>{$row['title']}</h4></a>
</div>
OTHER_SUGGESTIONS;
}
// ECHO in the order you want to...
echo $exactMatches . $closestMatches . $otherSuggestions;
}
}?>
As asked by you above, please try this code.
Please note that I've used HEREDOCS to simplify the parsing of the data.

Best practice when echo repeated code

I have a question that bothers me for a long time. Lets say i have a code with several nested div's and span's. All these compose a square with an image inside.
echo '<div> <div> <div> <div> <span> <img src='.$image.'> </span></div></div></div>';
Only that this code has about 15 rows.
From what i know when echo-ing the results from db in that form i put in the loop the whole html code. It looks clumsy this way.
It is there a better practice ?
foreach ($query->result() as $row)
{
$row->address_link=strtolower($row->network);
echo '<li class="col-md-3 isotope-item '.$row->network.'">';
echo '<div class="portfolio-item img-thumbnail">';
echo '<table border="0"><tr>';
echo '<a href="order/'.$row->address_link.'/'.$row->value.'" class="thumb-info">';
echo '<img alt="" class="img-responsive" src="img/'.$row->address_link.'.png">';
echo '<span class="thumb-info-title">';
echo '<span class="thumb-info-inner">'.$row->value.' Euro</span>';
echo '</span>';
echo '<span class="thumb-info-action">';
echo '<span title="Universal" href="order/'.$row->address_link.'/'.$row->value.'" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>';
echo '</span>';
echo '</a>';
echo '</div>';
echo '</tr><tr>';
echo '<span class="thumb-info-type">'.$row->value*$row->rate.' Eur</span>';
echo '</tr></table>';
echo '</li>';
}
If you are new to php you can define a function for this:
function wrapImage($src){
return '<div> <div> <div> <div> <span> <img src='.$src.'> </span></div></div></div>';
}
And just use echo wrapImage($src) where you need it with different params.
EDIT: consider following way of presenting the data:
<?php
$query = 'select * from Unicorns';
foreach ($query->result() as $row){
$row->address_link=strtolower($row->network);
?>
<!-- html -->
<li class="col-md-3 isotope-item <?php echo $row->network; ?>">
<div class="portfolio-item img-thumbnail">
<table border="0"><tr>
<a href="order/<?php echo $row->address_link.'/'.$row->value; ?>" class="thumb-info">
<img alt="" class="img-responsive" src="img/'.$row->address_link.'.png">
<span class="thumb-info-title">
<span class="thumb-info-inner"><?php echo $row->value; ?> Euro</span>
</span>
<span class="thumb-info-action">
<span title="Universal" href="order/<?php echo $row->address_link.'/'.$row->value ?>" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>
</span>
</a>
</div>
</tr><tr>
<span class="thumb-info-type"><?php echo ($row->value*$row->rate); ?> Eur</span>
</tr></table>
</li>
<!-- /html -->
<?php } ?>
It is called spaghetti code .. and it is NOT the best practice but is better then your example in case the HTML is more then the PHP data.
first of all, dont use echo in loops (optimalization), store your output in variable and print it only once.
Repeated code can be stored inside function
function square($image){
return '<div> <div> <div> <div> <span> <img src='.$image.'> </span></div></div></div>';
}
$output = '';
while ($loop){
$output .= square($image);
}
echo $output

Categories