So I have this code I want to repeat. Uses wordpress acf to generate the image:
`<div class="row">
<?php if( get_field('image_1') ): ?>
<img class="this-image" src="<?php the_field('image_1'); ?>" />
<?php endif; ?>
</div>`
I'm just wondering how I can loop this in with which I would also need to increment the numbers (ie. image_1, image_2, image_3).
I'm having trouble figuring out the logic of PHP, if there already is a similar post, a kind link would be much appreciated, thanks!
Use below code - it is using for loop to iterate through all images from image_1 to image_X (where X can be defined by you). similar code can be modified by add an array to store all the image names, just in case if there is no patterns for the image names.
<div class="row">
<?php $numImages = 10; #Define how many images you have
for ($i=1; $i<= $numImages; $i++){ #starting from image_1 ?>
<?php if( get_field('image_' . $i)): ?>
<img class="this-image" src="<?php the_field('image_' . $i); ?>" />
<?php endif; ?>
<?php } ?>
</div>
You can try something like this
`<div class="row">
<?php
for (i=1; i<=3; i++) {
if( get_field('image_'.i) ): ?>
<img class="this-image" src="<?php the_field('image_'.i); ?>" />
<?php endif; } ?>
</div>`
Related
I wondered if anyone could help me combine two blocks of code I have. I have one block looping though items and the start of another block showing a count and hopefully enabling me to display the items looping through in rows by adding a div around them every two items... Heres the first bit of code, the loop:
<?php if(get_field('areas')): ?>
<?php while(has_sub_field('areas')): ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php endwhile; ?>
<?php endif; ?>
I'm using Advance Custom Fields for Wordpress and this is pulling through repeater fields... this displays them just one after the other.
Here's the code I have found to hopefully display them in rows.
<?php
$num = 1;
foreach ( $terms as $term ) {
if($num%2) {
echo '<div class="area-row">';
}
// Other Code
if($num %2) {
echo '</div>';
}
$num++
}
?>
I would like to display them in rows of two...
ONE TWO
THREE FOUR
FIVE SIX
Etc...
So, Im guessing I need to combine the code somehow... I currently have this: but it doesn't seem to work:
<?php
$num = 1;
foreach ( $terms as $term ) {
if($num%2) {
echo '<div class="area-row">';
}
if(get_field('areas')): ?>
<?php while(has_sub_field('areas')): ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php endwhile; ?>
<?php endif; ?>
if($num %2) {
echo '</div>';
}
$num++
}
?>
Okay so it looks like there was a couple of simple issues with this, you had closed the php tag after your if statment and then continued to write php without reopening the php tags. Also there is a slight logic error with the if($num%2) statements as one of these needs to be if, the other needs to be if not, so that the alternate.
Give this code a try and let me know how you get on:
<?php
if(get_field('areas')):
$num = 1;
?>
<?php while(has_sub_field('areas')):
if($num%2) {
echo '<div class="area-row">';
} ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php
if(!$num%2) {
echo '</div>';
}
$num++
endwhile; ?>
<?php endif; ?>
The main reason behind this question was for me to be able to target the third item of the looped through items, as it had padding on it that was breaking the rows that I needed to remove.
I have since found another solution that seems to be working.
By using the nth-child element, I have been able to target and remove the padding on every third item that's looped through - fixing the issue.
.single-area-item:nth-child(3n+3) {
margin-left: 0;
}
This is for rows or 2 items, if it were rows of 3 or 4 then it would need to target every 4th or 5th item respectively.
Looking to solve a problem I'm having dynamically defining classes using WordPress Advanced Custom Fields' Repeater field. I've done some digging but haven't been able to find a resource with the specificity that I'm looking for.
I'm displaying a series of portfolio images, and depending on how many there are I would like to give certain photos specific class names within the Foundation grid. Essentially I'm looking to do the following:
For items 1-4: Apply a class of large-6
For items 5+: Apply a class of large-4
If only 1 item: Apply a class of large-8
I've been able to get the first two examples to work, but I'm having trouble defining a third set of parameters. I've tried a number of different routes but I'm not sure what's best at this point. See below for a mockup of what I am looking to accomplish, as well as my code example.
Appreciate any advice!
<div class="row portfolio-examples">
<?php
if( have_rows('portfolio_examples') ):
while ( have_rows('portfolio_examples') ) : the_row();
$count = 0;
$work = get_sub_field('portfolio_work');
?>
<?php if ($count != 0 || $count < 4) :?>
<div class="large-6 medium-6 columns end">
<?php if( $work ): ?>
<img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
<?php endif; ?>
</div>
<?php else: ?>
<div class="large-8 medium-8 large-centered medium-centered columns">
<?php if( $work ): ?>
<img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
<?php endif; ?>
</div>
<?php endif; ?>
<?php
$counter++;
endwhile;
endif;
?>
</div>
Your question is not clear enough to me because you say Apply a class of large or Apply a class of small, but then in your code you use .large-6 and also .large-8.
Anyway, supposing what you're trying to achieve (given your image), your PHP code should be something like this:
<div class="row portfolio-examples">
<?php
if (have_rows('portfolio_examples')) :
/* We need to know the total number
* of rows in your repeater since you have
* a case where there's only one item.
*/
$portfolio = get_field('portfolio_examples');
$count = is_array($portfolio) ? count($portfolio) : 0;
$index = 0;
while (have_rows('portfolio_examples')) : the_row();
if ($count == 1) :
/* Place here your code for when
* there's only 1 item in your portfolio.
*/
?>
<div class="medium"><!-- Medium item --></div>
<?php
elseif ($count > 1 && $index <= 3) :
// Code for your first 4 items
?>
<div class="large"><!-- Large item --></div>
<?php
elseif ($count > 1 && $index > 3) :
// Code for your 5+ items
?>
<div class="small"><!-- Small item --></div>
<?php
else :
// There are no items in your portfolio.
endif;
$index++;
endwhile;
endif;
?>
</div>
Notice: You were reseting to 0 your iterator index ($count in your case) in every iteration. Also, you were incrementing $counter (not $count) which wasn't defined.
I'm trying to implement a simple pagination using PHP and Twitter Bootstrap but got stuck.
Everything seems to work fine the only problem is my div's are floating all around leaving some empty spaces in the page like in this picture:
Below is my code:
<?php foreach($tester as $data): ?>
<div class="col-sm-2">
<img src="" width="150" height="150"/>
<br>
<span><?php echo $data['Description'];?></span><br>
<span><?php echo $data['Unit_Price'];?></span><br>
<span>In Stock:<?php echo $data['Qty'];?></span><br>
<span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br>
<span>Show All Products In:<?php echo $data['P_Class_Name'];?></span>
</div>
<?php endforeach;?>
Put class="clearfix" div after each 6 elements to create non float sensitive line break
<?php $i=0; foreach($tester as $data): $i++; ?>
<div class="col-sm-2">
<img src="" width="150" height="150"/>
<br>
<span><?php echo $data['Description'];?></span><br>
<span><?php echo $data['Unit_Price'];?></span><br>
<span>In Stock:<?php echo $data['Qty'];?></span><br>
<span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br>
<span>Show All Products In:<?php echo $data['P_Class_Name'];?></span>
</div>
<?php if ($i % 6 == 0) { ?><div class="clearfix"><?php } ?>
<?php endforeach;?>
However, this solution shouldn't be used if you need a different number of elements to displayed per row for a different viewpoint size.
Basically, I need for the image at the bottom of the page with no text wrapped around it to be in the place of test post 4 (it's going to be a Google Adsense block but I am using images as a placeholder for now). I'm not sure how to do this, right now the code is the following:
<div class="google_ad_post">
<?php if ($count == 3) { ?>
<br /><img src="****" alt="post ad">
<?php } ?>
<?php $count++; ?>
</div>
Yet, the image is still at the bottom of the page. How can I fix this?
Here is the image:
I can't post pictures just yet so the URL to the image is http://i.imgur.com/7rw5B.jpg
I have to see your code to help you better with the Scripting Part, but something logical like this should work:
<?php
$count = 0;
foreach( $posts as $post ) : ?>
<?php if ($count == 3) { ?>
<div class="google_ad_post">
<img src="****" alt="post ad">
</div>
<?php } else { ?>
<div class="post" id="post-<?php the_ID(); ?>><div class="content"><?php the_content(); ?></div>
<?php } ?>
<?php $count++; ?>
<?php endforeach; ?>
I have a parent page that acts as menu for my portfolio.
It pulls in thumbnail images from the child pages which i have been able to accomplish with magic fields and some code. It dumps the images into a grid layout. The thumbnails are pulled into one container div like so:
div id="folio-content">
<div class="thumb-container">
<div class="thumb"><img src="/images/pic.jpg"/>
</div>JCPenny</div>
... </div>`
when the div gets filled up with 2 thumbnails I want to create a new container div and fill it with 2 images again and so on after 2 images.
So, if you had 4 images it would look like this.
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
this is the code I am using in my page.php file.
<?php get_header(); ?>
<div id="folio-content">
<?php
$projectpage = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
$count = 0;
foreach($projectpage as $page)
{
$content = $page->post_content;
if(!$content)
continue;
if ($count == 10) --- this is geting 10 images now, but I want to get them all.
break;
$count++;
$content = apply_filters('the_content', $content);
?>
<div class="thumb-container">
<div class="thumb"><a href="<?php echo get_permalink($page->ID); ?>"<?php echo get_image ("thumbnail",1,1,1,$page->ID);?></a>
</div><?php echo $page->post_title ?>
</div>
<?php
}
?>
</div><!--/close set!-->
</div>
also, how can I get ALL child pages? I have it set to 10 now with this if ($count == 10)
any help? thanks a ton again!!!!
I'm not familiar with "get_pages" but since Wordpress treats posts and pages in an identical manner you could use this.
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
The -1 removes the limit and gets ALL the specified pages.
I have cobbled together some code, that sort of sounds right but does not work at all! Which I am not surprised. But it is a starting point - please take a look at this code, maybe it is step in the right direction?
<?php
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
if (have_posts()) :
$i=0; // counter
while(get_posts()) : the_post();
if($i%2==0) { // if counter is multiple of 3, put an opening div ?>
<!-- <?php echo ($i+1).'-'; echo ($i+2); ?> -->
<div>
<?php } ?>
<div class="single_item">
<h2><?php the_title(); ?></h2>
</div>
<?php $i++;
if($i%2==0) { // if counter is multiple of 3, put an closing div ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php
if($i%2!=0) { // put closing div here if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
<?php endif; ?>