I have a large website with many hard coded pages. If there is a broken URL Firefox doesnt seem to care. But Google Chrome and IE seem to display a horrible placeholder box (as if there should be an image in its place).
What is the best solution to scan the page of broken images? and assigning display:none to the image to stop the placeholder showing up?
function imgError(image){
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
<img src="someimage.png" onerror="imgError(this);"/>
I found the above client side solution. But is there a way with PHP do it before the page is loaded? I am using concrete5
For cases like this use the 'alt' HTML tag. This tag is used to display a description of the img in case it is not found.
<img src="myPath.png" alt="Here was my broken image">
If images are on same server then try file_exists function to check if there's image. If not show something else.
Here's the code to help you:
if(file_exists("../img/logo.png")) {
echo '<img src="../img/logo.png" />';
} else {
//something else
}
Related
I've looked all over the place and cant seem to find how to do str_replace but search the whole document instead of just a string.
For example, by using string replace, I can check a string, look for certain text, and replace that text with something else.
I want to look in the whole page (The whole index.php page). Look for certain text, and replace that text with new text.
I can accomplish this with jquery, the only problem is that it is done after the page loads so its loading double the information. I need it done before the page loads. Or maybe there is another way to change the text with javascript before the page even loads. But figure PHP would be best for this. Any suggestions?
--UPDATE ONE--
I'm using the easyazon plugin to load in products from amazon. Here is the specific code that pull in the image from amazon into my index page.
<?php if($image_atts) { ?>
<div class="easyazon-block-image-container">
<?php printf('<a %s><img %s /></a>', easyazon_collapse_attributes($link_atts), easyazon_collapse_attributes($image_atts)); ?>
</div>
<?php } ?>
Under the $image_atts array, the code there is>
if(isset($item['images']) && is_array($item['images'])) {
$image_index = 3;
while($image_index >= 0) {
if(isset($item['images'][$image_index])) {
$image_atts = array(
'alt' => $item['title'] ? $item['title'] : '',
'class' => 'easyazon-block-information-image',
'height' => $item['images'][$image_index]['height'],
'src' => $item['images'][$image_index]['url'],
'width' => $item['images'][$image_index]['width'],
);
break;
}
$image_index--;
}
} else {
$image_atts = false;
}
When looking at the source of the index.php after its generated. The image tag looks something like this.
<div class="easyazon-block-image-container">
<img class="xxx" src="https://xxxx.amazon.com/xxxx/xxx/xxx/xxxxx120.jpg">
</div>
Here is where lies my issue. If you look at the src part of the image tag, it pulls a small image down from amazon at 120px width as shown by the end of the filename.
What I need is to pull down a larger width image from amazon by changing the 120 to a 300.
https://xxxx.amazon.com/xxxx/xxx/xxx/xxxxx300.jpg
Which in turn pulls down the image at 300px wide.
I tried doing this in jquery, to search for the string "120" and replace it with "300". This worked successfully but in turn becuase it happened after the browser loaded, it caused the browser the download 2 different images. One at 120px and one at 300px. So that is definitely a no go. For every image on the page it would download both versions of the image.
What i need to do is look for the string 120, in the easyazon-block-image-container, and then change it to 300, BEFORE it is sent to the browser. I hope this helped in giving a little more of the code.
I don't want to give to much code on the plugin for the developers privacy. But for my own defense, I looked all over the plugin and cant find anywhere where the plugin is telling itself to download the 120px version of the image. If that was the case I could have just changed it to 300 in the code. Any help would be appreciated. One of the last thing keeping me from going live with my site :(
A string can be as short or long as you want, str_replace()should work fine.
See: http://php.net/manual/en/function.str-replace.php
I have PHP code that generates HTML code which makes a grid of images. The images are taken from links that are generated for each new image, I also add 133x100 at the end of the image link to resize it on the page. My problem is that a seemingly random selection of images won't display, and I just get a broken image symbol. For example:
This is a link to an image that is generated on my page and is displayed.
This is a link to an image that will not be displayed.
I am only allowed to post 2 links, but removing the %20.%20/133x100 from the end of the last link will show what the picture should be.
Here is the part of the code for the image source:
function display_images(){
//This cycles through each image and displays it as HTML
while($row = $item->fetch()){
Echo "`<img src= '$link[Image_Link] . /133x100' />`"
}
}
It is then called here in a class which puts the images in a grid:
<ul class="rig columns-4">
<?php
display_images();
?>
</ul>
Seemingly about every 2/20 images won't work, and seeing all the links are in the same format, I don't understand why they won't work, and it just seems random.
EDIT: I have noticed that the links that work have 62fx62f at the end of them before the added %20.%20/133x100. If I add it to the raw link in the right place, it makes the image work. But using that generated link, the image still won't load on the page. So using a link with a working image will not work on the page. (This is the same with the raw link without %20.%20/133x100, that links to an image but also won't work on the website)
When visiting the links, the urls look like this:
http://www.example.com/image/randomcharacters%20.%20/133x100
The links work without the %20.%20 at the right dimensions, like so:
http://www.example.com/image/randomcharacters/133x100
This leads me to believe that it may work if you try using the following for the image source instead:
<img src= '$link[Image_Link]/133x100' />
The full code would look like this, for the while function:
while($row = $item->fetch()){
echo "<img src= '" . $link['Image_Link'] . "/133x100' />";
}
I am not aware of steamcommunity much but from the looks of it, i think you should try this.
Instead of putting
. /133x100
Use
/133fx100f
So your URLs would be
while($row = $item->fetch()){
echo "<img src= '" . $link['Image_Link'] . "/133fx100f' />";
}
Just did some trial and error and found out. No explanations for this though!!
I am trying to call images in this function, but they all come up as question marks. Could anyone tell me what I did wrong?
if(!$currentvotes) $currentvotes = 0;
echo '<div class="vote vote'.$id.'"><span>'.$currentvotes.'</span>';
if($user_ID && !$alreadyVoted) echo '<br /><a post="'.$id.'" user="'.$user_ID.'"><img src="/images/thumbsup.png" WIDTH=25 HEIGHT=25></a>';
if($user_ID && $alreadyVoted) echo '<br /><span class="voted"><img src="/images/thumbsup.png" WIDTH=25 HEIGHT=25></span>';
echo '</div>';
if(!$user_ID) echo '<div class="signup"><p><a style="color:#4ec1f3;" href="'.get_bloginfo('url').'/wp-login.php?action=register"><img src="/images/thumbsup.png" WIDTH=25 HEIGHT=25></p></div>';
}
I am trying to call images in this function
As in the comments:
You can't 'call' an image. You can call functions, methods,
procedures, code but images are data and can't be 'called'. – Patashu
[...] they all come up as question marks
Right click on those question marks: choose "open image in new window". You should see a new page with a 404 error. Look at the link of that page: that's the path where your image is supposed to be (if you're getting a 404 error it simply means they are not there). Create the folder images and upload the file thumbsup.png. Now reload the page.
I suppose the path you are using has to be absolute eg (http://.../images/myimage.jpg) instead /images/myimage.jpg. This is common issue when you write custom code (don't use standard framework) and use .htaccess to rewrite urls.
You can set basepath as constant so you can easy change it if you switch domains.
define("BASE_PATH", "http://mydomain.com");
and then in code use it:
BASE_PATH."/images/myimage.jpg"
Or use base tag in your head in html
<base href="http://www.yourdomain" target="_blank">
And as Saturnix said in his answer you should have folder named "images" and filename you put in src.
If an image can't be found in the location you specify in your HTML, the browser will display a broken image link marker, maybe like one of these;
Chrome
IE10
Firefox 10
Each browser has its own marker. Maybe your browser uses a question mark to indicate a broken image link.
I have limited space in my server. So, I am looking for an alternative for hooking up image URLs to my site like a product image.
What I would like to do is input an URL then load an image without refreshing the whole page.
Here is my idea:
input "any url" then submit
if url is image and existing {
display the image
}
else if (url is a non-image) or (url is image but not existing) {
display a default image
}
I tried getimagesize but it was so heavy. curl is not functioning on my server, so I am trying to do is use jQuery or JavaScript or something.
At the moment I'm using something like this:
HTML
<img src="http://www.yoursite.com/img/someimage.jpg" onerror="NoImage(this);">
Javascript part:
<script type="text/javascript">
function NoImage(p){
p.src="http://www.yoursite.com/img/nopic.gif";
}
</script>
Hope it helps
use fopen to check if that image exists u dont have to read the full content
http://www.astro.keele.ac.uk/oldusers/rno/Computing/File_magic.html
( u should restrict that possible urls cause auf bandwidth stealing from other pages - and maybe some copyright problems caused by that images )
I am trying to do the following; dynamically pick a server with the image on it, and then show said image in img src="". Yeah I know, I am horrible at explaining stuff like this but this should clear it up:
dl-main.php (on server0.domain.com)
$url = 'http://server2.domain.com/offerimage.php?f='.$_GET["f"];
header( 'Location: '.$url ) ;
offerimage.php (on server2.domain.com)
//Lots of link-protection stuff here
$f = "/".$_GET["f"];
$url = 'http://server2.domain.com'.$uri_prefix.$m.'/'.$t_hex.$f;
echo' <img src="'.$url.'"></img> ';
dl.php (on many other servers)
img src="http://server0.domain.com/dl-main.php?f=lalala.gif"
So it pretty much goes like this: Random person adds img src directing to dl-main.php?f=filename on server0. server0 then decides which server will provide the image. In the above example I am using only one server; server2
Now I simply want dl.php to show the photo hosted on server2.domain.com .
As it stands when I directly visit dl-main.php it succesfully redirects me to dl.php, which then succesfully shows me the image I requested. But when I use dl-main.php in a img src it doesn't show the image. I didn't expect it to work but it was worth a shot, but now I don't know what to do anymore :o
I hope this failed attempt is a good example of what I'm trying to accomplish here.
Thanks!
Here's the problem. You call image from server0 using:
<img src="http://server0.whatever/dl-main.php?f=thatimage.something" />
Where the dl-main.php code redirects to server2. Here, you do:
echo' <img src="'.$url.'"></img> ';
So basically the original img tag would get another img tag instead of the image data. That's why the browser can't render the image. You should echo the content of the image instead of an img tag.
Try using your browser's developer tools and check the request to server2 to verify my guess.
It can't work, your second script (offerimage) is producing text/plain, you should produce image/...in order to use img