I am creating a social website.I want to show all the details of registered users from the database in a list which includes their image and name.I want to display an image if the user has not provided the image.If the image has been provided by the user,sometimes it may get lost from database.At that time also i need to display a particular image.I have found that by using javascript method onerror(),we can check whether the image is loaded or not.I am unaware of its implementation.
My code sample is like this:
while($row_data = mysql_fetch_array($result_personal))
{
$row_photo = $row_data['acnt_profile_picture'];
<div class="feedstory" id="feedstory">
<img src="<?php if($row_photo!=NULL){echo $row_photo;}
else{?>images/no_image.png<?php }?>" id="image1" width="34" height="34" align="left" class="feedthumb" alt="photo"
onerror="imageError()"/>
</div>
}
My javscript method is like this:
function imageError()
{
document.getElementById("image1").src="images/no_image.png";
}
I need to display no_image.png if $row_photo is null or $row_photo is not loaded
You've said (in the comments)
if the variable is null,"no_image.png" is displaying.Bit if the image is not loaded,"no_image.png" is not been displayed
So it's not a path issue, there's something wrong with the imageError call.
The call would be right if you had an img element with the id "image1". But your img element doesn't have that id, and you haven't shown a different one that does.
If your goal is to show no_image.png in the img element that had the error, then:
Change your onerror attribute from:
onerror="imageError()"
to
onerror="imageError(this)"
And then change imageError to:
function imageError(img)
{
img.src="images/no_image.png";
}
Make sure you enclose your php code in php tags.
jQuery solution:
<?php
while($row_data = mysql_fetch_array($result_personal)) {
$row_photo = $row_data['acnt_profile_picture'];
?>
<div class="feedstory" id="feedstory">
<img src="<?php echo $row_photo ?>" width="34" height="34" align="left" class="feedthumb" alt="photo" />
</div>
<?php } ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('img').error(function() {
$(this).attr({
src: '/images/missing-image.jpg',
alt: 'Sorry! This image is not available!',
style:'border: 1px solid #f00;'
});
});
});
</script>
Depending on whether or not your database structure is the same as mine, you can use this function, I put it inside my User class.
public static function ProfileImage($user_ID, $image_ID, $size)
{
global $http_r;
$image_URL;
if($image_ID != null)
$image_URL = $http_r ."/userfiles/images/". $user_ID ."/thumbnails/". $image_ID .".jpeg";
else
$image_URL = $http_r ."/template/images/noprofilepic.jpg";
?>
<img src="<?php echo $image_URL; ?>" class="profile-<?php echo $size; ?>">
<?php
}
Which is then used like the following: User::ProfileImage($user_ID, $image_ID, "small");
But, I have a seperate table for my images and I do not store image paths directly.
Related
I have a custom post type and the image path is a field. However, when I do something as such the below code it doesn't display. The path is in the database, I confirmed:
<?php $imgurl = $fields['wpcf-portrait'][0]; ?>
<img src="<?php $imgurl; ?>">
I've tried a few different things but when I inspect element is just says "null" where the src url is supposed to be.
You need to "echo" the path.
The correct code for this would be:
<?php $imgurl = $fields['wpcf-portrait'][0]; ?>
<img src="<?php echo $imgurl; ?>">
I have a div whose contents are retrieved asynch by $.post().
The contents retrieved are multiple images each with seperate ids.
I want each of the images to fadeToggle on hover()
So i calculate image id in my php on the spot, generate the image and add a jquery handler
and echo back the results:
<script type="text/javascript">
$(document).ready(function ()
{
$("<?php echo '#'.$postid.'image'; ?>").hover(function()
{
$(this).fadeToggle("fast");
},
function()
{
$(this).fadeToggle("fast");
});
});
HTML:
<div id="<?php echo $postid; ?>" class="post_box" >
<img src="<?php echo '/way2tweek'.$path.$name; ?>" width="500" class="img_get"
draggable="false" alt="<?php echo $postid; ?>" id="<?php echo $postid.'image'; ?>">
<div class="imageproperty" id="<?php echo $postid.'props'?>">
</div>
</div>
on the page images are received. scripts are received. the calculated ids match but the images are not fadeToggled. No Console debug message too. Please help.
You have both the hash and the dot in your PHP-generated selector:
<?php echo '#'.$postid.'.image'; ?>
produces a string like
#mypostid.image
I don't know your HTML structure, but you may want the selector to be #mypostid .image (note the space), so:
<?php echo '#'.$postid.' .image'; ?>
I am trying to display image from a blob field of a MySQL table. Looks like I have some sort of error in the following line. As soon as I put "header("Content-type: image/jpeg")" things get messed up and instead of displaying webpage, all source code of the page is displayed.
Please let me know how to correct.
<div class="image" align="left">
<a href="<?php header("Content-type: image/jpeg"); echo $rec['image']; ?>">
<img src="<?php echo $rec['image']; ?>" width="150" border="0"/>
</a>
</div><!-- image -->
You normally don't put the actual image contents in the src= attribute of the image tag. Instead, you point to the URL of an image file.
(There are ways to include the image source directly in the HTML, but it doesn't work consistantly with all browsers, and you still won't have your <a> link working properly.
Instead, the best way to do this is to create a separate PHP file to serve the image.
Your HTML:
<div class="image" align="left">
<img src="myimage.php?key=<?php echo($key) ?>" width="150" border="0"/>
</div><!-- image -->
myimage.php:
<?php
header("Content-type: image/jpeg");
$key = $_GET['key'];
// todo: load image for $key from database
echo $rec['image'];
You're trying to put the image data inline inside the content. The only feasible way to do this is via a Data URI data URI. Something like:
<img src="data:image/jpeg;base64,<?= base64_encode($rec['image']) ?>" width="150" border="0" />
However, what you probably want to do is put it into a separate script. So your HTML would be:
<img src="showimage.php?id=XXX" width="150" border="0" />
And your showimage.php script would be:
<?php
// Get $rec from database based on the $_GET['id']
header('Content-Type: image/jpeg');
echo $rec['image'];
?>
I've done something like that retrieving blob from my database in another way that you may find useful, here is the code example.. see if it suits your needs and if you needed anymore help let me know.
while ($row = mysql_fetch_array($hc_query2)) {
$title = $row['title'];
$text = $row['text'];
$image = $row ['image'];
$output ='<div class="HCInstance"><img src="data:image/jpeg;base64,' . base64_encode($image) . '" alt="High Council" width="100px" height="100px"/>
<div class="HCHeader"><h2>'.$title.'</h2></div><br/><div class="HCDetails"><p>'.$text.'</p></div></div>';
echo $output;
}
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.
I have a PHP echo function inside of a HTML link, but it isn't working. I want to have an image location, defined in img src, be in part of the clickable link of the image. The page will have multiple images doing the same thing, so I am trying to use PHP to automate this.
<a href="http://statuspics.likeoverload.com/<?php echo $image; ?>">
<img src="<?php $image=troll/GrannyTroll.jpg?>" width="100" height="94" />
</a>
Turn
<?php $image=troll/GrannyTroll.jpg?>
into
<?php echo "troll/GrannyTroll.jpg"; ?>
?
Or provide more details on what you are trying to achieve.
Also, you might consider urlencode-ing some of those URL parameters.
Edit:
So you might try setting the variable beforehand:
<?php $image = "troll/GrannyTroll.jpg"; ?>
<img src="<?php echo $picture; ?>" width="100" height="94" />
So now i understand what you are trying to do.
One error is that you didn't enclose $image=troll/GrannyTroll.jpg with quotes like this:
$image = 'troll/GrannyTroll.jpg';
The second error is that you do it in the wrong order, you have to define $image first, before you use it.
That's what I believe you want to do:
<?php
$image = "troll/GrannyTroll.jpg";
?>
<img src="<?php echo $image; ?>" width="100" height="94"/>