I'm using a <picture> tag to set a responsive image with WebP support.
I'm pulling a desktop image and mobile image URLs that have both .web and .jpg files.
for each media, I'm giving the .webp version and the .jpg version.
What I expect is that if the .webp version does not exist is that the website will take the .jpg file that exists.
any idea what is wrong here?
$image_desktop = get_field( 'desktop_image' ); // can be an .webp image or .jpg image
$image_mob = get_field( 'mobile_image' ); // can be an .webp image or .jpg image
<picture>
<source media="(min-width: 480px)"
srcset="<?php echo esc_url( $image_desktop['url'] . '.webp' ); ?>"
type="image/webp">
<source srcset="<?php echo esc_url( $image_mob['url'] . '.webp' ); ?>"
type="image/webp">
<source media="(min-width: 480px)" srcset="<?php echo esc_url( $image_desktop['url'] ); ?>"
type="image/jpeg">
<source srcset="<?php echo esc_url( $image_mob['url'] ); ?>" type="image/jpeg">
<img class="header-image"
src="<?php echo esc_url( $image_desktop['url'] ); ?>"
alt="<?php echo esc_attr( $image_desktop['url'] ); ?>">
</picture>
All URLs that you put in the srcset attributes have to be valid and have to exist.
Browsers that have support for WebP will try to load the URL from the <source type="image/webp"> and all other browsers will try to load the URL from <source type="image/jpeg">. If the URL selected by the browser does not exist it will not fall back to one of the other <source>s.
You should check the existence of the image files on the server side.
Related
I'm trying to display some files in HTML src="" attribute. But files I want to display not only image but also audio.
How to display multiple file format in src="#"
for example the file I want to display can be sometimes an image or an audio, I would like to display;
if it is image:
<img src="<?php echo wp_get_attachment_url( $attachment ); ?>" />
if it is audio:
<audio src="<?php echo wp_get_attachment_url( $attachment ); ?>"></audio>
You can check the filetype with the function https://www.php.net/manual/en/function.filetype.php
Check for the output of this function and if its "mp3" or any other auudio-format you can use the tag and otherwise you use the tag
HI guys i am trying to get the image/video filename from path
Here i have paths in my php variable like this from database
E:/xampp/htdocs/pes/new/movie.mp4
E:/xampp/htdocs/pes/new/flowers.jpg
And i am trying to get new/movie.mp4 or new/flowers.jpg from above paths and display it in img tag or video tag
<img src="new/flowers.jpg" alt="Trulli" width="500" height="333">
or
<video width="400" controls>
<source src="new/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Can anyone help me how to do that
Thanks in advance
Hope this will help you :
Set your base_url in your config.php
$config['base_url']='http://localhost/pes/'
and ur image src should be like this :
<img src="<?=site_url('new/'.$image); ?>" alt="Trulli" width="500" height="333">
Try with base_url(). Set your base_url in config.php for example www.xyz.com/ Update your code like this:
<img src="<?php echo base_url() ?>new/flowers.jpg" alt="Trulli" width="500" height="333">
And video frame:
<video width="400" controls>
<source src="<?php echo base_url() ?>new/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Hope this will help you!
If all paths are relative to FCPATH, FCPATH = 'E:/xampp/htdocs/pes', you can use:
<img src="<?php echo base_url(str_replace(FCPATH, '', 'E:/xampp/htdocs/pes/new/flowers.jpg')) ?>" alt="Trulli" width="500" height="333">
or
<video width="400" controls>
<source src="<?php echo base_url(str_replace(FCPATH, '', 'E:/xampp/htdocs/pes/new/movie.mp4')) ?>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
below code display the audio, audio tag works perfectly, it play the music in local server, but on live server audio not working, its not playing the music. it is appearing like disabled things in chrome and in mozilla it is not even showing the play button. i think problem is with source url.
<audio controls id = "myaudio">
<source src="<?php echo base_url(); ?>worship/assets/<?php echo $row->language_folder; ?>/<?php echo $row->album_folder; ?>/<?php echo $row->song_name; ?>" type="audio/mp3">
</audio>
Please advise me.
Hope this will help you :
Just change the Media Type OR MIME-type from audio/mp3 to audio/mpeg
<source type="audio/mpeg" src="<?php echo base_url(); ?>worship/assets/<?php echo $row->language_folder; ?>/<?php echo $row->album_folder; ?>/<?php echo $row->song_name; ?>" >
and use base_url like this (just suggestion) ;
<source type="audio/mpeg" src="<?php echo base_url('worship/assets/'.$row->language_folder.'/'.$row->album_folder.'/'.$row->song_name); ?>" >
For more :
https://www.w3schools.com/tags/tag_audio.asp
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 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');
}
?>