I have a page in my site that uses a MySQL database and a PHP script (phpThumb) to create small (150px-wide) images from larger images. When I ask it to display this page:
https://newtonartassociation.com/membership/admin/mb_test.php
some of the images come up as broken.
If I reload the page, some of the broken images get filled in but others usually break. For some reason it is worse in Firefox than Chrome. Note that (1) there are more broken images at the far end of the page than at the beginning; and (2) if I invert the list order, I still get more broken images at the far end, so it doesn't seem to be the individual images that are causing this.
The only change since the last time I ran this code is that I'm now running PHP 7.0 instead of 5.6.
I got the latest version of phpThumb and I also tried reverting to PHP 5.6 but got the same result.
<?php
$result_art = $mysqli->query("SELECT * FROM eventart WHERE (event = 'motherbrook') ORDER BY artist ASC");
$row_result_art = mysqli_fetch_assoc($result_art);
require_once('../resize/phpThumb.config.php');
do {
$image = $row_result_art['artworkid'];
echo '<img src="'.htmlspecialchars(phpThumbURL('src=show_images/'.$image.'&w=150', '../resize/phpThumb.php')).'"><p>';
} while ($row_result_art = mysqli_fetch_assoc($result_art));
?>
If I right-click on a broken image and select reload image (Firefox) or open in a new tab (Chrome), I see the image and it then appears in the full list, but I can't instruct my client to do this for every broken image.
You are uploading too many images at the same time. Browsers save data.
Cut the pictures into pieces and show them if the user wants to see them.
Related
Using Concrete5 8.1, I am getting the error An image could not be created from the given input on every page.
I created a custom theme, custom Thumbnail sizes, and custom Page Types, most of the site content has been entered and everything was working well. In reviewing the site before it goes live, I noticed most of the images had been uploaded as fairly large images (2000-4000 pixels wide, nothing insanely huge, but large enough that I wanted to do something about it).
Based on the Concrete5 documentation, I added the following code:
public function getThemeResponsiveImageMap() {
return array(
'timeline_gallery' => '0'
);
}
The timeline_gallery thumbnail has existed since the start of this project, so all images should have already had this thumbnail. But when I refreshed the page, I see the error: An image could not be created from the given input.
Google finds many entries for this error: potentially related to GD not being able to process SVG, PNG, or very large images, and the solution is to address the problem images within the File Manager. However, I cannot get to the File Manager - I cannot get to any page on the site, including any of the dashboard pages (all display the same error).
I then remove the 5 lines of code from above (the only code changes that have taken place over the past 24 hours) and save the page_theme.php, but I still see the same error on every page.
It would be great to be able to fix the image sizes, but at this point, I'd just like to clear the error and make the site work again. I have looked at the Apache log for any specifics on the error (no help, since the error doesn't show up), I have restarted Apache, and then rebooted the machine (all to no avail). With the code being the same as when the site was working earlier today (and all content editors have left, so no content changes have taken place), I'm guessing there might be a queue, either in the file system or database, of images to be resized and one of them is causing an issue... but it's just a guess.
You can clear the error by modifying the FileImageThumbnailPaths table.
Find the table entry where isBuilt is 0.
SELECT * FROM FileImageThumbnailPaths WHERE isBuilt = 0;
In the results, change the entry isBuilt column to 1.
If you have multiple entries to change, you can change them all at once.
UPDATE FileImageThumbnailPaths SET isBuilt = 1 WHERE isBuilt = 0;
Using phpMyAdmin:
select your concrete5 database
click the SQL tab in the top menu bar in the right pane
in the textarea, you can enter the SQL query
Before making any changes to the database, please make a full backup of your database and site files.
I have several high-resolution images that I am using on my website. I am using PHP to echo the images. I specify a width of "30" for each of the images, which correctly sizes them.
The problem is that for SOME of the images, there is some sort of automatic conversion to data URI - which seems to cause the images to not only be resized to 30x30, but also to have a resolution of 30x30.
This seems to happen when I refresh - almost like it is caching the php after the first execution, then on refresh, it thinks the image file size is actually 30x30.
See images below - the first image is the first time I visit the website and screen captured on my iphone. Then I refresh, and the second screenshot is the result. Notice that the apple image remains crisp on both, while the rest appear blurry. All of the original files have approximately the same resolution.
Additionally, if I view the apple image (after refresh) in it's own window, it shows this:
.../logos/30xNx50de0713c94d847...
Whereas if I view the "dicks sporting goods" image in it's own window, it shows this:
data:image/jpeg;base64...
I am not specifying any kind of data URI conversion - would it be something on the server that does this automatically? And why for some images but not others?
Thank you for your time.
I determined this was a result of PageSpeed being enabled on my host. PageSpeed is a Google product that optimizes the loading of pages - and in this case, transforms images based on the width that is specified in the img tag.
By adding
?ModPagespeed=off
to the end of any page, it disables PageSpeed and shows the images at full resolution. I took this approach rather than disabling PageSpeed entirely, because I want some of my pages to take advantage of the optimization.
I'm working on a PHP application to store some personal information (including photo). I'm storing the image on a specific folder (let's say myapp/images/people/).
After saving a photo my app is redirected to a page showing the information of the specific person (kind of a profile).
If the photo is saved for the first time (no other photo was previously saved for that person) then the photo is shown in the profile. Everything seems to work at this point.
The problem is when I want to change the photo. When I replace a photo my applications keeps showing the old one. I've checked the server and the old photo is gone, there's only the new one (as I need) but the application doesn't show it.
I guess it's something to do with cache.
I've tried by adding the html tag with no cache values, I've tried by adding the same values by using the header() PHP function but nothing.
I also tried by using:
if(file_exists($imagepath))
{
unlink($imagepath);
}
and similar I've used
if(file_exists($imagepath))
{
unlink($imagepath);
clearstatcache();
}
but also nothing.
Can someone help me with this? Any idea about what's going on? The new photo is in the server, the old one is not but the app keeps showing the previous file.
The image is cached in the browser. The best way is to generate a new image name on the server and return the new image in the HTML. Since it is a new image for the browser, it won't get it from the cache and you will see the new image in the application.
I have a mysql database which stores the paths of some images on a network drive.
I thought that using Ajax, I would be able to dynamically generate image tags to display these images in the browser as each image tag would inovoke a new GET request with the path relative to the browser.
The web server has a small HDD and I don't want to have to duplicate everything - so can't store large numbers of images on the server.
My PHP seems to generate the image tags correctly however the broswer does not show the images.
PHP code:
$sql = "SELECT ID,Link FROM tblStorePictures WHERE StoreNumber = $sto";
$result = mysql_query($sql,$dblink) or die(mysql_error());
$row = mysql_fetch_array($result);
$id = $row['ID'];
echo "<img src='file://".$row['Link']."' alt='Image' id=$id>";
The image tags (as viewed in firebug) end up looking like this:
<img id="57" alt="Image" src="file://x:/Image1.jpg">
I have tried various things but nothing works:
Dynamically generating the image tags with javascript using the document.createElement("img") method and setting attributes for the source etc.
Using javascript to set innerHTML.
In all cases I've got the tags to generate correctly, but I still see nothing in the browser but the alt text.
Any suggestions welcome.
What you are facing is a security feature of your browser. In fact, your browser will not follow links to local web pages (it means file:// urls) because the page you are viewing is not a local one (you are not at file://.../.../page.html). Therefore the browser sees a website on the network trying to access a file on your hard drive, and denies access to it for obvious reasons.
It's not an issue with AJAX but an issue with the link to the file. I can almost guarantee your linking is wrong somehow. If you enter the exact link the the file "file://x:/Image1.jpg" in the url filed of the browser, and nothing shows up, it proves there's an issue with your file links.
I am working with php. I have images kept in order. When i do query the images comes in order but when they load they does not load in order. The small images load first and then big images. For example I have 5 images. These images should be loaded in order(1,2,3,4,5). But here its not happening. Image 4 loads first, then 2, 1 and so on. So what can i do for this problem? Hope to get solution.
Thanks in advance.
If you are speaking about the order images are displayed by a web browser, you do not have much control over that, as long as you have several <img> tag on your page :
the browser will request the images from the server in the order it wants (most probably, the first <img> tag encountered will be the first image requested)
each image takes some time to download ; and each image is displayed when it's downloaded ; considering small images should be downloaded faster, small images should be displayed first... depending on the order they were requested -- see previous point.
In the end, if you want absolute control on the order the images are displayed, your initial HTML should probably not contain all the <img> tags: a solution would be to add those, in the right order, when the previous image is downloaded.
This can probably be done with some JavaScript code, to detect when an image is loaded (event "load") ; and when an image is loaded, just add a new <img> tag to the page, for the next one; and so on.
But I wouldn't go with such an idea: it won't work if JS is disabled, your images will not be seen by search engines.
You can control everything on your web server, but nothing on network or browser sides.
A possible solution is to build a single image containing your five images and display each relevant portion to its dedicated position.
Have you tried preloading them with a JavaScript library?
Not sure how you would implement this in PHP, but in the past I have usually had the a 'order' field for each image, then the images were added dynamically according to the 'order' field.
As you should have guessed, image is loaded according to their sizes. Ofcourse, the smaller ones will load before the bigger ones. And yeah, as eyze said, wat about you preload them with a javascript preloader and display them in the right order?