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 ?>" />
Related
I want to use tag in WordPress instead of tag, for example:
How can I convert this:
<img src="http://example.com/pic.jpg" alt="">
to this:
<picture>
<source type="image/avif" srcset="http://example.com/pic.avif">
<source type="image/webp" srcset="http://example.com/pic.webp">
<img src="http://example.com/pic.jpg" alt="">
</picture>
(pic.avif, pic.webp exits, not how to generate these pics)
what should I do?
I tried the code below, but it doesn't work.
function wp_image_add_picture_tag( $html, $attachment_id, $size, $icon, $attr ){
$srcset = wp_get_attachment_image_srcset( $attachment_id, $size );
$html = '<picture><source type="image/avif" srcset="http://example.com/'.$srcset.'#avif"><source type="image/webp" srcset="http://example.com/'.$srcset.'#webp">'.$html.'</picture>';
return $html;
}
add_filter( 'wp_get_attachment_image', 'wp_image_add_picture_tag', 10, 5 );
I'm new to WordPress so a detailed explanation would be appreciated.
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.
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
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');
}
?>
I want to resize image with css , But I couldnt.How can we do it?
<img class="img" style="width:200px;height:200px" src="<?php echo $list[$i]->image; ?>" alt="<?php echo $list[$i]->title ?>" title="<?php echo $list[$i]->title ?>" />
So I want to do width 200 and height 200 px , not image size.
Thanks.
You can use it as a background and use the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/upn7jwfs/
If you just want the image to be at max 200px width or high, you could do something like this:
<img class="img" style="max-width:200px;max-height:200px" src="<?php echo $list[$i]->image; ?>" alt="<?php echo $list[$i]->title ?>" title="<?php echo $list[$i]->title ?>" />
I changed style="width:200px;height:200px" to style="max-width:200px;max-height:200px"
If the image is not square the largest dimension will go to 200px and the other will scale to a smaller size.
Let me know if this doesn't make sense.