Im trying to align the image that I fetched from my database with a text that is also fetched from database. The text seems ok but the image just stick to the left
<div align="center">
<p>
<?php
$vid =$_REQUEST[#id];
include 'conn.php';
$sql = mysql_query("SELECT * FROM product_car where Id = '$vid'");
$vid = 'Id';
$vnamaproduk = 'NamaProduk';
$vharga = 'Harga';
$vpenerangan = 'Penerangan';
$vgambar = 'Gambar';
?>
<table width="1000" border="0" align="center">
<?php
while($row= mysql_fetch_assoc($sql)){
?>
<tr>
<td>
<img src="gambar/car/<?php echo $row[$vgambar];?>"width="500" height="400"/>
</td>
<td>
<?php
echo "<br>Product Id : ".$row[$vid];
echo "<br>Product Name : ".$row[$vnamaproduk];
$harganew =sprintf('%0.2f',$row[$vharga]);
echo "<br>Price : RM".$harganew;
echo "<br> <br>".$row[$vpenerangan];
echo "<br>";
}
?>
ADD TO CART
</td>
</tr>
</table>
</div>
is the image displayed as a block?
img {
display:block;
margin:auto;
}
If you want to center the image, you could try this
img {
margin: auto 0;
}
Related
Thank you all in advance....
I am doing a project in which I have a field to store the image. In that form, the image uploaded is completed with croppie plugin. and I stored the data in base 64 encodings. But I cannot fetch it to a page called view.php but the images are fetched to the form after cropping.
Please help me to figure it out the mistake that I have done
<tbody>
<?php
$no = 1;
$data = mysqli_query($con, "SELECT * FROM `register` WHERE app_registration IS NULL ORDER BY `app_id` DESC ");
while ($row = mysqli_fetch_assoc($data)) {
?>
<tr>
<td><?php echo $row['app_id'] ?></td>
<?php if (!empty($row['image_reference_id'])) {
$data1 = mysqli_query($con, "SELECT * FROM `photo_table` WHERE image_unique_id = '" . $row['image_reference_id'] . "'");
$row1 = mysqli_fetch_assoc($data1)
?>
<td><img src="data:image/jpg;base64,'.base64_encode($row['images']).'"/></td>
<?php } else {
?>
<td><img src="../images/<?php echo $row['app_image'] ?>" style="width: 100px; height: 100px;"></td>
<?php } ?>
<td><?php echo $row['app_name'] ?></td>
<td><?php echo $row['app_mobile_no_1'] ?></td>
</tr>
<?php } ?>
</tbody>
Note: In db the images are in Long Blob
You will need to change the following:
<img src="data:image/jpg;base64,'.base64_encode($row['images']).'" />
to
<img src="data:image/jpg;base64, <?php base64_encode($row['images']);?>" />
I've been dealing with this problem like 3 days.
I have a PHP code that echo es images from database. The class IMG is not responding, it should show margin-bottom: 60px but it is not. I've putted the class in img class-name src but still nothing.
Thank you
<table class="table-image">
<?php
$query = "SELECT * FROM images ORDER BY id DESC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>
<img src="data:image/jpeg;base64,'.base64_encode($row['name'] ).'" height="480" width="550" class="img" " />
</td>
</tr>
';
}
?>
</table>
And CSS
.img{
width: 100%;
height: auto;
margin-bottom: 60px;
}
You have two quotes at the end.
class="img" " />
<table class="table-image">
<?php
$query = "SELECT * FROM images ORDER BY id DESC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result)): ?>
<tr>
<td>
<img src="data:image/jpeg;base64,<?php echo base64_encode($row['name'] ); ?>" height="480" width="550" class="img" />
</td>
</tr>
<?php endwhile; ?>
</table>
how to display blank if there is no image in a record.As i have inserted a record in database without an image but while fetching an record it is displaying an blank image in front end.It should not show any image if there is no image.Here is my code. If there is no image it should show only description.
Blogimage.php
<tbody>
<?php include "blogs.php" ;
while($row = mysql_fetch_array($result))
{?>
<tr>
<td><img src="admin/upload/<?php echo $row['image'];?>" height="100" style="width:60%;height:50%;"/></td>
</tr>
<tr>
<td><?php echo "<p style='width:60%;'>" .$row['blog_description']."</p>"; ?></td>
</tr>
<?php }?>
</tbody>
Blogs.php
$id=$_GET['title'];
$res = "SELECT * FROM blogs
WHERE blog_title='$id'";
$result=mysql_query($res);
try changing this
<img src="admin/upload/<?php echo $row['image'];?>" height="100" style="width:60%;height:50%;"/>
to this
<?php if($row['image']) echo "<img src='admin/upload/".$row['image']."' height='100' style='width:60%;height:50%;' />"; ?>
A couple of general points before we go into this
1) The MySql library you are using is old and busted - you should be using something newer - read this - the options are Mysql PDO and MySqli - I promise you, you will be glad you did, i use IDIORM as an interface and find it very good (Also helps prevent stuff in point 2 below!)
2) Your code can be SQL injected - more about that here - this is very bad :)
Below is an example, I have fixed the SQL injection problem, and put in some logic that would test to see if there is an image, if not, it will dump out a 'noimage.jpg' src value.
I have removed the include, and just simply put the code for blogs.php inline.
<tbody>
<?php
//START CODE FOR BLOGS.PHP
$query = sprintf("SELECT * FROM blogs WHERE blog_title='%s'",
mysql_real_escape_string($_GET['title']));
$result = mysql_query($query);
//END CODE FOR BLOGS.PHP
while($row = mysql_fetch_array($result))
{
if(!empty($row['image']) && strlen($row['image']) > 4)
{
$iamgeSrc = 'admin/upload/' . $row['image'];
}
else
{
$imageSrc = 'admin/upload/noimage.jpg';
}
?>
<tr>
<td>
<img src="<?php echo $imageSrc; ?>" height="100" style="width:60%;height:50%;"/>
</td>
</tr>
<tr>
<td>
<?php echo "<p style='width:60%;'>" .$row['blog_description']."</p>"; ?>
</td>
</tr>
<?php
}
?>
</tbody>
If you want no image to show at all, then this would work
<tbody>
<?php
//START CODE FOR BLOGS.PHP
$query = sprintf("SELECT * FROM blogs WHERE blog_title='%s'",
mysql_real_escape_string($_GET['title']));
$result = mysql_query($query);
//END CODE FOR BLOGS.PHP
while($row = mysql_fetch_array($result))
{
$image = '';
if(!empty($row['image']) && strlen($row['image']) > 4)
{
$image = '<img src="admin/upload/'.$row['image'].'" height="100" style="width:60%;height:50%;"/>';
}
?>
<tr>
<td>
<?php echo $image; ?>
</td>
</tr>
<tr>
<td>
<?php echo "<p style='width:60%;'>" .$row['blog_description']."</p>"; ?>
</td>
</tr>
<?php
}
?>
</tbody>
I want to show a category based shopping items with images on web page that can be found in the most Online shopping sites.I crated two mysql tables: Ist with id, category_name and 2nd with id, categoryid, product, image_path. I am able to display all product images at a time on page, but I don't know how to show product images of a single category selected from a dropdown list with submit button at the top of the page. I hope my point is clear to all otherwise feel free to ask me.
Below I attached my code that shows all the product images on my php page at a time without any dropdown list. Any ideas and advice on doing this is welcome.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul, li {
list-style-type:none;
}
ul.display {
width: 500px;
}
ul.display li {
float: left;
width: 100px;
height: 120px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
position: relative;
vertical-align:middle;
text-align:center;
}
ul.display li a img {
width: 94px;
height: 114px;
display: inline;
}
</style>
</head>
<body>
<div align="center">
<?php
include('connect.php');
$SQL = "SELECT * from becuart";
$result = mysql_query( $SQL );
echo "<ul class='display'>";
while( $row = mysql_fetch_array( $result ) ) {
$filepath = $row["path"];
echo "<li>";
echo "<img src=\"$filepath\" border=\"0\">";
echo "</li>";
}
echo "</ul>";
?>
</div>
</body>
</html>`
Because it's way too long -> new answer:
<?php
include 'dbconnect.php';
?>
<form name="product" method="post" action="">
<table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Category</td>
<td>
<select name="category">
<?php
$sql = "SELECT id, art_name, path FROM category;";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
<option value="<?= $row['id']; ?>"><?= $row['art_name']; ?></option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><input name="go" type="submit" value="Go" /></td>
</tr>
</table>
</form>
<div align="center">
<ul class='display'>
<?php
$id = (int)$_POST['category'];
$sql_search = "SELECT id, art_name, path FROM category WHERE id = $id";
$search = mysql_query($sql_search);
if (isset($_POST['go'])) {
while ($row = mysql_fetch_assoc($search)) {
?>
<li><img src="<?= $row['path']; ?>" border="0"></li>
<?php }
}
else {
}
?>
</div>
SELECT id, name, path FROM table;
...
<select name ...>
<?php
while( $row = mysql_fetch_array( $result ) ) {
?>
<option name="id" value="<?= $row['id']; ?>"><?= $row['name']; ?></option>
<?php
}
?>
</select>
So by javascript/jquery open the img which answers on the POSTed $row['id']; (SELECT path FROM table WHERE id = ?;) or by a simple $_POST['id'] which is the name of the field
I'm working on a php gallery. I'm displaying image from mysql db using php, but my images are displaying in one by one. which means the first image in first row and second image in second row. but I want to display my image as 3 or 4 per row. what coding changes can I make. my php code as shown below.
<?php
include_once("config.php");
$result=mysql_query("SELECT * FROM images");
while($res=mysql_fetch_array($result)){ ?>
<table width='200'>
<tr>
<td><?php echo"<a href='indimage.php?imageid=$res[imageid]'>"?><?php echo $res['imagename']?><?php echo"</a>"?></td>
</tr>
<tr>
<td>
<div id="news-image">
<?php echo"<a href='indimage.php?imageid=$res[imageid]'>"?>
<?php echo'<img src='.$res['image'].' width="250" height="100">'?><?php echo"</a>"?>
</div>
</td>
</tr>
</table>
<?php } ?>
array_chunk() is a function to split an array into a collection of X items for you to loop through without having to keep counters (you can then use array_pad() on the last item in the list if you need padding)
if($array = array_chunk(mysql_fetch_assoc($result),4))
{
foreach($array as $row)
{
echo '<div class="row">';
foreach($row as $col)
{
echo '<div class="item">' . $col['image'] . '</div>';
}
echo '</div>';
}
}
You're outputting a table per image. At minimum, your code should be more like this:
<table>
<tr>
<?php while($res etc...) { ?>
<td>
<img src="<?php echo ......?>" />
</td>
<?php } ?>
</tr>
</table>
Now you'll get all the images in a single row of a single table. Making it have multiple rows is left as an exercise to the OP.
follow this example
<table>
<tr>
<?php
$i = 1;
do{
echo "<td>" . $i . "</td>";
//Num of Columns
if( $i%3 == 0 ){
echo "</tr><tr>";
}
$i++;
}while($i<=10);
?>
</tr>
<table>
will return the result something like you want..
<?php
include_once("config.php");
$result=mysql_query("SELECT * FROM images");
?>
<table>
<tr>
<?php
$cnt = 0;
while($res=mysql_fetch_array($result))
{
if($cnt == 3){
echo "</tr><tr>";
}
?>
<td>
<table width='200'>
<tr>
<td><?php echo"<a href='indimage.php?imageid=$res[imageid]'>"?><?php echo $res['imagename']?><?php echo"</a>"?></td>
</tr>
<tr>
<td>
<div id="news-image">
<?php echo"<a href='indimage.php?imageid=$res[imageid]'>"?>
<?php echo'<img src='.$res['image'].' width="250" height="100">'?><?php echo"</a>"?>
</div>
</td>
</tr>
</table>
</td>
<?php
$cnt++;
}
?>
</tr>
</table>
Use the following code.
<?php
include_once("config.php");
$result=mysql_query("SELECT * FROM images");
?>
<table>
<tr>
<?
$varcount=0;
while($res=mysql_fetch_array($result))
{
$varcount++;
if($varcount == 4) // Count of images per row. 3 or 4
{
$varcount=0;
?>
</tr><tr>
<?
}
?>
<td>
<table width='200'>
<tr>
<td><?php echo"<a href='indimage.php?imageid=$res[imageid]'>"?><?php echo $res['imagename']?><?php echo"</a>"?></td>
</tr>
<tr>
<td>
<div id="news-image">
<?php echo"<a href='indimage.php?imageid=$res[imageid]'>"?>
<?php echo'<img src='.$res['image'].' width="250" height="100">'?><?php echo"</a>"?>
</div>
</td>
</tr>
</table>
</td>
<?php
}
?>
</tr>
</table>
You could instead output the images as a list of divs, or just divs, and then use CSS to show the images in two columns. Your layout should not be that hardwired.
<style>
div.gallery {
width: 650px;
}
div.gallery ul li {
list-style: none;
float: left;
}
div.image {
height: 500px;
width: 300px;
}
</style>
<div class="gallery">
<ul>
<li>
<div class="image">
<span class="image_title">Some title</span><br/>
<img src="foo.png"/>
</div>
</li>
<li>
<div class="image">
<span class="image_title">Another title</span><br/>
<img src="bar.png"/>
</div>
</li>
<li>
<div class="image">
<span class="image_title">Another title</span><br/>
<img src="foo.png"/>
</div>
</li>
<li>
<div class="image">
<span class="image_title">Another title</span><br/>
<img src="bar.png"/>
</div>
</li>
<li>
<div class="image">
<span class="image_title">Another title</span><br/>
<img src="foo.png"/>
</div>
</li>
</ul>
</div>
Result:
Your code should look something like:
<div class="gallery">
<ul>
<?php
include_once("config.php");
$result = mysql_query("SELECT * FROM images");
while($res = mysql_fetch_array($result)) {
?>
<li>
<div class="image">
<a class="image_title" href="indimage.php?imageid=<?php echo $res['imageid']?>"><?php echo $res['imagename']?></a><br/>
<img src="<?php echo $res['image']?>" />
</div>
</li>
<?php
}
?>
</ul>
</div>
Here is the Solution i think you want that:
there are three pages.
1. index.php (which has the form for uploading the image)
2. upload.php (which save the image in directory and its path in database)
3. showimage.php (Finally, which will show the image)
here is the code
(index.php)
<form method="post" action="upload.php" enctype="multipart/form-data">
<label>Choose File to Upload:</label><br />
<input type="hidden" name="id" />
<input type="file" name="uploadimage" /><br />
<input type="submit" value="upload" />
</form>
(upload.php)
<?php
$target_Folder = "upload/"; // directory where images will be saved
$target_Path = $target_Folder.basename( $_FILES['uploadimage']['name'] );
$savepath = $target_Path.basename( $_FILES['uploadimage']['name'] );
$file_name = $_FILES['uploadimage']['name'];
if(file_exists('upload/'.$file_name))
{
echo "That File Already Exisit";
}
else
{
// Database
$con=mysqli_connect("localhost","user_name","pasword","database"); // Change it if required
//Check Connection
if(mysqli_connect_errno())
{
echo "Failed to connect to database" . mysqli_connect_errno();
}
$sql = "INSERT INTO image (id,image, image_name)
VALUES ('$uid','$target_Folder$file_name','$file_name') ";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "1 record added successfully in the database";
echo '<br />';
mysqli_close($con);
// Move the file into UPLOAD folder
move_uploaded_file( $_FILES['uploadimage']['tmp_name'], $target_Path );
echo "File Uploaded <br />";
echo 'File Successfully Uploaded to: ' . $target_Path;
echo '<br />';
echo 'File Name: ' . $_FILES['uploadimage']['name'];
echo'<br />';
echo 'File Type: ' . $_FILES['uploadimage']['type'];
echo'<br />';
echo 'File Size: ' . $_FILES['uploadimage']['size'];
}
?>
Show Image
(showimage.php)
<?php
$con=mysqli_connect("localhost","user_name","password","database_name"); // Change it if required
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM image " );
while($row = mysqli_fetch_array($result))
{
echo '<img src="' . $row['image'] . '" width="200" />';
echo'<br /><br />';
}
mysqli_close($con);
?>
Features
It will check the names of file if that name file already exisit it will not uplad the file and alert the user.
Database Structure
id int(4) Auto Increment - image varchar(100) - image_name varchar(50)