Can someone help me change this theme to pull the images in the sidebar from the custom field "sidebar" of each post, instead of the featured image, like it is now. The frame and link can stay the same, I just need the image to come from the custom field instead of the featured image.
<div id="content" class="city_page">
<div id="inner_sidebar">
<?php
$mypages = get_pages( array( 'child_of' => 9, 'sort_column' => 'post_title', 'sort_order' => 'asc' ) );
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( 'the_content', $content );
?>
<div class="item city">
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<img class="frame" src="<?php bloginfo('url'); ?>/images/city_image_frame_thumb.png" alt="" />
<a class="title" href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>
</div>
<?php
}
?>
</div>
As long as your are placing an image URL in the "sidebar" custom field you can replace the entire img src with the following.
<?php echo get_post_meta($post->ID, 'sidebar', true) ?>
You can learn more about the get_post_meta for thumbnail urls here: http://codex.wordpress.org/Function_Reference/get_post_meta#Retrieve_a_Custom_Field_Thumbnail_Url
Hope that helps!
Personally, I am a huge fan of the Advanced Custom Fields plugin. It is one of the first plugins I install in a new WordPress installation. It is really flexible and has a simple API for getting and setting custom fields.
Check it out!
Related
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.
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.
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 created a custom post type for 'products'. This works great and I am feeding my advanced custom fields for product name, product description and a product image (using featured image). I created my archive page and named it .../store/. I made two test products and they are both are feeding into the archive page fine. The problem I'm having is that they are connected and not separated.
I know this has to do with my variables that are calling the same custom field for each product. Here is my code for .../store/:
<div class="store-wrap">
<?php
$args = array(
'post_type' => 'products',
'post_status' => 'publish',
'posts_per_page' => '10'
);
$products_loop = new WP_Query( $args );
if ( $products_loop->have_posts() ) :
while ( $products_loop->have_posts() ) : $products_loop->the_post();
// Set variables
$title = get_the_title();
$description = get_field('product_description');
$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail' );
$product_image1 = $featured_image[0];
// Output
?>
<div class="product">
<a href="<?php echo get_permalink(); ?>">
<h2><?php echo $title; ?></h2>
<img src=<?php echo $product_image1; ?> alt=”<?php echo $title; ?>”>
<div class="clear"></div>
<?php echo $description; ?>
</a>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
If you look at the page http://dev.thefooddepot.org/store/, you can see that they are connected. How do I separate these? Thanks for your help.
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 ?>">