This question already has answers here:
Creating a thumbnail from an uploaded image
(9 answers)
Closed 3 years ago.
I want to display images in my search page as a part of echoed content as a result of search query. These images have different resolutions and what's also very important for the next part they are not squarish. For displaying these photos I've initially used something like this:
if ($queryResult > 0){
while ($row = mysqli_fetch_assoc($result)){
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['photo']).'" ">';
echo "<a href='account.php?username=".$row['username']."&id=".$row['id']."' style='text-decoration:none; color:rgb(0,0,0)'>
<div class='article-box'>
<h3>".$row['username']."</h3>
</div>
</a>";
}
}
But sadly the photos displayed were very big so the result wasn't satisfying me. That's why later I set image displaying part like this:
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['photo']).'" width="150" height="150">';
Again it didn't give me good results. Although the images were then finally small, the non-squarish images were turned into squares what caused them to be deformed. How to display images nicely, I mean to keep them small or of exact size but not to deform them.
Just remove one of the arguments and the browser will scale the image and keep aspect ratio.
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['photo']).'" width="150"';
Or set the height. But not both.
You need to make image thumbs when they are uploaded, not when they are displayed, it ll load faster.
Take a look at this script :
https://pqina.nl/blog/creating-thumbnails-with-php/
Using this script you can now for example generate square 160 by 160 pixel thumbnails with the following command :
createThumbnail('profile.jpg', 'profile_thumb.jpg', 160);
then call profile_thumb.jpg instead of original image
Related
This question already has answers here:
PHP code is not being executed, but the code shows in the browser source code
(35 answers)
Closed 7 years ago.
I changed my *.html file into *.php. It seemed okay, but after I click the button for image it doesn't show the picture. IN *.html file it was working.
My code:
<img src="C:\xampp\htdocs\Bella Cristina/diamond.jpg" alt="Diamond Room" style="width:200px;height:200px;">
Firstly, you have to make sure that the image exist in your image folder. Insert the name of the folder and the image into a field in your table in the database.
To display it write thees lines of PHP code:
// this will display the image with the size reduced or increased by 180px by 180px
echo '<img src="'.$row['field'].'" '.'width="180px"'.' '.'height="180px"'.'>';
?>
Note: the $connection much be existing in your connection string that is connecting the database
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'm using php to display image(s) and accompanying text (This is done using a WHILE loop) See below:
While (true) {
echo "
<h2>$post_title</h2>
<img src ='new_images/$post_image' width='200' height='200'/> // Image
<div>$post_content</div> "; // Text
}
I have used CSS to float the image left. Therefore,the accompanying text appears to the right of the image.
However, the second image and accompanying text is NOT sitting below the first. It's trying to force itself into any space to the right of the first image
Can I use CSS to ensure the images are stacked??
I hope that above makes sense?
add clear:both to your images and it should work just fine
I'm editing a website that contains an image slider that displays two images side-by-side, however when i view the website in chrome the images are not inline with each other like so: http://i754.photobucket.com/albums/xx182/rache_R/Untitled-1_zps6f3014ef.jpg
I use php and html to get data from a database and display the images based on the data gathered. I have tried to target the images individually in my css but it either doesn't work or effects both images.
Is there a correct way of targeting the images individually or how can i fix this?
php code:
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<u1>"; ?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4></li>
so i managed to solve it:
#media screen and (-webkit-min-device-pixel-ratio:0){
#mi-slider li {
vertical-align: top;
}}
Place the < ul> having a width so much that it can hold both images side by side and give style='display:inline' for the ul.. You will get the images inline
This is more of a css question.
You have one of to options, using an inline list or a float.
personally i line inline list, you could also use a table but that is considered bad practice.
You could also use java script to calculate the position, which is also bad practice if used improperly.
W3schools.com should be a good reference if you dont know how to implement these properties in css.
Next time please replace your php with static information so it looks better :) cheers
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Want to render an image without saving it to disk using PHP GD libs
The image cannot be displayed because it contains errors.
I'd like to call a function that make a image trought the img src tag. Is it possible?
I mean : instead of call <img src="path/file.php" /> I'd like to do somethings like <img src="function()" />
PHP is server side; It can generate either a base64_encoded image result which can be placed as an image, or you can point to a php script that will generate an image. But, regarding client side, it won't work.
So, you could do the following:
// the browser will make a call to your generator to render an image back
echo '<img src="myimagegenerator.php" />';
// src will be something like "data:image/png;base64,..."
echo '<img src="'.generateImage().'" />';
In HTML5 you can put the base64 encoded image source in an image tag. You will just need a function to return that.
function getImage($file){
return 'data:image/gif;base64,' . base64_encode(file_get_contents($file));
}
Your img tag:
<img src="<? echo getImage('path-to-image.gif'); ?>" />
No.
However, you can use the URL "thispage.php?makeimage=1" and call the function and output an image if $_GET['makeimage'] contains 1.