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
Related
I'd like to pass the current img src to a function I'm working on (to get more data from a database)
Is there a simple way to grab the src from within the img tag?
I'd like to do this:
<img src="http://example.com/images/1.jpg" alt="amazing image" data="<?php echo( get_extra_data($img_src) ); ?>" />
Rather than this:
<img src="http://example.com/images/1.jpg" alt="amazing image" data="<?php echo( get_extra_data("http://example.com/images/1.jpg") ); ?>" />
I'd like to dynamically get the src from the current img rather than having to have the url twice if that makes sense.
In other words, could the function get_extra_data() reference the img element it was called from?
This is because I'd like to just paste data="<?php echo( get_extra_data($img_src) ); ?>" into the exsisting image elements I need it on.
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 am creating a webpage that has a photo gallery, which is a lightbox, that uses a lot of images - around 80-150 per page. The number of the images changes week by week, and I would like to have the website automatically populate the image gallery from the images in a subfolder, whilst including the code attached to the image to make it display correctly.
For example, this is what each images code will look like. And please note that i'll need the image located twice on each line.
<a data-fancybox="gallery" href="images/001.jpg"><img alt="" class="lazy" data-src="images/001.jpg" /></a>
I am attempting to use the below script, but it doesn't appear to be working.
<?php
$dirname = "../images/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
echo '<a data-fancybox="gallery" href="'.$image.'"><img alt=""
class="lazy" data-src="'.$image.'" /></a>';
}
?>
In this case for each line I have included the .$image. in two locations, inbetween the echo's but it doesn't seem to be working.
If you have any advice for me it will be greatly appreciated.
Your <img /> tag doesn't have the path set in the src attribute which is needed to render the image by the browser. It only has data-src attribute filled.
Should be:
<?php
$dirname = "../images/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
echo '<a data-fancybox="gallery" href="'.$image.'"><img alt=""
class="lazy" src="'.$image.'" data-src="' . $image . '" /></a>';
}
?>
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="" />';
}
I have a built basically a character editor on my site, it takes various images and puts them on top of each other to form an avatar.
This is HTML code:
<div id="AvatarImgFrame">
<img src="http://example.com/public/images/char_elements/base_dark.png"/>
<img src="http://example.com/public/images/char_elements/eyes/blue.png"/>
<img src="http://example.com/public/images/char_elements/eyes/blinking.gif"/>
<img src="http://example.com/public/images/char_elements/hair/brown.png"/>
<img src="http://example.com/public/images/char_elements/mouth/happy.png"/>
<img src="http://example.com/public/images/char_elements/pants/patrick.png"/>
<img src="http://example.com/public/images/char_elements/shoes/black.png"/>
<img src="http://example.com/public/images/char_elements/torso/shirt.png"/>
</div>
How could I compile basically this div into one .gif / png using PHP-GD?
Here is an example on how to merge two images: you can use imagecopy (http://php.net/manual/en/function.imagecopy.php)
$base = imagecreatefrompng('base.png');
$eyes = imagecreatefromgif('eyes.gif');
imagecopy($base, $eyes, $base_x, $base_y, $eyes_x, $eyes_y, $width, $height);
header('Content-Type: image/png');
imagepng($base);
imagedestroy($eyes);
imagedestroy($base);