i have a custom post type-> events. I have a gallery page in which the featured image from a custom post is used as album cover . Now when a person clicks on the album cover i.e featured image , i want to display images in attached gallery in the post. I have been using the following code to display the featured images in the main gallery page .But how do i show the rest of the images of the post. Please help me out.
<?php $paged= (get_query_var('paged' )) ? get_query_var('paged'):1; ?>
<?php $args = array( 'post_type'=>'events',
'posts_per_page' => 100 ,
'paged'=>$paged
);
$loop = new WP_Query( $args );
if($loop->have_posts()):while ( $loop->have_posts() ) : $loop->the_post();
?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array(225,225) ); ?>
<?php if(!$image) :continue; else:?>
<div class="col-lg-3 col-md-3 col-sm-3 gallerycol paddingdel-l">
<div class="about-img">
<div class="about-img-bot">
<div class="photo-quanity"></div>
</div>
<img class="img-responsive" src="<?php echo $image[0]; ?>" alt="" />
</div>
<div class="clearfix"></div>
<p><?php the_title(); ?> </p>
</div>
<?php endif; ?>
<?php endwhile;endif; ?>
If i put the featured image in the anchor tag with href="the_permalink" then it takes me to the template single-events.php which is having a lot of infomation . How do i display only the images in the attached gallery
Any hint will be really helpful and appreciable
Related
This is the code by which I am trying to get featured image url to set as BG. It's working fine for page.php. But in Woocommerce Shop (post-type-archive-product) page it is showing one of product featured image instead of page featured image.
Any solution??
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<header style="background-image: url('<?php echo $thumb['0']; ?>')" class="inner-page-header">
<div class="wrap">
<div class="page_header">
<?php the_title(); ?>
</div>
</div>
</header>
You can use wc_get_page_id() to get the page ID and use that to get the image source. This should work.
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( wc_get_page_id( 'shop' ) ), 'full' );?>
<header style="background-image: url('<?php echo $thumb['0']; ?>')" class="inner-page-header">
<div class="wrap">
<div class="page_header">
<?php the_title(); ?>
</div>
</div>
</header>
Here is the documentation
I'm having some problems trying to show the first image of a gallery product on woocommerce,
I´m working on a personal wordpress theme, with personal template, all this work is into an owl carousel to show every product on a different slide,
I´m new with Woocommerce, I´m using WP_Query to show the products of a category, inside I´m showing the_title, the_content, the_permalink of every product on a while, I want to show the first and only one image inside the gallery of every product but I don´t know how to reach to it:
<div class="owl-carousel owl-theme" id="carousel">
<?php
$params = array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => '-1',
'product_cat' => 'barras'
);
$wc_query = new WP_Query($params);
if ($wc_query->have_posts()) :
while ($wc_query->have_posts()) :
$wc_query->the_post();
?>
<div class="item">
<a href="<?php the_permalink();?>">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/prev.png" alt="">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/next.png" alt="">
<p class="titulo-producto-slider"><?php the_title(); ?></p>
</a>
<div class="espacio-10"></div>
<div class="descripcion-producto-slider">
<?php the_content(); ?>
</div>
<div class="ver-detalle">
<ul>
<li>
Ver detalles
</li>
</ul>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
else: ?>
<p><?php _e( 'No Products' );?></p>
<?php endif;
?>
</div>
Sorry if you don´t understand something, it is my first question on stack and I don´t speak English,
Thanks a lot,
Try this:
$product = new WC_Product( get_the_ID() );
$attachment_ids = $product->get_gallery_image_ids();
if ( is_array( $attachment_ids ) && !empty($attachment_ids) ) {
$first_image_url = wp_get_attachment_url( $attachment_ids[0] );
// ... then do whatever you need to do
} // No images found
else {
// #TODO
}
For more details: WP_Product class reference.
On my static front page I have created, I query the Wordpress Loop to only show the two most recent blog posts. For some reason, it started displaying two instances of the attached image for each post. Here is what it looks like:
I have no idea why it is outputting two of the attached images for each.
Here is the code for this specific part of front-page.php:
<div class="row">
<?php $latest = new WP_Query('showposts=2'); ?>
<?php while( $latest->have_posts() ) : $latest->the_post(); ?>
<a href='<?php echo get_permalink(); ?>'>
<div class="col-md-6 blog-wrap">
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?>
<div class="home-featured-img" style="background: url(<?php echo $src[0];?>);"></div>
<div class="excerpt-home">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
</div></a>
<?php endwhile; ?>
</div>
I have a feeling that the problem occurs when I call:
If you need any other code snippets from my custom theme, please let me know.
I only want for the post to display the image from this (which is the top picture):
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?>
<div class="home-featured-img" style="background: url(<?php echo $src[0];?>);"></div>
Any and all suggestions are greatly appreciated.
you can remove any code like that
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
Explanation...
that file display the second image - the title - the meta
you need to edit it to remove the code that display the image :) thats it.
I use a template that generates thumbnails on the content.php page like so:
<article <?php post_class('single-entry clearfix'); ?>>
<?php
// Test if post has a featured image
if( has_post_thumbnail() ) {
// Get resize and show featured image : refer to functions/img_defaults.php for default values
$wpex_entry_img = aq_resize( wp_get_attachment_url( get_post_thumbnail_id(), 'full' ), wpex_img( 'blog_entry_width' ), wpex_img( 'blog_entry_height' ), wpex_img( 'blog_entry_crop' ) );
?>
<div class="single-entry-thumbnail">
<img src="<?php echo $wpex_entry_img; ?>" alt="<?php echo the_title(); ?>" />
</div><!-- /single-entry-thumbnail -->
<?php } ?>
<div class="entry-text clearfix">
<header>
<h3><?php the_title(); ?></h3>
</header>
</div><!-- /entry-text -->
I am just starting with Wordpress and php and I want to add a parameter to this so only posts with category 'showcase' i.e. will show up. Anyone an idea?
You can use in_category() function to test that post belongs to it.
if ( in_category( 'showcase' ) ) {
...
}
in_category() docs - http://codex.wordpress.org/Function_Reference/in_category
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 ?>">