Trying to do a few things in my new Wordpress Youtube niche theme. I have a tab in my theme for the user to input the Youtube watch?v=xxxxxxxxxxx id. When they enter the xxxxxxxxxxx url it outputs the video, showing 16 posts per tab via the 'loop' query.
Working example here
I have looked into this Google developer console api thing... and it is complete gibberish to me. I'm using custom post types for the 4 categories youll see on my site. only "Comedy" is populated right now.
NEW EDIT: THIS WORKS. Thank you all who have helped me figure this out!
<?php
$new_query = new WP_Query();
$new_query->query( array('post_type' => array( 'comedy' ), 'orderby' => 'title', 'order' => 'asc','showposts' => 16, 'paged'=>$paged ));
while ($new_query->have_posts()) : $new_query->the_post();
$url = get_post_meta ($post->ID, 'comedy_url', $single = true);
include(TEMPLATEPATH . '/library/variables.php');
$code = 'http://www.youtube.com/watch?v=' . $url;
$json = file_get_contents('http://www.youtube.com/oembed?url='.urlencode($code));
$video = json_decode($json);
?>
<img src="<?php echo $video->thumbnail_url ?>" />
Upon pulling the thumbnail some of you may notice BLACK BORDERS on the top and bottom of your thumbnail. To fix this use the code below:
<a href="<? if($code) {?><?php echo $code; ?><? } ?>">
<div class="yt-thumbnail" style="background:url('<?php echo $video->thumbnail_url ?>') center no-repeat;"></div>
</a>
// in your css file
.yt-thumbnail{
height: 164px;
width: 300px;
background-size: 300px 220px;
}
You can use the oEmbed API to get thumbnail, uploader name and title. All you need is to encode the URL of the video, for example:
http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9FOWI6Zftpg
This will return a JSON response:
{
"provider_name":"YouTube",
"version":"1.0",
"author_url":"http:\/\/www.youtube.com\/user\/NScherzingerVEVO",
"type":"video",
"author_name":"NScherzingerVEVO",
"thumbnail_url":"http:\/\/i1.ytimg.com\/vi\/9FOWI6Zftpg\/hqdefault.jpg",
"provider_url":"http:\/\/www.youtube.com\/",
"title":"Nicole Scherzinger - Your Love",
"height":270,
"width":480,
"thumbnail_height":360,
"html":"\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/9FOWI6Zftpg?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
"thumbnail_width":480
}
Getting the view count is a bit more difficult, see the answers here for details.
Edit:
Here is an example how to get the thumbnail in PHP:
<?php
$url = 'http://www.youtube.com/watch?v=9FOWI6Zftpg';
$json = file_get_contents('http://www.youtube.com/oembed?url='.urlencode($url));
$video = json_decode($json);
?>
<img src="<?php echo $video->thumbnail_url ?>" />
Related
Dear PHP / Wordpress / Dev Experts,
Ive build a plugin, with a custom post type and some advanced custom fields. The main goal is to list the members in my band, with pictures and name.
You can see it here: http://www.lucky13.nl/test/
I've managed to get everything working to my taste, however.. I have 5 bandmembers in my band which i've added, but i'm only seeing 4. Where is the 5th entry / post? I find that the first added bandmember is not displaying.
I assume this has to do with the loop, and the array not listing all items? But i'll leave this to the experts.. I would appreciate any comments of help!
My code:
<?php
/*
Plugin Name: VrolijkWebdesign - Bandmembers
Description: For a bandwebsite to show bandmembers.
*/
/* Start Adding Functions Below this Line */
/* NAME FUNCTION */
function new_section_1(){
$bandmembers = new WP_Query(array(
'post_type' => 'bandmembers'
));
while($bandmembers->have_posts()) : $bandmembers->the_post();
if (has_post_thumbnail( $post->ID ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<!-- START HTML -->
<div class="span2">
<figure class="snip1104">
<img src="<?php echo $image[0] ;?>" alt='sample33'/>
<figcaption>
<h5> <?php the_field('firstname'); ?> <span> <?php the_field('lastname'); ?>
</span></h5>
</figcaption>
</figure>
</div>
<!-- END HTML -->
<?php endif;
endwhile;
}
add_shortcode('band', 'new_section_1');
?>
$bandmembers = new WP_Query(array(
'post_type' => 'bandmembers',
'posts_per_page' => '5'
));
Try setting the posts_per_page argument. Since the default might be set to '4' by other filters.
If you want to get all posts in a single query use '-1' instead of '5'
You could also try the below for debugging purposes only:
-Try to set post_status to 'any' to make sure that post statuses are not a problem.
-Try var_dump($bandmembers) after doing the query to see the fetched posts before the loop starts.
I have an 'apparel' section on this HTML website which I'm now converting to Wordpess.
In my design it looks like this (see below)
Apparel section
but in my build it looks like this (see below)
The actual build in wordpres
I don't think the code is the problem but here it is for reference:
<?php $loop = new WP_Query( array('post_type' => 'apparel', 'orderby' => 'post_id', 'order' => 'ASC')); ?>
<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-lg-4 col-md-6 col-sm-6 mb-sm-30">
<div class="blog-post">
<div class="post-media">
<img class="item-container" src="<?php the_field('apparel_img'); ?>"/>
</div>
<div class="product"><a><?php the_field('name_price');?></a></div>
</div>
</div>
<?php endwhile; ?>
When I've used Chrome inspector to check what's happening with the images themselves it looks like other strings are being pulled in, and when I delete everything apart from the image root then the image isn't broken and works.
src="26, frontrunnerz black tee, black tee, , , image/png, http://localhost:8888/wp-content/uploads/2016/09/tee01.png, 300, 200, Array"
Appreciate your help with this please!
Do you have your ACF field of apparel_image outputting the array rather than URL? To output it in this way you'd want URL!
Or if you want control of the size of image being pulled through you could output ID from ACF and put in your template:
$x = //post id;
$s = //size string e.g. 'full';
$image = get_field('apparel_image', $x);
echo wp_get_attachment_image( $image, $s );
As a final note, the below site has their docs, which are really handy if you're trying to do something more complicated, but I'm pretty sure if you want to just output the src, you just need to change the output in your wp-admin custom field settings!
https://www.advancedcustomfields.com/resources/image/
I am using the Plugin Auto Featured Image to set thumbnails automatically. And in the database it shows updated meta thumbnail key.
But for some reason it is not showing the featured image. It doesn't show a "placeholder" neither. It just shows nothing at all.
Also, when I try to view the attachment on a single page, it does not show it.
How can I proceed to find the problem? If you need more screenshots of different tables on my database, please ask. I really appreciate your time.
EDIT
$meta_values = get_post_meta( $POST_ID, '_thumbnail_id');
error_log(var_dump($meta_values)) //Prints nothing on error log
//Note: $POST_ID is fine, it contains the right id. Problem not there.
EDIT 2:
if ( has_post_thumbnail($post_parent_id) ){
error_log("THUMB EXISTS". get_post_thumbnail_id($post_parent_id));
}
Really weird result:
THUMB EXISTS: "Blank space, No id or string at all"....
1) get post thumbnail with post id full description
<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>
2) In a loop full description
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
3 want to get the thumb url ?? . Use this
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
<img src="<?php echo $url; ?>" longdesc="URL_2" alt="Text_2" />
I am working on a portfolio website. Whenever a portfolio piece is clicked, the user is taken to a page that shows details about that piece (i.e. more photos and information). There will also be previous and next navigation links to get to additional pieces. However, I want the previous and next navigation links to be a thumbnail photo of the next piece (custom field for that is thumbnail_photo). This is what I have so far:
<?php
$previous_post = get_previous_post();
$next_post = get_next_post();
$prev_value = get_post_meta( $previous_post->ID, 'materials', $single = true);
$next_value = get_post_meta( $next_post->ID, 'thumbnail_photo', $single = true);
?>
<p><?php echo $prev_value; ?></p>
<p><?php echo $next_value; ?></p>
I used 'materials' in the call for $prev_value since 'materials' is another custom field. I just wanted to see if it was actually working. It outputs the materials just fine, but it only outputs the ID number of the thumbnail_photo. I can't get it to reference the file name so that I can output the actual image.
I am using the Advanced Custom Fields plugin, so each image is stored as an image object. So this is how I would typically output a thumbnail image:
<?php
$image = get_field('thumbnail_photo);
echo $image[sizes]["thumbnail"]; // thumbnail is a reference to wordpress' thumbnail media size
?>
When you configure the ACF input field, be sure you set the return value to be an image object instead of the image ID after change this, or if you already changed, you have to update the post or posts you're trying to get. Because, if you set the field return value as image ID, created the posts and now you wanna change their values you have to modify all the posts because every post_meta is containing the ID of the image.
In the ACF website has a tutorial how you could get the values an turn into images:
With the ID
<?php
wp_get_attachment_image( $next_value, 'thumbnail' );
?>
Another Example With the ID, but this time you have to create the image HTML, the function returns an array with the url, width and height
<?php
$image = wp_get_attachment_image_src( $next_value, 'thumbnail' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />
You could do a check for the returned value and then write the image, example:
<?php
if( is_int( $next_value ) ) {
wp_get_attachment_image( $next_value, 'thumbnail');
} elseif ( is_object( $next_value ) ) {
echo $next_value['sizes']['thumbnail'];
} else { ?>
<img src="<?php the_field('field_name'); ?>" alt="" />
<?php } ?>
I didn't test it, but I think it works fine.
I hope this help and sorry for the bad english
I'm creating a website with a carousel. To load images, I'm using Advanced Custom Fields on Wordpress.
Here is my code :
<?php $images = get_field('slides', $post->ID);
// clean_print_r($images);
if (!empty($images)) :
?>
<div class="wide-container">
<div id="slides">
<ul class="slides-container">
<?php for($i = 0; $i < count($images); $i++): ?>
<!-- slides -->
<li>
<img src="<?php echo $images[$i]['img_slide']['sizes']['large'] ?>" alt="" />
</li>
<?php endfor; ?>
</ul>
</div>
</div>
<?php endif; ?>
I can load images, but they are sized at 1024px wide:
<img src="http://example.com/wp-content/uploads/2013/09/bg_header03-1024x341.jpg" ... />
Is there any way to get full sized images? I've tried to replace :
['img_slide']['sizes']['large']
with
['img_slide']['sizes']['full']
But that doesn't work, and no images are loaded.
In ACF I call image attachment by ID, and it's a repeater field.
Im not sure how do it with return IDs but if you return URL instead you get the full image.
Edit:
Ok I did some test with the Image ID instead, looks like you've confused your array handling somehow. This works for a single image: Should be easy to adapt to your repeater though.
$attachment_id = get_field('slide');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
echo '<img src="' . $image[0] . '">';
//OR
$image = wp_get_attachment_image( $attachment_id, $size );
echo $image[0];
My previous answer was about return: image ID, as specified by the thread starter but now i realize that he was actually talking about return: object.
/*
* Return value = Object
* requires ACF 3.3.7+
*/
$image = get_field('image');
var_dump($image);
/*
Data returned will look like this:
Array
(
[id] => 540
[alt] => A Movie
[title] => Movie Poster: UP
[caption] => sweet image
[description] => a man and a baloon
[url] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[sizes] => Array
(
[thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-150x150.jpg
[medium] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-300x119.jpg
[large] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[post-thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[large-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[small-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-500x199.jpg
)
)
*/
source: http://www.advancedcustomfields.com/resources/field-types/image/
So apparently the original image is not a size but the URL, therefore change:
['img_slide']['sizes']['large']
to
['img_slide']['url']
and you should be fine