I have tried the following script in my joomla site to check if a file exists and if it does show a mouseover image.. if not show a different mouse over image. The initial image shows but the image fails to load on mouse over or mouse off. I have used the same image for this example..
<?php
$image_on = 'sr_act_i_2.png';
$image_off = 'sr_act_i_1.png';
$actionsloaded = 'location of file I will be checking';
if(file_exists($actionsloaded))
echo '<img src="/administrator/components/com_srshare/images2/'.$image_on.'" onmouseover="this.src=\''.$image_off.'\';" onmouseout="this.src=\''.$image_on.'\';"/>';
else
echo '<img src="/administrator/components/com_srshare/images2/'.$image_on.'" onmouseover="this.src=\''.$image_off.'\';" onmouseout="this.src=\''.$image_on.'\';"/>';
?>
Any ideas what is wrong with my mouse over code?
I forgot to add the path through the whole code:
echo '<img src="/administrator/components/com_srshare/images2/'.$image_on.'" onmouseover="this.src=\''.$image_off.'\';" onmouseout="this.src=\''.$image_on.'\';"/>';
should have been:
echo '<img src="/administrator/components/com_srshare/images2/'.$image_on.'" onmouseover="this.src=\'/administrator/components/com_srshare/images2/'.$image_off.'\';" onmouseout="this.src=\'/administrator/components/com_srshare/images2/'.$image_on.'\';"/>';
Sometimes the obvious just can't be seen.
Related
First posting here. I know inline php is not preferred but I haven't converted all my scripts to echo json_encoded arrays to work in javascript on the client side...so for now, I have inline php.
I do not know the extension of the user uploaded media because it could be a jpg,mp4,etc and upon upload it goes into a media folder with the user id as an identifier.
When my user first loads the div (and html page), the php script cycles through an array and does a fetch_assoc from sql query to the database each time; It returns the (media_id #) and prints out an li with the respective media displayed next to some other values from the query.
I only know the (media_id) and the file path name without the extension. When the page first loads, everything works great and the file_exists function returns correctly.
THE PROBLEM
When I AJAX the div and do the query again, because the user added a row to the database, the new list prints out with all info, BUT the file_exists function doesn't recognize the exact same paths as before and I don't have an img or video on the page.
I copy/pasted the exact same code from the original div and put it in a file for ajax to re-query and print the new li's.
All variables are the same and when I hard code a test filepath, it prints fine. Maybe there's a caching issue?
THE CODE
<?php
$result=$conn->query($select);
$row=$result->fetch_assoc();
?>
<li>
<?php
if ($row['count']>0) {
echo "<div class='media-container'>";
$pathname = "uploads/".$row["id"]."media1";
$testjpg=$pathname.".jpg";
$testjpeg=$pathname.".jpeg";
$testpng=$pathname.".png";
$testmp4=$pathname.".mp4";
if (file_exists($testjpg)==TRUE || file_exists($testpng)==TRUE || file_exists($testjpeg)==TRUE) {
echo '<img src="'.$pathname.'">';
}if(file_exists($testmp4)==TRUE) {
echo "<video></video>";
}
echo "</div>";
}?>
</li>
I could use some advice on how to fix this and how to print appropriate media tags on unknown media types.
THE OUTPUT
<div class='media-container'>
</div>
DEBUGGING ATTEMPTS
echoing the exact file path of a known image in an <img> tag works fine. putting echo'test'; inside the file_exists case does nothing.
--
Solution (Kind of)
So I've used html's onerror before and I found a workaround, though I'd still like to know why I was getting an error. PSA this uses JQuery but javascript works too:
My Solution
<script>
function img2video(el, src) {
$( el ).replaceWith( '<video class="videoClass"><source src="'+src+'" type="video/mp4"></video>' );
}
</script>
<body>
<img style="width:100%" onerror="img2video(this,'<?php echo$pathname;?>')" src="<?php echo$pathname;?>">
</body>
Alright, so here's the final answer I made to best fit the problem using glob:
Javascript:
function img2video(el,src,place) {
if (place=='type') {
$( el ).replaceWith( '<video controls controlsList="nodownload" disablePictureInPicture style="width:100%;object-fit:contain;" preload="auto"><source src="'+src+'" type="video/mp4"></video>');
}
}
PHP:
<?php for ( $i=1; $i <= $limit; $i++) {
$path ="[DIRECTORY]/".$row["id"]."media".$i;
$path = (!empty(glob($path . '*.{jpg,png,jpeg,avi,mp4}', GLOB_BRACE)[0])) ? glob($path . '*.{jpg,png,jpeg,avi,mp4}', GLOB_BRACE)[0] : false;?>
<div>
<img onerror="img2video(this,'<?php echo$path;?>','type',<?php echo$row["id"];?>,<?php echo$i;?>)" src="<?php echo$path;?>">
</div>
<?php } ?>
I don't know how to mark as duplicate, if someone could help with that. My answer uses Glob_Brace from #Akif Hussain 's response on This Question.
I am using this code to display an image.
echo "<img src=\"".$row["image"]."\">";
Printing $row["image"] gives:
https://www.lesechos.fr/medias/2017/04/19/2080617_hopital-les-candidats-a-la-presidentielle-divergent-sur-les-effectifs-web-0211985257133_300x160.jpg
Which is a valid source when I type it in my browser.
However, no image is displayed... What is wrong?
if you want to show an image, you need to use a img tag. An URL won't be enough. What about :
<?php
echo'<img src=" '.$row["image"].' " alt="my image" />';
/* after edit, I saw that you are using code below */
// echo "<img src=\"".$row["image"]."\">";
// seems fine though
// what about this ->
$path_to_img = $row['image'];
echo "<img src=\"$path_to_img\" alt=\"my image\" />"; /* just added `alt` and last slash to be fully compliant */
?>
what does source inspector show as html output ?
I just tested and hotlinking is fine, imgshows up (kind of an hospital hallway).
you have to print the image url in html src attribute:
echo "<img src='images/." $row['image']. "'/>";
I don't know if I'm doing it right, but I have a bunch of images I'm retrieving from the page and since I don't wan a page to have too many images of big sizes, I have displayed them with a much smaller size but I have attached each of them to a link so that when a user click on a picture it opens that image with its original size. The problem is that those images are really big and my client wants the ability to zoom in and out which I don't know how to do. The client thought about resizing the size of the window (in the browser) but sadly it resizes all other windows (for the application) and this is not ok because he needs to see the image and compare it with some information on the app. SO Below is the code of the images displayed and after the user have clicked on the image.
small images
$count = 0;
echo " <div class=\"row\">";
while($row = $result->fetch_assoc()) {
$ext = $row['Extension'];
$ImageID=$row['ImageID'];
if(($count%3) ==0){
echo "</div>";
echo " <div class=\"row\">";
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}else{
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}
}
echo "</div>" ;
Image after link is clicked
<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";
$result = mysqli_query($conn,$query);
$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';
?>
I don't know what to do at this point, how can I provide that zoom in/out functionality?
First things first: Generally don't add base64 encoded images directly into your html. Link to them, and host them on your server. It is quite an expensive way of making images appear, both for the server, database, and for the client. It also makes it impossible for the client to cache the images, and it means that each repeated page visit causes the entire data to be sent.
Make two folders on your webservers:
images/
thumbnails/
Put your small images in "thumbnails" and large images in "images"
And if you need to, store the image-names in your database, so you can do something more like this:
echo '<img src="images/'+$imageName+'">'
If you want to, you can do an on-demand resizing of your images, using gd-lib.
The basic idea being, in pseudocode:
//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName
This approach is also applicable if you want to use client-side javascript to show larger versions on the same page. See my page finalkey.net for an example http://finalkey.net/gallery
So i have a set of 20 images in a set, all labeled as dog. So dog01, dog02, dog03, etc. I'm using this code to pull those out of a directory and display them 5 to a row, in 4 rows like so.
dog01 dog02 dog03 dog04 dog05
dog06 dog07 dog08 dog09 dog10 (etc.)
I"m using this code to load the images from a directory, and it is loading them in order.
<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
if(($i+1)%5 == 0) echo '<br />';
}
?>
However, I want to see if there is a way to get it so that if one of the dogs is missing from the directory, it instead loads a filler in its place, and continues to load the others in sequence. So if dog03 is missing, it would look like this:
dog01 dog02 filler dog04 dog05
It would show filler, and continue on the sequence. I'm genuinely not sure if I can achieve this in php. If someone knows what approach I need to take here, that would be appreciated. I should note that the filler image is in another directory called "fillers/".
Thanks in advance.
You have two ways of approaching this I think. The first is by not worrying about it in php, and loading the filler image as background image. Normally the image will be loaded over the filler image, but if the image does not load, the filler image stays visible.
The other way is by testing if the file exists.
As background image:
.deck {
//whatever you had here
background-image: url( "/filler/filler.png" );
}
You might need to make container divs around your images, and put the css on that instead. Please note that if no explicit width or height is set, this will not work, as the background-image does not assign any width or height to the element it is attached to.
By testing beforehand:
<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
if( file_exists( $image ) ) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
} else {
echo '<img class="deck filler" src="/filler/filler.png" alt="This image does not exist." title="This image does not exist.">';
}
if(($i+1)%5 == 0) echo '<br />';
}
?>
This method might not work if you are running php in safe mode.
I have a php variable which contain the whole source code of image.What I want is to echo the tag with its attributes src,height & width and send the source code of image through mail (i.e ).
$imagename = abc.jpg;
$concatpath = SITE_URL."/uploads/affiliatesAdv/".$imagename;
$imagesrc = '<img src="'.$concatpath.'" height="200px" width="200px">';
Now when I echo $imagesrc it displays the image. How can I show the source code instead?
Try this,
echo "<pre>";
echo $imagesrc;
echo "</pre>";
You need to use html encoding.
Some thing like this
<img src="abc.jpg"/>
to
<img src="abc.jpg"/>
See the reference.
You can try this site to do it online..