I building some custom page in Wordpress. I have this video player and I want a playlist of medias beneath. When an element of the listing is clicked, it's loaded into the player. This is working for now. I also want to display a thumbnail of each media left to the listing elements.
I try to get the thumbnails and display them but when I upload the code, the src of the thumb is blank..
I don't know if this is correct for a media (mp4) loaded in WP Media Library :
$image_src = wp_get_attachment_image_src($attachment->ID);
<div class="video-player">
<?php
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'video/mp4',
'post_status' => 'inherit',
's' => 'INA',
'orderby' => 'title',
'order' => 'ASC',
'posts_per_page' => -1
);
$attachments = get_posts($args);
if ($attachments) {
$first_video = array_shift($attachments);
$url = wp_get_attachment_url($first_video->ID);
$title = apply_filters('the_title', $first_video->post_title);
echo '<video id="player" width="320" height="240" controls>
<source src="' . $url . '" type="video/mp4">
</video>';
}
?>
</div>
<div class="video-playlist">
<ul id="playlist">
<?php
if ($attachments) {
array_unshift($attachments, $first_video);
foreach ($attachments as $attachment) {
$url = wp_get_attachment_url($attachment->ID);
$title = apply_filters('the_title', $attachment->post_title);
$image_src = wp_get_attachment_image_src($attachment->ID);
echo '<img src="'.$image_src.'" alt="'.$title.'">';
echo '<li class="playlist-item" data-url="'. $url .'">' . $title . '</li>';
}
}
?>
</ul>
</div>
Thanks a lot !
Related
I face a problem with displaying products on a specific portfolio post. I use product shortcodes in order to display specific products, but they do not appear.
I use wordpress 5.2.5, avada theme 5.9.1 and woocommerce 3.9.2.
Anyone got an idea what is going on?
If not, can anyone tell me an alternative way to display them?
use shortcode [get_specific_product_shortcode id='here enter product id']
function get_specific_product_shortcode_function($atts){
extract( shortcode_atts(
array(
'id' => '',
), $atts )
);
ob_start();
$args = array(
'posts_per_page' => 1,
'post__in' =>array($id),
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'product',
'post_status' => 'publish',
);
$query = new WP_Query( $args );
$count = $query->found_posts;
if($query->have_posts()){
while( $query->have_posts() ) { $query->the_post();
$post_thumbnail_id = get_post_thumbnail_id();
$product = wc_get_product(get_the_ID());
if (!empty($post_thumbnail_id)) {
$image_size = 'medium'; // (thumbnail, medium, large, full or custom size)
$img_url_arr = wp_get_attachment_image_src( $post_thumbnail_id, $image_size );
$img_url = $img_url_arr[0];
}else{
//placeholder image
$img_url = home_url().'/wp-content/uploads/woocommerce-placeholder.png';
}
?>
<div>
<a href="<?php echo get_permalink();?>">
<img src="<?php echo $img_url?>" style="width: 150px;">
</a>
<div>Price: <?php echo $product->get_price_html(); ?></div>
<div><?php echo get_the_title();?></div>
</div>
<?php
}
wp_reset_postdata();
}else{
echo 'no post'; echo "<br>";
}
return ob_get_clean();
}
add_shortcode('get_specific_product_shortcode', 'get_specific_product_shortcode_function');
i have the title of my last 4 posts but i need the image post too. I'm terrible programmer `
include('../blog/wp-load.php'); // Blog path
// Get the last 4 posts
$recent_posts = wp_get_recent_posts(array(
'numberposts' => 4,
'category' => 0,
'orderby' => 'post_date',
'post_type' => 'post',
'post_status' => 'publish'
));
// Display them as list
echo '<ul>';
foreach($recent_posts as $post) {
echo '<li>', $post['post_title'], '</li>';
}
echo '</ul>'`
i'm trying to do something like this:
I think you're looking for get_the_post_thumbnail Here's the Codex.
For example:
get_the_post_thumbnail( $postID,'medium', array( 'class' => 'aligncenter' ));
You might try something like this for your final product (untested):
// Display them as list
$output = '<ul>';
foreach($recent_posts as $post) {
$link = get_permalink($post['ID']);
$image = get_the_post_thumbnail( $postID,'medium', array( 'class' => 'aligncenter' ));
$title = $post['post_title'];
$output .= '<li>
<a href="'.$link.'">'.
$image
.'<h2>'.$title.'</h2>
</a>
</li>';
}
$output .= '</ul>';
echo $output;
It's must be work!
<?php
$recent_posts = wp_get_recent_posts(array(
'numberposts' => 4,
'category' => 0,
'orderby' => 'post_date',
'post_type' => 'post',
'post_status' => 'publish',
));
foreach($recent_posts as $single_post){
$get_post_images = get_attached_media( 'image', $single_post['ID'] );
$get_post_images = array_shift( $get_post_images );
$first_image_url = $get_post_images->guid;
?>
<?php echo $single_post['post_title'] ?><br />
<img src="<?php echo $first_image_url; ?>" /><br />
<?php
}
?>
If you have't the post thumbnail, but have images inside post, then you need this solution which use inside the loop:
$get_post_images = get_attached_media( 'image', $post->ID );
$get_post_images = array_shift( $get_post_images );
//Get url for image
$first_image_url = $get_post_images->guid;
// Show the image
echo '<img src="'. $first_image_url .'" />';
I got it!
<ul>
<?php
include('esenergy/wp-load.php'); // Blog path
function recentPosts() {
$rPosts = new WP_Query();
$rPosts->query('showposts=3');
while ($rPosts->have_posts()) : $rPosts->the_post(); ?>
<li>
<?php the_post_thumbnail('recent-thumbnails'); ?>
<h2><?php the_title();?></h2>
</li>
<?php endwhile;
wp_reset_query();
}
?>
</ul>
<?php echo recentPosts(); ?>
I want show featured image in my slider. so what i've done in my function.php is like below:
<?php
function revconcept_get_images($post_id) {
global $post;
$thumbnail_ID = get_post_thumbnail_id();
$images = get_children( array('post_parent' => $post_id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
if ($images) :
foreach ($images as $attachment_id => $image) :
$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); //alt
if ($img_alt == '') : $img_alt = $image->post_title; endif;
$big_array = image_downsize( $image->ID, 'large' );
$img_url = $big_array[0];
echo '<li>';
echo '<img src="';
echo $img_url;
echo '" alt="';
echo $img_alt;
echo '" />';
echo '</li><!--end slide-->';
endforeach; endif; }
?>
<div class="flexslider"> <!-- function called in index.php -->
<ul class="slides">
<?php revconcept_get_images("$post->ID"); ?>
</ul>
</div><!--end flexslider-->
Now i have two problem. no.1 My featured image is not showing in the slider. It's showing a broken link. but it can echo the post_id. no.2 I want show only 3/4 images from the latest post of cat=5. can anyone help me to do this ? note that i am using flexslider for my slider.
Ok, this is what I've tested, you may want to refine the query a bit, but for me it worked. In functions.php put
function revconcept_get_images($post_id) {
$images = get_posts( array(
'post_type' => 'attachment',
'hide_empty' => true,
'order' => 'ASC',
'orderby' => 'menu_order ID'
));
foreach ($images as $image) {
$image_url = $image->guid;
$img_alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); //alt
echo '<li><img src="'.$image_url.'" alt="'.$img_alt.'" /></li>';
}
}
And in index.php put (where you want)
<div class="flexslider"> <!-- function called in index.php -->
<ul class="slides">
<?php revconcept_get_images($post->ID); ?>
</ul>
</div><!--end flexslider-->
If you want to show all featured images from posts you have just put 'posts_per_page' => -1, in the get_posts() array.
I have given the a url path for image in wordpress using maya theme of woocommerce and the image is not showing the image path looks like
<img title="Adidas-H111-2" alt="Adidas-H111-2" class="attachment-shop_thumbnail" src="http://localhost/alphatest/wp-content/uploads/http://localhost/webservice/ap/upload_images/Adidas/Hard/H111/Adidas-H111-2.jpg" style="opacity: 1;">
how can I remove the part
http://localhost/alphatest/wp-content/uploads/
I am using maya theme and woocommerce plugin in wordpress. the full code is like
<?php
/**
* Single Product Thumbnails
*/
global $post, $woocommerce;
?>
<div class="thumbnails">
<?php
$thumb_id = get_post_thumbnail_id();
$small_thumbnail_size = apply_filters('single_product_small_thumbnail_size', 'shop_thumbnail');
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post__not_in' => array($thumb_id),
'post_mime_type'=> 'image',
'orderby' => 'menu_order',
'order' => 'ASC'
);
$attachments = get_posts($args);
if ($attachments) :
$loop = 0;
$columns = apply_filters('woocommerce_product_thumbnails_columns', 3);
foreach ( $attachments as $attachment ) :
if (get_post_meta($attachment->ID, '_woocommerce_exclude_image', true)==1) continue;
$loop++;
$_post = & get_post( $attachment->ID );
$url = wp_get_attachment_url($_post->ID);
$post_title = esc_attr($_post->post_title);
$image = wp_get_attachment_image($attachment->ID, $small_thumbnail_size);
echo '<a href="'.$url.'" title="'.$post_title.'" rel="thumbnails" class="zoom ';
if ($loop==1 || ($loop-1)%$columns==0) echo 'first';
if ($loop%$columns==0) echo 'last';
echo '">'.$image.'</a>';
endforeach;
endif;
?>
</div>
Simply add Double Slash (//)Instead of the Domain name. Example:
http://www.google.com/wp-content/uploads/2013/10/image.png
will be as:
//wp-content/uploads/2013/10/image.png
I would like to display automatically a post attachment (PDF) depending on the language of my blog (french and english).
When the post is displaying in french version, I would like display the french PDF, and when the post is displaying in english, the english one.
I use the qtranslate pluggin and I though to use the caption of the attachment ("fr" or "en") to create a sort of conditional tag.
I tried the code below but it does'nt work. Do you have any idea to help me?
Many thanks in advance,
Dem.
<!-- PDF EN -->
<?php if(qtrans_getLanguage()=='en'): ?>
<?php
if ( $attachments = get_children( array(
'post_type' => 'attachment',
'post_mime_type' => array('application/doc','application/pdf','application/msword'),
'numberposts' => 1,
'post_status' => null,
'post_parent' => $post->ID,
))) ;
foreach ($attachments as $attachment) {
if ($attachment->post_excerpt == 'en') {
echo '<img src="' .get_bloginfo('template_directory') . '/images/pdf.png" alt="Pdf" class="pdf" />';
echo '';
}
}
?>
<?php endif; ?>
<!-- PDF FR -->
<?php if(qtrans_getLanguage()=='fr'): ?>
<?php
if ( $attachments = get_children( array(
'post_type' => 'attachment',
'post_mime_type' => array('application/doc','application/pdf','application/msword'),
'numberposts' => 1,
'post_status' => null,
'post_parent' => $post->ID,
))) ;
foreach ($attachments as $attachment) {
if ($attachment->post_excerpt == 'fr') {
echo '<img src="' .get_bloginfo('template_directory') . '/images/pdf.png" alt="Pdf" class="pdf" />';
echo '';
}
}
?>
<?php endif; ?>
I created a simple fix that allows you to select the language for multimedia files using Wordpress qTranslate plugin
https://github.com/rafaelcalleja/qTranslateMultimediaLanguage