I have some php code which echos the width of a specific image size in WordPress. Currently, if the image width is greater than 80, then it echos "frog"...what I would like it to do is count all of the image widths within my while and if the total of those images are greater than 600 (hypothetical number) then echo "frog". The code I am using looks like (I am using this code within my while):
<?php
$image = wp_get_attachment_image_src (get_post_thumbnail_id($post_id), 'gallery-thumbnail');
list($width) = getimagesize($image[0]);
echo $width;
if( $width > 80 ) {
echo "frog";
}
?>
My while is the basic WordPress standard:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- some code here -->
<?php endwhile; else: ?>
<!-- some code here -->
<?php endif; ?>
Any ideas?
Thanks, Josh
Part pseudo code/part solution:
$sumOfWidths = 0;
foreach($images as $image)
{
$sumOfWidths = $sumOfWidths + $image['width'];
}
if($sumOfWidths>600)
{
echo 'frog';
}
Simply put the above code loops through each image and adds the image width to the $sumOfWidths variable.
After the foreach loop, has completed, there should be a number in the $sumOfWidths which you can check and then undertake your logic as you see fit.
Have a look at this code snippet to get you started
Related
I have created a layout using a simple WP loop and Im trying to randomise the images that display in the background of each post in the loop.
My method.
Create a function that contains an array of images that I can call from anywhere in the template.
Call the function for the array before the loop.
Use $i to get the each index in the array thus changing the image.
My array function ( a list of 30 images ):
function randompics(){
$images = array(
get_template_directory_uri().'/images/jobs_large/1.jpg',
get_template_directory_uri().'/images/jobs_large/2.jpg',
get_template_directory_uri().'/images/jobs_large/3.jpg',
get_template_directory_uri().'/images/jobs_large/4.jpg',
get_template_directory_uri().'/images/jobs_large/5.jpg'
);
return $images;
}
My template. So I want the background URL to advance through the index of the array with each iteration.
<?php
$pics = randompics();
$i = 0;
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<div class="col-md-4">
<div class="item-container" style="background: url(<?php echo $pics[$i]; ?>);">
</div>
</div>
<?php
$i++;
endwhile;
endif;
?>
EDIT FOR CLARIFICATION OF MY QUESTION.
My question therefore is why is the background URL not working. The syntax is clearly wrong.
There is nothing wrong with the loop except that you should check array item using "isset($pics[$i])" because if there are x number of images and x+n number of posts then you will get an exception (http://php.net/manual/en/class.outofboundsexception.php) as there is no element at $pics[x].
Your "background" CSS property is wrong. Either use
background-image: url(YOUR IMAGE URL);
or
background:<background-color> <background-image> <background-repeat> <background-position>;
For example,
background:transparent url(YOUR IMAGE URL) no-repeat 0 0;
I'm using acf plugin on a wordpress site. I am using a repeater field with an image subfield that is displayed on a blogpost. My goal is to only get and display the first and second images from a blog post to be displayed for the homepage.
I tried using this code from the acf site documentation but to no avail the code is not working. Can someone know the issue?
<?php while ($the_query -> have_posts()) : $the_query ->
the_post();
$postqID = get_the_ID();
?>
<?php
$rows = get_field('post_images', $postqID ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['post_image' ]; // get the sub field value
// Note
// $first_row_image = 123 (image ID)
$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />
I just solved this issue. For those who are also having issues on displaying certain number of rows of images on a repeater field. You can refer my answer.
The code below returns two images from a repeater field. Just changed the condition ($i>1), if you wish to return certain number of image.
<?php
$i = 0;
if(get_field('post_images', $postqID)):
?>
<?php while (has_sub_field('post_images',$postqID)): ?>
<img src="<?php the_sub_field('post_image')['url']; ?>"></img>
<?php
$i++;
if($i > 1)
{
break;
}
?>
<?php endwhile; ?>
<?php endif; ?>
I've tried what I could on this and am still stuck, so I'm looking for some help. I'm sure there's something small I'm overlooking or am not aware of, so I'd be grateful for another set of eyes to take a look!
I'm trying to use a switch within a Wordpress while loop to set dimensions on post thumbnails for specific posts. The switch uses an auto-incrementing value ($count). Inside the loop, $count will return the right number for div ID's, but it will not work with the switch. All of the thumbnails go to the size defined before the loop begins (see $thumbsize)
Here's the code:
// Setup loop to pull only posts tagged slider
$max = 6;
$args = array('tag' => 'slider','posts_per_page' => $max);
$featuredPosts = new WP_Query();
$featuredPosts->query($args);
// Defaults for post thumbnail display
$thumbargs = array('class' => 'featured-blocks-img');
$thumbsize = array(640,360);
$count = 0;
// Begin loop
if ($featuredPosts->have_posts()) : while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
$count++;
// Get post category and format for div class name
$category = get_the_category();
$catname = $category[0]->cat_name;
$catdash = 'cat-';
$catdash .= str_replace(' ', '-', $category[0]->cat_name);
$catdash = strtolower($catdash);
// Change post thumbnail size conditionally
switch ($count) {
case 2:
case 5:
case 6:
$thumbsize == array(320,260);
break;
default:
$thumbsize == array(640,360);
} // End switch
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div id="home-featured-post-<?php echo $count;?>" class="featured-blocks-post <?php echo $catdash; ?>">
<h2 class="home-featured-title"><?php the_title(); ?></h1>
<?php the_post_thumbnail($thumbsize, $thumbargs); ?>
</div>
</a>
<?php
endwhile;
endif; // End loop
And here it is in Gist form if that's helpful to anyone: https://gist.github.com/anonymous/8984741
I tried to add comments that would provide some context.
Any ideas of what's happening? I can provide the resulting HTML source if that would help also.
Looks like you aren't actually setting $thumbsize in the below code
$thumbsize == array(320,260);
== is comparing $thumbsize to that array, not creating an array with those values.
You really want it to just look like this:
$thumbsize = array(320,260);
My loop displays posts in two columns using this:
<?php
if (have_posts()): while (have_posts()) : the_post();
$count++;
?>
<?php if ($count == 1) : ?>
<div class="home-ci-row">
<div style="padding: 0px;" class="main-column-item-wrap">
CONTENT OF POST : Title, Thumbnail, Excerpt... etc
</div>
<div class="home-ci-gap"></div><!-- /* the gap */ -->
<?php elseif ($count == 2) : ?>
<div style="padding: 0px;" class="main-column-item-wrap">
CONTENT OF POST : Title, Thumbnail, Excerpt... etc
</div> <!-- main-column-item-wrap -->
</div><!-- /* home-ci-row*/ -->
<?php $count = 0; ?>
<?php else : ?>
// No posts
<?php endif; endwhile; endif; ?>
You can see that the <div class="home-ci-row"> opens in the first count & closes in the second one </div>
so when my loop has an even number of posts works great, but with odd number it doesn't close the div
so My idea is this: If loop has even number
If loop has odd number of posts
By the way, you can do something like:
<?php
$count=0;
while(have_posts()){
if($count%2==0){
echo '<div class="home-ci-row">';
//draw your left div here
}else if($count%2==1){
//draw your gap here
//draw your right div here
echo '</div>';
}
$count++;
}
//close div if count is an odd number
if($count%2==1) echo '</div>';
?>
Is it possible to swap to a for loop? Is this what you need?
for ($i = 0; $i < $numberOfElements; $i++)
{
//if (odd number) && (this is the last element)
if (($i % 0 == 1) && ($i == $numberOfElements - 1))
{
//Special Case
}
else
{
//Normal Case
}
}
Caveat: Watch out for errors, PHP isn't my strongest language
This question was answered on WP Development StackExchange by fischi
Quoting from his answer:
You could do this much easier. As you are making a layout that can be achieved by floats, there is no need to declare a Row every second time.
In my Code example I just youse the $count to determine the Class of the HTML-Element. In combination with the total Number of Posts displayed.
If the total number of posts $wp_query->post_count is reached by the $count AND the total number is odd, I give the Element the Class fullwidth. In the same way, I determine if it is the first or the second (see the IF-Statement).
All I need to do afterwards is output the corresponding Class for each HTML-Element in the Loop. Besides the Class, no Element is diffferent from each other.
I use the Modulo Operator in PHP ( % ) to determine odd/even. It delivers 1 if I use $count % 2 and $count is odd. If you are not sure about this operator, read about it here.
So your code could look like this:
<?php
$count = 0;
if (have_posts()): while (have_posts()) : the_post();
if ( ++$count == $wp_query->post_count && ( $wp_query->post_count % 2 ) == 1 ) {
// if final count is reached AND final count is odd
// full width item
$postclass = "fullwidth";
$opentag = '';
$closingtag = '</div>';
} else if ( ( $count % 2 ) == 1 ) {
// if $count is odd it is the first item in a 'row'
$postclass = "halfwidth first";
$opentag = '<div class="home-ci-row">';
$closingtag = '';
} else {
// second item in a row
$postclass = "halfwidth second";
$opentag = '';
$closingtag = '</div>';
}
?>
<?php echo $opentag; ?>
<div class="main-column-item-wrap <?php echo $postclass; ?>">
CONTENT OF POST : Title, Thumbnail, Excerpt... etc
</div><!-- main-column-item-wrap -->
<?php echo $closingtag; ?>
<?php endwhile; endif; ?>
I have created a custom post type with an image gallery upload. Now I am trying to display the gallery on the front end. This is what I have so far that works to display 1 image, but if multiple images are uploaded all the urls get stuck in the src tag. So I'm guessing I should loop through that array and spit out each one separately? Would that be the route to go and if so how can I accomplish this? Any help is appreciated.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
echo '<img src="'.get_post_meta($post->ID, 'gallery-upload', true).'">';
?>
<?php endwhile; else: ?>
<p><?php _e('No posts were found. Sorry!'); ?></p>
<?php endif; ?>
EDIT:
This is what is being returned:
<img src="http%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F800x400-volbeat-mock1.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F1574_2_1.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F1576_2_1.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F1576_4_1.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F2244_2_1.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F300789_2349086884438_1168050047_32154880_1451576942_n.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F373795_278881222158106_278880528824842_834930_1454244548_n.jpeg%2Chttp%3A%2F%2Flocalhost%3A8888%2Fandreasmoulis%2Fwp-content%2Fuploads%2F2012%2F10%2F20110909-121141.jpeg">
Looking at the function reference, get_post_meta ordinarily returns an array unless the third argument is set to true. Something like this should work, more or less.
<?php
foreach(get_post_meta($post->ID, 'gallery-upload') as $meta) {
foreach(explode(',', $meta) as $src) {
echo '<img src="'.htmlentities($src).'">';
}
}
?>
EDIT: Apparently gallery-upload is stored as comma-separated values. Updated my snippet above to hopefully account for this.