I have the follow foreach loop:
<?php $arrayforward = get_field('background_slider');
$arrayreversed = array_reverse($arrayforward);
$count=1;
foreach($arrayreversed as $subarray) {
$subfield1 = $subarray['background_image'];
$subfield2 = $subarray['background_image_alt'];
$subfield3 = $subarray['text_image'];
$subfield4 = $subarray['text_image_alt']; ?>
<div id="slide<?php echo $count; ?>" class="contentslider_wrapper">
<div class="fullpageimage">
<img id="slideImg<?php echo $count; ?>" src="<?php echo $subfield1; ?>" alt="<?php the_sub_field('background_image_alt'); ?>" />
<img id="textImg<?php echo $count; ?>" class="slidetext" src="<?php echo $subfield2; ?>" alt="<?php the_sub_field('text_image_alt'); ?>" />
</div>
</div>
<?php $count++; }; ?>
I need help getting the count to reverse. The output I am looking for is as follows:
<div id="slide4"></div>
<div id="slide3"></div>
<div id="slide2"></div>
<div id="slide1"></div>
Any help with this would be great.
Change $count=1; to $count = sizeof($arrayreversed);
and $count++; to $count--;
First of all get the amount of keys in the array and assign it as $count, like this:
$count = count($arrayreversed);
Then replace the $count++ with $count-- and you're all set.
How about using the size of the array as your initial count and then subtracting 1 each iteration?
<?php $arrayforward = get_field('background_slider');
$arrayreversed = array_reverse($arrayforward);
$count=count($arrayreversed);
foreach($arrayreversed as $subarray) {
$subfield1 = $subarray['background_image'];
$subfield2 = $subarray['background_image_alt'];
$subfield3 = $subarray['text_image'];
$subfield4 = $subarray['text_image_alt']; ?>
<div id="slide<?php echo $count; ?>" class="contentslider_wrapper">
<div class="fullpageimage">
<img id="slideImg<?php echo $count; ?>" src="<?php echo $subfield1; ?>" alt="<?php the_sub_field('background_image_alt'); ?>" />
<img id="textImg<?php echo $count; ?>" class="slidetext" src="<?php echo $subfield2; ?>" alt="<?php the_sub_field('text_image_alt'); ?>" />
</div>
</div>
<?php $count--; }; ?>
Related
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; ?>
I'm doing some changes on an online store that is running OpenCart 2.2.
When browsing below the categories on the left side, there are 2 carousels that show different promotions. I want to modify it that before the second carousel there is a description text. To do that I should edit the template file. And here is where I get lost..
This is the code in the template file:
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
From I see in the browser inspector and in my case, this code generates 2 banners with the ids - "banner0" and "banner1". The description text should go at the top of the code (right before ). If I use a simple paragraph, it gets displayed twice - above each banner.. How should I change it so that it will display the paragraph only above the second banner (id - banner1)?
I was thinking about an if-else statement, but I'm not sure if that will work... Could anyone help out a bit? My knowledge in PHP isn't much... :S
Thanks in advance!
Best regards,
Tsvetko Krastev
Then you need to know that this is the second time round the foreach loop. So change the foreach to include the index like this, and add a test inside the loop for $i == 1
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php //foreach ($banners as $banner) {
foreach ($banners as $i => $banner) {
?>
<div class="item">
<?php if ($banner['link']) {
if ( $i == 1 ) {
echo 'YOUR HTML CONTAINING SOME TEXT HERE';
}
?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
If I get the code right, $module is 0/1 (if id's get values banner0 and banner1), then this should work:
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<?php if ($module == "1") { ?>
<p>Your description</p>
<?php } ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
Thank you so very much guys!!! Tried both versions and they throw a error, but looking more carefully into the code and both your solutions, I came up with this:
<div id="desc<?php echo $module; ?>">
<?php if ($module == 1) { ?>
<p>Description</p>
<?php } ?>
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Thank you very much again for the quick responses and the help! :) :3
Best regards,
Tsvetko Krastev
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>
I love jQuery and dont really understand php.
I am making a slider with albums. So far so good except I am now stuck trying to add two arrays into one for each loop. At least I think that is the best solution.
In my code you can see I have achieved what I need by hard coding 6 images for the 6 custom fields in the custom post type (I am using wordpress). The problem is that if there are not six images then the slider show a blank image (as it exists but doesnt have a src). I tried removing the element with jquery but that was no good. Here is the code I have so far, perhaps there is something i am missing, I just cant seem to get the logic quite right.
<?php
$args = array(
'post_type' => 'albums_gallery',
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$album_name = get_the_ID();
$image_1 = get_field('image_1');
$image_1_url = $image_1['url'];
$image_1_caption = get_field('image_1_caption');
$image_2 = get_field('image_2');
$image_2_url = $image_2['url'];
$image_2_caption = get_field('image_2_caption');
$image_3 = get_field('image_3');
$image_3_url = $image_3['url'];
$image_3_caption = get_field('image_3_caption');
$image_4 = get_field('image_4');
$image_4_url = $image_4['url'];
$image_4_caption = get_field('image_4_caption');
$image_5 = get_field('image_5');
$image_5_url = $image_5['url'];
$image_5_caption = get_field('image_5_caption');
$image_6 = get_field('image_6');
$image_6_url = $image_6['url'];
$image_6_caption = get_field('image_6_caption');
?>
<div class="album album_<?php echo $album_name ?>">
<div class="slider-wrapper theme-default">
<div class="slider" class="nivoSlider">
<!--<img src="<?php echo $image_1['url']; ?>" alt="<?php echo $image_1['alt']; ?>" title="<?php echo $image_1_caption; ?>" />
<img src="<?php echo $image_2['url']; ?>" alt="<?php echo $image_2['alt']; ?>" title="<?php echo $image_2_caption; ?>" />
<img src="<?php echo $image_3['url']; ?>" alt="<?php echo $image_3['alt']; ?>" title="<?php echo $image_3_caption; ?>" />
<img src="<?php echo $image_4['url']; ?>" alt="<?php echo $image_4['alt']; ?>" title="<?php echo $image_4_caption; ?>" />
<img src="<?php echo $image_5['url']; ?>" alt="<?php echo $image_5['alt']; ?>" title="<?php echo $image_5_caption; ?>" />
<img src="<?php echo $image_6['url']; ?>" alt="<?php echo $image_6['alt']; ?>" title="<?php echo $image_6_caption; ?>" />-->
<?php
$images = array("$image_1_url","$image_2_url","$image_3_url","$image_4_url", "$image_5_url", "$image_6_url");
foreach ($images as $image) {
if ($image != "") {
echo "<img src='";
echo $image;
echo "' ";
echo "title='caption'";
echo "/>";
}
};
?>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
I need to add the image caption, and probably a link into the for each and if statements, little out of my depth being a designer.
Thanks for any help.
This is all you need
<div class = "slider-wrapper theme-default">
<div class = "slider" class = "nivoSlider">
<?php
$images = Array();
for($i = 1; $i <= 6; $i++) {
$image = get_field("image_{$i}");
if(!$image || !$image['url']) {
break;
}
$caption = get_field("image_{$i}_caption");
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $caption; ?>" />
<?php
}
?>
I am using this code for a slideshow:
<img src="<?php echo($array[0]); ?>"/>
<img src="<?php echo($array[1]); ?>"/>
<img src="<?php echo($array[2]); ?>"/>
<img src="<?php echo($array[3]); ?>"/>
<img src="<?php echo($array[4]); ?>"/>
<img src="<?php echo($array[5]); ?>"/>
<img src="<?php echo($array[6]); ?>"/>
<img src="<?php echo($array[7]); ?>"/>
I want to show images, only if they exist.
Sometimes the $array has only 5 values.
How is this posible?
You should loop over the array values and echo an image tag for each value:
<?php
foreach($array as $img){
echo '<img src="'.$img.'"/>'."\n";
}
?>
That's the perfect opportunity for a loop. You can either use a for loop (since your array is numerically indexed) or a foreach loop.
Using a for loop:
<?php $count = count($array); for($i = 0; $i < $count; $i++): ?>
<img src="<?php echo($array[$i]); ?>" />
<?php endfor; ?>
In traditional syntax:
<?php $count = count($array); for($i = 0; $i < $count; $i++) { ?>
<img src="<?php echo($array[$i]); ?>" />
<?php } ?>
Using a foreach loop:
<?php foreach($array as $img): ?>
<img src="<?php echo $img; ?>" />
<?php endforeach; ?>
In traditional syntax:
<?php foreach($array as $img) { ?>
<img src="<?php echo $img; ?>" />
<?php } ?>
Since this is a fairly basic question, I suggest you take the time to read the PHP Documentation chapter about control structures. There are essential. It is available here:
PHP Documentation: Control Structures
foreach($array as $src){ echo "<img src='$src' />"; }
<?php
foreach($array as $img){
if(file_exists($img))
echo '<img src="'.$img.'"/>'."\n";
}
?>
for($i=0;$i<count($array);$i++)
{
?>
<img src="<?php echo($array[$i]); ?>"/>
<?php
}