I currently have some php code which gets the thumbnail of random Wordpress posts but the problem is when I run it none of the images show until every image has been downloaded. I was wondering if there is a way to echo the image then go to the next one. Thanks.
<?php
$args = array( 'numberposts' => 25, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach( $rand_posts as $post ) : ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?>
<li id="photo-<?php the_ID(); ?>" class="visible scroll-content-item ui-widget-header"><img width="80" height="80" src="<?php echo $url; ?>" class="attachment-small-grid wp-post-image" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> </li>
<?php endforeach; ?>
PHP cannot tell you when an image has downloaded, as it is a server side language. You have to use javascript to write code based on browser based events, like images loading.
www.farinspace.com/jquery-image-preload-plugin/
That jQuery plugin will let you execute functions based on each image loading, and then on all images loading... I might start there.
Related
I'm using wp_query method to display all my woocommerce products, but I have applied Google's PageSpeed tool and found out that the images size are too large, and taking me longer to load.
I'm aware WordPress has duplication of images with different size that has been uploaded, but I don't know how to approach the size I want.
$args = array(
'post_type' => 'product',
'posts_per_page' => 12,
'product_cat' => $cat,
'paged' => $paged
);
$loop = new WP_Query( $args );
if (have_posts()):
while ( $loop->have_posts() ) : $loop->the_post();
global $product;
?>
<div class="grid-item">
<a href="<?php echo get_permalink(); ?>">
<div style="position: relative;">
<img src="<?php echo the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title() ?>"/>
<?php
if(!$product->managing_stock() && !$product->is_in_stock()) {
echo '<div class="out">OUT OF STOCK</div>';
}
if($product->is_on_sale()){
echo '<div class="sale">SALE</div>';
}
?>
</div>
<span class="title">
<?php echo get_the_title(); ?>
</span>
<span class="price">
<?php echo $product->get_price_html(); ?>
</span>
</a>
</div>
<?php
endwhile;
endif;
I want the images to be size 900x300.
How can I set images size using WP_Query arguments?
How to approach different sizes:
You need to insert the size's name (thumbnail, full, etc.) as a parameter inside the the_post_thumbnail_url() function. For example:
<?php the_post_thumbnail_url('thumbnail'); ?>
Note that the_post_thumbnail_url() echoes the url already, no need to echo it again. If you don't want the function to directly echo it, use get_the_post_thumbnail_url() instead. (Notice that the two functions require different sets and orders of parameters.)
How to set up a size:
The default sizes are thumbnail, medium, large, and full.
None of them have a dimension of 900 x 300.
You can either go to Settings->Media in your WP dashboard and change one of the settings, or you can add the following in your functions.php:
add_image_size('NEW_NAME', 900, 300);
Read about the parameters of add_image_size() function if you need any customization.
I'm new to php (' still struggle with syntax :-) ') and wordpress and I'm building a web-site where I am looping to my category page all the images tagged with that category. I need the images to be automatically linked to its parent post which should be a Clients page essentially. The code i'm using right now links me to the same category page instead of client page.
This is the code i'm using now to pull the images.
<?php
$query_images_args = array(
'cat' => 3,
'post_type' => 'attachment',
'post_mime_type' => 'image,video',//img & video files include
'post_status' => 'inherit',
'orderby' => 'ACS',
'posts_per_page' => 30,
);
$query_images = new WP_Query( $query_images_args );
if($query_images->have_posts()) :
while($query_images->have_posts()) :
$query_images->the_post();
?>
<a href="<?php get_permalink( $parent_id ); ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php echo $images = wp_get_attachment_image( $query_images->posts->ID, 'thumbnail' ); ?>
</a>
<?php endwhile; ?>
<?php else : ?>
<p>No media file yet</p>
<?php endif;
/* Restore original Post Data */
wp_reset_postdata(); ?>
I hoped that this part <a href="<?php get_permalink( $parent_id ); ?> will link me to the clients page but it still links me to category page.
I think that the I have something wrong with hierarchy or the way do the linking part.
I have also checked this resource but it does not seem to do anything :
https://wordpress.stackexchange.com/questions/188736/get-the-title-and-url-of-the-attachment-parent-post
I think that you are using a variable $parent_id that isn't set.
Try replacing:
<a href="<?php get_permalink( $parent_id ); ?>"
with:
<a href="<?php get_permalink( $post->post_parent ); ?>"
So I tried to make a custom post type called 'showcase' and created a few posts in this custom post type. The problem is that when I click on a 'product' it should showup in a lightbox instead of going to the thumbnail url.
This is the code I am using:
<section id="showcase">
<?php
$args = array( 'post_type' => 'showcase', 'posts_per_page' => -1 ); $the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
$it = 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$terms = get_the_terms( $post->ID , 'showcase_category');
$it ++;
if ($it == 6) {
echo '</section><div class="cta-block"><h2>Live model drawing</h2><p>Drawing from a live model, gives you the opportunity to draw what you see instead of drawing what you think about.</p>View courses</div><section id="showcase">';
}
?>
<a class="entry-showcase" href="<?php the_post_thumbnail_url(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php wp_reset_postdata();
endwhile; else :
endif; ?>
</section>
Also, I tried using a few plugins which automaticly detect jpg, gif etc but for some reason they are not working for thumbnail images.
Some plugins I tested:
Easy FancyBox,
Responsive Lightbox,
Simple Lightbox,
Also, I am not getting any errors it just goes straight to the media file in url instead of staying on the same page and showing the image in a lightbox.
Thanks in advance (:
You can maybe use the Fresco-Lightbox. After implementing you can add the "fresco"-class to any imagelink and open it in a lightbox:
<a class="entry-showcase fresco" href="<?php the_post_thumbnail_url(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
Also see the Fresco documentation.
I'm working on a website http://www.matchlessphotography.com which has got a great display of photos - it tiles for ages...
Essentially the client would like this to continue on infinately.
I have no idea how to do this and have had a look at some tutorials without any bearing...
This is how I am currently getting the posts:
<?php
global $post;
$args = array('numberposts' => 104, 'meta_key=visible&meta_value=yes');
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<a class="photohovera" href="<?php the_permalink(); ?>">
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<? echo $url ?>&h=138&w=197" width="197" height="138" title="<?php the_title(); ?>" />
<span class="spanno">
<strong class="title_blog_mini_post">
<?php the_title(); ?>
</strong>
</span>
</a>
<?php endforeach; ?>
I guess I just need to do this again but with an increased offset each time...?
Paul Irishs jQuery Plugin Infinite Scroll is the way to go here.
The plugin looks for a pagination container e.g. div.navigation and an item container for the items you are going to retrieve like .photohovera in your case.
WordPress provides a function for displaying pagination links. It's called paginate_links and its default output should match the requirements of the plugin.
However you will need to change they way you are getting your posts right now from get_posts() to a WP_Query Object:
<?php
$args = array('numberposts' => 104, 'meta_key=visible&meta_value=yes');
$myposts = new WP_Query( $args );
$results = $myposts->get_results();
foreach( $results as $post ) : setup_postdata($post); ?>
I'm building my first WordPress Theme and I'm stuck on something.
I have a function in my functions.php called get_first_photo() which grabs the first image uploaded on each post and puts it on the blog archive page. It's working fine, but it loads the full-sized image and resizes it using CSS. I would rather it load the image at it's thumbnail size set in the WP control panel so I don't have the image-size overhead. Any way to accomplish this?
Here's the code from functions.php:
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT guid FROM wp_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And here's the blog template:
<?php
get_header(); ?>
<div id="content" class="blog">
<div id="body">
<h3 class="title" id="blog">The Ned Leary Blog</h3>
<?php if (have_posts()) :
query_posts("category_name=blog");
while (have_posts()) :
the_post();
$first_photo = get_first_photo(get_the_ID());
?>
<div class="snippet">
<?php if (!empty($first_photo)) : ?>
<img src="<?php echo $first_photo; ?>" alt="Thumbnail" />
<?php else : ?>
<img src="<?php bloginfo('url'); ?>/images/blog/gravatarBig.jpg" alt="Ned Leary Gravatar" />
<?php endif; ?>
<div class="details">
<h2><?php the_title(); ?></h2>
<h5><?php the_time('D, M j, Y') ?> by <?php the_author('') ?> | <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?></h5>
<?php the_excerpt(); ?>
<h4>Read more…</h4>
</div>
</div><!--end snippet-->
<?php endwhile; endif;// end of the loop. ?>
</div><!--end body-->
<?php get_sidebar(); ?>
</div><!--end content-->
<?php get_footer(); ?>
All you need is to grab the post ID for that first image you want and then run it through "get_the_post_thumbnail()".
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo );
You can also pull your own custom thumbnail sizes if you like as well. As long as you are using wordpress 2.9+.
Simply add this to functions.php
add_theme_support( 'post-thumbnails' ); //enable thumbs
add_image_size( 'mycustom-preset', width you want, height you want); //custom size
Then run the same function but call your new preset...
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo, 'mycustom-preset' );
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/add_image_size
Hope that helps. It doesn't seem like your having trouble obtaining the post id for the first photo so I didn't really cover how to obtain it.
You can use GD or some other image library to programmatically manipulate an image. However, it would be best to implement an operation to create a thumbnail file when the image is uploaded. You can have it dynamically generate a thumbnail every time the page is loaded, but such an operation can be relatively computationally expensive and put unneeded load on the ssystem.
Thanks to John Ford for pointing me in the right direction, I was able to figure this out.
The query in my function changed slightly, grabbing the post id instead of guid.
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT id FROM aire_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And then I had to add another line to my theme file:
$first_photo = get_first_photo(get_the_ID());
$thumb = wp_get_attachment_image_src($first_photo);
Lastly, I updated my image src:
<img src="<?php echo $thumb[0]; ?>" alt="Thumbnail" />
you could use the get_the_post_thumbnail function or use a php thumbnail generator like timbthumb
<?php $images = get_children( array( 'post_parent' => $page->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) {
$total_images = count( $images );
$image = array_shift( $images );
$thumbnail = wp_get_attachment_image_src($image->ID, array(225,125) );
$thumbnail = $thumbnail[0]; }
?>
<img class="size-thumbnail alignleft" src="<?php echo $thumbnail; ?>" alt="<?php echo $page->post_title ?>">