I used this plugin as a starting point to create a custom meta box that allows users to select a featured video. The meta box is working great, and now I am trying to figure out how to display the video in the post. The following code displays the video:
<video controls="controls" preload="auto" width="100%" height="100%">
<source src="<?php
// Retrieves the stored value from the database
$meta_value = get_post_meta( get_the_ID(), 'meta-image', true );
// Checks and displays the retrieved value
if( !empty( $meta_value ) ) {
echo $meta_value;
} ?>" type="video/mp4" />
</video>
That's great. But I want to write a statement that says "if the post has a featured video, display it, if not display the featured thumbnail." Anyone know how to do this?
EDIT: I am getting closer. The following code almost works, but for the posts that have featured images (not videos), it displays an empty video player instead of the featured image. How can I modify the below code so that the featured images work?
<?php
$slam_featured_video = get_post_meta( get_the_ID(), 'meta-image', true );
if (isset($meta_value)) {
echo '<video controls="controls" preload="auto" width="100%" height="100%">
<source src="'. $slam_featured_video. '" type="video/mp4" />
</video>';
} elseif (empty($meta_value)) {
echo the_post_thumbnail('full');
}
?>
You almost got it!
if there is no featured video, you will get back an empty string (""). isset("") = true, so you'll still end up in the featured video block.
Just an empty string by itself will evaluate to false, so just do:
if ($meta_value) {
echo '<video controls="controls" preload="auto" width="100%" height="100%">
<source src="'. $slam_featured_video. '" type="video/mp4" />
</video>';
} elseif (empty($meta_value)) {
echo the_post_thumbnail('full');
}
After some more research and experimentation, I was able to find a solution. The following code works for me. Thanks to #manishie for setting me on the right track.
<?php
$slam_featured_video = get_post_meta( get_the_ID(), 'meta-image', true );
if (!empty($slam_featured_video)) {
echo '<video controls="controls" preload="auto" width="100%" height="100%">
<source src="'. $slam_featured_video. '" type="video/mp4" />
</video>';
} elseif (empty($slam_featured_video)) {
echo the_post_thumbnail('full');
}
?>
Related
How can i add size parameter to my wordpress image?
The code i use for thumbnail is:
if (has_post_thumbnail())
{
the_post_thumbnail('full');
}
I simply want to change url of image from
<img src="website.com/wp-content/uploads/img.jpg">
to
<img src="website.com/wp-content/uploads/img.jpg?size=10">
Use get_the_post_thumbnail_url() to get only URL of post picture and create an <img /> tag with this URL.
if (has_post_thumbnail())
{
echo '<img src="'.get_the_post_thumbnail_url(null, 'full').'?size=10" alt="" />';
}
After retrieve image path from database I want to pass it to <img> tag to show up,
I read this solution, but I do not want to echo it, I want to assign it as src for image tag
I tried this:
$image = mysqli_fetch_array($user_images);
$img1 = $image['file_path'];
$imageData = base64_encode(file_get_contents($img1));
$src = 'data: '.mime_content_type($img1).';base64,'.$imageData;
How can I assign $src to image, I tried this but no luck :(
<img id="img1" width="150" height="150" src="' . $src . '"/>
Thanks in advance.
Inside the HTML you still need to echo the value of $src. This should work:
<img id="img1" width="150" height="150" src="<?php echo $src; ?>"/>
Try with PHP tags like below:-
<img id="img1" width="150" height="150" src="<?php echo $src;?>"/>
Reasonable solution I can think of is
<img id="img1" width="150" height="150" src="<?php echo $src; ?>"/>
but the code where you get the image source has to be above the image tag, so you have the $src.
You are using PHP language and in Php, you can't pass variable directly in the Tag you have to set a variable in the PHP environment.
To create Php environment you can right <?php ?> or you can use to echo variable <?= ?> between these PHP tags you can pas your variables to echo and assign or anything else what you want to do.
<img id="img1" width="150" height="150" src="<?= $src ?>"/>
I have a custom field added to the Wordpress media uploader, that stores a Vimeo ID. I need to pull this custom field data (if it has been input) into the markup of the default <img> tag in Wordpress - I'd like it to be added as a data- attribute.
Having searched around online I have no leads of what to try here, does anybody have any experience with this?
If the above data- attribute is present, I'd also like to automatically add the class 'video-thumb' to that image.
I am able to call the cusotm field as follows, but have no idea how to incorporate this into the <img> tag:
$video_url = get_post_meta($id, 'video-url', true);
Default Wordpress <img> code
<img class="aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" />
Desired Outcome
<img class="video-thumb aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" data-vimeo-id="69171201" />
You can try this Within your post loop
$key = 'your custom meta key'
echo get_post_meta($post->ID, $key, true);
Full implementation
<?php
$query = new WP_Query('showposts=3');
if ($query->have_posts()):
while ($query->have_posts()):
$query->the_post();
$vimeo = get_post_meta($post->ID, 'your_key', true);
the_title();
?>
<img class="video-thumb aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" data-vimeo-id="<?php echo $vimeo; ?>" />
<?php
endwhile;
endif;
wp_reset_query();
?>
Please read for more information from here
I'm trying to change the image width and height attribute of a single post thumbnails. Here's the HTML tag output generate by WordPress.
<img width="1024" height="600" src="http://www.sample.com/wp-content/uploads/2015/02/image.jpg" alt="My site" width="100%" height="" />
I want this width="1024" height="600" to become like this width="100%" height="" so the image is already responsive in all different window screen without doing CSS or JQUERY codes.
My codes below is not working correctly. The output is another width="100%" height="" /> after the src attribute instead of replacing the width="1024" height="600" before the src attribute.
The image tag output I expected is to be like this
<img width="100%" src="http://www.sample.com/wp-content/uploads/2015/02/image.jpg" alt="My site" />
PHP CODE :
$attr = array(
'class' => '',
'alt' => 'My site'
'width' => '100%',
'height' => ''
);
get_the_post_thumbnail( $post->ID, 'full', $attr )
I have another way to solve this. The codes below is my second option but I also want to know how this image / height attribute change dynamically.
$img_url= wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
<img width="100%" src="<?php echo $img_url[0]; ?>" alt="My site" />
Any help is very appreciated.
You can find thumbnail url & give css to that
<?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>
<img src="<?php echo $url; ?>" class="img_thumb"/>
Create custom image sizes when new images are uploaded:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'thumb-400', 400, 350 ); //cropped 400 pixels wide, max 350px height
add_image_size( 'center', 550, 367, array( 'center', 'center' ) ); //center crop
add_image_size( 'default-thumb', 600 ); // 600 pixels wide (and unlimited height)
}
In your template:
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumb-400');
$t = $thumb[0];
html
<img class="thumbnail" src="<?php echo $t ?>" />
I'm new to PHP. Everything else works on my site okay but I seem to have an issue with this particular piece of code. The $efn is my file name, and I need to retrieve it from a MySQL database but this code doesn't seem to work. It works in a normal video container but not when using the if statement.
Any ideas how to fix this?
<?php
$video_container = substr($efn, -3);
if ($video_container == 'mp4') {
echo '<video preload="auto" width="640" height="264" poster="../images/<?php echo $thumb ?>" controls="controls" autoPlay="false">
<source src="<?php echo $efn ?>" type="video/mp4">
</video>';
}
else {
echo '<video height="620" width="480" controls>
<source src="<?php echo $efn ?>" type ="video/avi" />
</video>';
}
?>
You have syntax problem when printing the string. Replace the <?php echo $fn ?> section by ' . $efn . '
Like this:
$video_container = substr($efn, -3);
if ($video_container == 'mp4') {
echo '<video preload="auto" width="640" height="264" poster="../images/<?php echo $thumb ?>" controls="controls" autoPlay="false">
<source src="' . urlencode($efn) . '" type="video/mp4">
</video>';
}
else {
echo '<video height="620" width="480" controls>
<source src="' . urlencode($efn) . '" type ="video/avi" />
</video>';
}