display images from database in horizontal way - php

hi this is my code which display images from mysql database
<?php
error_reporting(0);
include_once 'dbconfig.php';
$id=$_POST['id'];
$q="select * from services ";
$qq=mysql_query($q)
or die(mysql_error());
while($row=mysql_fetch_array($qq)){
$s1=$row[image];
?>
<?php
$p1="admin/services/uploads-services/";
echo '<img src="'.$p1.$s1.'" class="img-responsive" alt="Blog Image">'; ?>
<?php } ?>
it appears in vertical way but i want to make it appear in horizontal way
how can i do this ?

If you want images to be in same row, add display: inline-block to them.
.img-responsive {
display: inline-block;
}

Probably because you visualize the images not in a defined col. If you want to visualize 3 images at a line, you should have
<div class="col-md-12">
<div class="col-md-4">
put your image here
</div>
<div class="col-md-4">
put your image here
</div>
<div class="col-md-4">
put your image here
</div>

Related

How to Display image that coming from PHP file with id?

I have Image path like http://sits.in/imageDemo/image.php?image=R171-1.jpg in data base.
I can not load image in php by simply putting image link http://site.in/imageDemo/image.php?image=R171-1.jpg as src.
My code look like this
<?php
$count = 1;
while ($row = mysqli_fetch_array($result)) {
?>
<br>
<br>
<div class="card " style="width: 800px; margin-bottom: 25px;">
<div class="card-body">
<!-- <h5 class="card-title"><b>Product Number : <?php echo $count; ?> </b></h5> -->
<p>Order Id : <?php echo $row['orders_id']; ?></p>
<p>Product Name : <?php echo $row['product_name']; ?></p>
<img src="<?php echo $row['image1']; ?>" class="card-img-bottom" alt="Product Image"
style="width: 100px; height:100px">
</div>
<?php } ?>
I think you need to store path like that in your database
http://sits.in/imageDemo/R171-1.jpg
Also, create folder imageDemo in your local and store image as R171-1.jpg
If you want to use php file as image you need to make that php file to be shown as image file. Use GD libary. More info about how to use it for jpg here: https://www.php.net/manual/en/function.imagecreatefromjpeg.php

Displaying Image in Carousel from MySQLi using PHP Variables

So I am wanting to create a carousel gallery for my site, so the owners can change the background images when they would like to, and delete images at their will.
Images can already be uploaded, however, displaying them in the carousel is being... difficult.
I am using the MDBootstap Template for the Carousel which looks like this:
<div class="carousel-item active">
<div class="view" style="background-image: url('http://www.fun4all.org/img/vtc.png'); background-repeat: no-repeat; background-size: cover;">
<!-- Mask & flexbox options-->
<div class="mask rgba-black-light d-flex justify-content-center align-items-center">
</div>
<!-- Mask & flexbox options-->
</div>
</div>
although I have attempted to modify the template to be able to show the MySQLi data.
Connection to the Database looks like this: (db.php)
<?php
$conn = mysqli_connect("localhost","highlown_REDACTED","REDACTED");
$db = mysqli_select_db($conn, "highlown_REDACTED");
$query = mysqli_query($conn, "SELECT * FROM images");
$rows = mysqli_num_rows($query);
mysqli_close($conn);
?>
Then how I have attempted to include it within the Gallery
<?php
for ($i=1;$i<$rows;$i++) {
$row = mysqli_fetch_assoc($query);
?>
<div class="carousel-item">
<div class="view" style="background-image: url('http://www.URL.org/gallery/img/upload/<?php echo htmlspecialchars($row['directory']); ?>'); background-repeat: no-repeat; background-size: cover;">
<!-- Mask & flexbox options-->
<div class="mask rgba-black-light d-flex justify-content-center align-items-center">
</div>
<!-- Mask & flexbox options-->
</div>
</div>
<?php
}
?>
I don't really need an explanation on how the stuff works, I just want a correction, please. I will let you know if your answer works or not.
Many Thanks, Ethan B.
PS, if you need more information, let me know.

Add a unique style class to each mySQL entry on page?

I have a php function to retrieve the three most recent entries to a table that holds news highlights. Here is my function:
function getHighlights(){
return $this->query("
SELECT *
FROM `highlights`
ORDER BY `inserted` DESC
LIMIT 3
");
}
These highlights are then placed on my homepage via a foreach loop. Here is my code:
<?php foreach($highlights as $a){ ?>
<div class="col-md-6 highlight">
<div class="highlightItem">
<img class="highlight-backdrop" src="<?=$a->backdrop;?>">
<p class="highlight-title"><?=$a->title;?></p>
</div>
</div>
<?php } ?>
I'd like for my homepage to ALWAYS be in this format:
News Highlight Format. However, the only reason it's in that format right now is because the images have predefined sizes that fit nicely together.
I want to be able to reference the most recent news highlight and set that image to always display as 300 x 210. I also want to reference the next two highlights and set them to always display as 300 x 100.
What's the best course of action for this?
<?php foreach($highlights as $index => $a){ ?>
if($index == 0){
<div class="col-md-6 highlight">
<div class="highlightItem">
<img width="300" height="210" class="highlight-backdrop" src="<?=$a->backdrop;?>">
<p class="highlight-title"><?=$a->title;?></p>
</div>
</div>
}else{
<div class="col-md-6 highlight">
<div class="highlightItem">
<img width="300" height="100" class="highlight-backdrop" src="<?=$a->backdrop;?>">
<p class="highlight-title"><?=$a->title;?></p>
</div>
</div>
}
<?php } ?>
try to use that code

get two paths of images from database and loop them to display in slider

Im little bit stuck on a logic.scenario is i have a slider where two images are shown at a time taking 50%-50% part of screen,here is the simple html of it,
<div class="zeus-slider zeus-default" >
<div class="zeus-block">
<div class="zeus-slide s-50"> <img src="slider/slider1.jpg" data-effect="slideRight" alt="" /> </div>
<div class="zeus-slide s-50"> <img src="slider/slider2.jpg" data-effect="slideRight" alt="" /> </div>
</div>
</div>
here every block contains two images i have shown only one.now i have trying to make it dynamic, but i didnt get any idea how it will work, so i created database with two tables, each for individual image in a single block.Both table have fields like simg_id(A_I),img_name,simg_path.
here its my php on slider page.
<div class="zeus-block">
<?php
$slider_slt=getResultSet('select * from slider_img_master1 ORDER BY simg_id');
if(mysql_num_rows($slider_slt))
{
while($slider_data=mysql_fetch_assoc($slider_slt))
{
?>
<div class="zeus-slide s-50"> <img src="slider/first/<?php echo $slider_data['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
<?php
$slider_slt2=getResultSet('select * from slider_img_master2 ORDER BY simg_id');
if(mysql_num_rows($slider_slt2))
{
while($slider_data2=mysql_fetch_assoc($slider_slt2))
{
?>
<div class="zeus-slide s-50"> <img src="slider/second/<?php echo $slider_data2['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
</div>
now the problem is when i try to fetch path of image in slider, images are not changing one by one on both half of screen.instead it showing like both images from from both table top, another two images from both tables below 1st both, and so on , so full page is covered with images.
I know this idea of creating two tables for getting two images at once is silly,but i could not think any better.if any one can suggest any better way, it would be so helpful.
Update:getResultSet is function for mysql_query.
if anybody interested i found an answer for above question.
<div id="slide1" >
<div class="zeus-slider zeus-default" >
<?php
$slider_str="select *from slider_img_master1 where simg_status='Active'";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
echo '<div class="zeus-block">';
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
echo '<div class="zeus-block">';
}
?>
<div class="zeus-slide s-50"> <img src="slider/<?php echo $row['simg_path'];?>" data-effect="slideRight" alt="" /> </div>
<?php
if($i%2==0)
{
echo '</div>';
}
$i++;
}
} ?>
</div>
<div class="clear"> </div>
<div class="next-block"> </div>
<div class="prev-block"> </div>
</div>

Show title when I hover image connected to mysql using php

I want to show the image title when hovered to the image connected to mysql using php.
Here are the code I used.
<div class="galleryko">
<?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?>
<div class="lalagyan1">
<?php while($row = mysql_fetch_assoc($data)):?>
<div class="lalagyan">
<div id="wew">
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/></br>
</div>
</div>
<?php endwhile?>
</div>
</div>
Then I tried to insert a TITLE inside the code of
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/></br>
But when I hover the images after I did, what happened was, all images are entitled with SOMETEXT, Now I want to show the TITLE of an IMAGE seperately.
Some one please solve my problem,. Thank you in advance! :)
Remove title="SOMETEXT" and add something like this to img tag alt="$row['title']"
<img src="admin/featured/<?php echo $row['photo']?>" style="width:150px; height: 150px;"/>

Categories