I am building a custom wordpress theme and have a slideshow on the front page displaying images from blog posts.
Now if the image is over 300px in height I want to force its widthand center it vertically. So my question is:
Is there a way, in php or javascript to get the height of an image by only using the URL of the image?
EDIT: I tried this: <?php list($height) = getimagesize(echo catch_that_image()); echo "<p>$height</p>"; ?> where catch_that_image() returns the URL, but somehow this doesn't work (I think the first echo breaks it). Any ideas?
Thank you for your help.
image by only using the URL of the image?
var img = new Image();
img.onload = function() {
alert('The size is ' + this.width + 'x' + this.height);
};
img.src = 'some image URL';
Try it
http://jsfiddle.net/NPSMN/
ps:
I tried this: ... where
catch_that_image() returns the URL, but somehow this doesn't work (I
think the first echo breaks it). Any ideas?
did you look closer at your code? echo outputs to the browser, not to the argument of the function.
<?php
list(,$height) = getimagesize(catch_that_image());
echo "<p>$height</p>";
?>
See getimagesize() in PHP. That will do what you're looking for.
http://php.net/manual/en/function.getimagesize.php
<?php
$url = "http://www.example.com/image.jpg";
list($width, $height) = getimagesize($url);
echo "Width: $width<br />Height: $height";
?>
Related
I have a database which includes a table of jpeg photo data. This data has been sent to the database from an iPad app and can be displayed in a webpage using the following:
$photo_query = "SELECT photoID, photoData FROM tblPhotos;";
$resultPhotos = mysqli_query($connect, $photo_query);
while($rowPhotos = mysqli_fetch_array($resultPhotos)) { ?>
<div id="photo"> <?php
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['photoData']) .'"/>';
</div>
}
This works fine and the image displays correctly.
I am now looking to add a simple tool to rotate this image. Below the image is a simple and when this is clicked the javascript function updatePhoto is called with the photoID:
<div onclick="updatePhoto('<?php echo $photoID; ?>')">Rotate</div>
JAVASCRIPT
function updatePhoto(photoID) {
$.post("photoChange.php", {
photoToChange: photoID
},
function(data, status){
document.getElementById('photo').innerHTML = "<img src='data:image/jpeg;base64, base64_encode(" + data + ")'/>";
});
}
PHOTOCHANGE.PHP
$photoID = $_POST['photoToChange');
$select_photo_query = "Select photoData From tblPhotos where photoID= '" . $photoID ."';";
$resultPhotos = mysqli_query($connect, $select_photo_query);
while($rowPhotos = mysqli_fetch_array($resultPhotos)) {
$source = $rowPhotos['photoData'];
}
$degrees=90;
$image = imagecreatefromstring ($source);
$rotate = imagerotate($image, $degrees, 0);
$finalImage = imagejpeg($rotate);
//step to convert jpeg back to binary needed?
echo $finalImage;
This all works in that the photoID is sent to photoChange.php, the source is retrieved from the database etc and data is sent back and placed into the page. But it does not display an image, just lots of data. I know I have a coding issue here but I am not sure exactly what.
I have tried removing all the rotation detail and simply echoing the $source unchanged and this does not replace the image with itself but with lines of data instead. So I wonder if there is an issue when posting data and echoing data back whether I need to stipulate a coding method being used?
Any assistance much appreciated.
Go to: http://php.net/imagejpeg
It returns a boolean value and directly dumps the image to the output.
$finalImage = imagejpeg($rotate);
//step to convert jpeg back to binary needed?
echo $finalImage;
Instead of this, add the content type and let the image render straight (you don't need echo, echo is implicit on imagejpeg()):
header('Content-Type: image/jpeg');
imagejpeg($rotate);
More problems:
You have <div id="photo"> in a while loop, which makes your ID not unique, it can't work when you have more than 1 picture
Another problem:
You interpolate PHP in Javascript a way it won't work ever. Replace the line by this with fixed concatenation:
.innerHTML = "<img src='data:image/jpeg;base64, " + data + "'/>";
Put the base64 encode in the image creation step, we make use of output buffer there:
header('Content-Type: text/plain');
ob_start();
imagejpeg($rotate);
$binary = ob_get_contents();
echo base64_encode($binary);
ob_end();
I'm trying to display an image but it doesn't show anything although I got the correct URL for the image in my server. Here's my current progress/Output:
PHP Snippet Code
$Report_ID = 51;
$Retrieval_Image_Query = mysqli_query($Connection, "SELECT Image_Name,Original_Image_Directory,RGB_Image_Directory FROM Report_Image WHERE Report_ID = $Report_ID");
//REMOVES THE FOLLOWING WORDS IN THE STRING BECAUSE IT RESULTS IN A WRONG URL
$Result = mysqli_fetch_object($Retrieval_Image_Query);
$Temp_Orig_Image = str_replace("/home/u871055686/domains/", '', $Result->Original_Image_Directory);
$Temp_RGB_Image = str_replace("/home/u871055686/domains/", '', $Result->RGB_Image_Directory);
$Final_String["Original_Image_Directory"] = preg_replace("/\bpublic_html\b/", '', $Temp_Orig_Image);
$Final_String["RGB_Image_Directory"] = preg_replace("/\bpublic_html\b/", '', $Temp_RGB_Image);
$Final_String["Image_Name"] = $Result->Image_Name;
?>
<img src = "<?php echo $Final_String["Original_Image_Directory"]; ?>" width = "250" height = "250" alt = "Working"/>
<?php
echo "<pre>";
var_dump($Final_String);
echo "</pre><br>";
echo json_encode($Final_String);
It outputs this URL: fireoutph.com//Report_Images/Orig_Nov_2,_2018_9:33:20_PM.png
But when I tried to open that link in my web browser (google chrome) it shows me the image file with no problem. Notice the double slash in the URL.
QUESTION
What might be the problem if there's no problem in data retrieval of image path and file type? and How can I display the image successfully?
Add http:// before the image URL:
http://fireoutph.com//Report_Images/Orig_Nov_2,_2018_9:33:20_PM.png
on my mission to use ckEditor as a BBCode editor i am faced with an issue directly for my site.
I have user submitted content that can contain [img] tags.
I really want the images to have a width of 100%, which is fine. I convert any [img] tags to html and apply a class which is styled as i wish.
function basicbbcode($text) {
$text = str_replace("[IMG]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/IMG]", "'>", "$text");
$text = str_replace("[img]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/img]", "'>", "$text");
}
The issue is when someone uses a small / low res image. I dont wish to stretch that image because its going to look horrible.
My aim was to find a threshold, so if the image is more than 800px wide, give it the class of buildimage. If its smaller, give it a class of buildimage-small.
I would then just keep the natural size of that image. I am trying to promote the users providing high quality images but at the same time want to keep the site looking great and no having poorly stretched images because there is res is small.
So, is there a way to check the image size when it is out from the database as the $text variable and then act accordingly. Ideally with php, but maybe jquery?
No idea on this one, possible?
You can use getimagesize():
The getimagesize() function will determine the size of any given image
file and return the dimensions along with the file type and a
height/width text string to be used inside a normal HTML IMG tag and
the correspondant HTTP content type.
<?php
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
?>
Source: http://us3.php.net/getimagesize
To do it in jQuery it could be as simple as:
var box = $("#boxWithImageInside"),
img = box.find("img.buildimage");
if (img.width() > box.width()) {
img.width("100%");
img.height("auto");
}
The code was not tested, so you may have to adjust it to to what you need.
If you want to solve your problem on client side maybe this helps : FIDDLE
$(function () {
isImgLargerThan800px = function (src) {
var img = new Image();
img.onload = function () {
if (this.width < 800) {
alert('this image need SMALL class')
} else {
alert('this image need LARGE class')
}
};
img.src = src;
};
//TEST
$('a').on('click', function () {
isImgLargerThan800px($(this).text());
alert('Now checking for image size of URL : ' + $(this).text())
})
});
I scored my website on gtmetrix.com.
It recommends adding image dimensions to all my images. The thing is, I need some way of adding these automatically, so if the image changes, the dimentions are updated.
What I have
<img src="bla.png">
What I'd like to have
<img src="bla.png" width="{width of image}" height="{height of img}">
Is there a php way or a jquery way to do this?
For a wordpress site.
PHP:
<?php
list($width, $height) = getimagesize("bla.png");
echo "<img src='bla.png' width='$width' height='$height'>";
?>
You can use image onload event to calculate the dimensions of image. Pure javascript approach, something like ;
var image = new Image();
image.onload = function()
{
//after load complete you will get the image dimensions here from
//image.width and image.height
}
image.src = 'image url';
In php it's getimagesize($file) if you are outputting images dynamically.
You should do it with PHP not with javascript. If you add it with jQuery / javascript, the width and height would be added after loading. The main reason of specifying width and height is to let the engine render the page faster. It would not be of any help if it as added after loading.
You can use the index 3 of the returned array from getimagesize() directly in the image tag. It contains a string with height="yyy" width="xxx" an can be used directly in an IMG tag.
<?php
list($width, $height, $type, $attr) = getimagesize("file.png");
echo "<img src='file.png' $attr />";
?>
You can visit http://php.net/manual/en/function.getimagesize.php for more details on this function.
I need to get the width and height of a .mov-file with php.
How do I do that?
I have used getid3 in the past to achieve this you can grab it from http://www.getid3.org/ I am not sure how well maintained it is anymore
You could knock up some code to look similar to this
<?php
include_once('getid3.php');
$getID3 = new getID3;
$file = './file.mov';
$file_analysis = $getID3->analyze($file);
echo 'Video Resolution = '.$file_analysis['video']['resolution_x'].' X '.$file_analysis['video']['resolution_y'];
?>