I tried to list blob from MySQL using PHP, but images are not showing. I checked on the source page, source page result are given below.
data-url="<?php echo $eachImage; ?>" & data-thumbnail-path="<?php echo $eachImage; ?>" here I am expecting path. In view source page this section is showing some encripted data.
How can I get the image path from blob file?
<?php foreach ($this->carousel as $carousel): ?>
<?php
if ($carousel['title'] == 'service') {
$rs = Database::getInstance()
->query("SELECT * FROM tl_carousel WHERE title = 'service' ");
$result = $rs->fetchAllAssoc();
$images = deserialize( $carousel['themesSRC'] );
foreach ($images as $eachImage)
{
?>
<ul>
<li data-url="<?php echo $eachImage; ?>" data-width="800" data-height="500"></li>
<li data-thumbnail-path="<?php echo $eachImage; ?>"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="43" data-thumbnail-text-offset-top="16" data-thumbnail-text-offset-bottom="7">
<!-- <p class="largeLabel">CUSTOM TEXT CAN BE ADDED HERE</p> -->
<p class="smallLabel"><?php echo $carousel['title']; ?></p>
</li>
<li data-info="">
<!-- <p class="mediaDescriptionHeader">CUSTOM TEXT CAN BE ADDED HERE AND FORMATTED WITH CSS</p> -->
<p class="mediaDescriptionText"><?php echo $carousel['title']; ?></p>
</li>
</ul>
<?php
}
}
?>
<?php endforeach; ?>
View source Result
Basically, to access images from blob, you use :
<img src="data:image/jpeg;base64,'.base64_encode($eachImage).'"/>
-> image/png for a png, or image/jpeg for a jpeg
Related (don't know if you'll need it, but worth reading)
Image Processing and Generation
Related
am having an issue displaying images stored as blob in my database, as the images doesn't display rather is shows crazy characters and symbols, i tried to change the tags for the php but with no avail. Help and here is my code: Note that i want all types of images to be saved as blob (jpg, jpeg, gif, svg, png) - thanks in advance
<?php
include 'include/connect.php';
$sql = "SELECT * FROM room_details ORDER BY id ASC LIMIT 2, 1;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="room-thumb"><?php echo '<img alt="room 3" class="img-responsive" src="data:image;base64,'.$row['image'].'">'; ?>
<div class="mask">
<div class="main">
<h5><?= $row['room_type']; ?></h5>
<div class="price"><?= $row['room_name']; ?><span>a night</span></div>
</div>
Read More
</div>
</div>
} ?>
Since the blob url is decoded with base64, you need to encode it first. You can use either JavaScript or PHP to do this.
JavaScript:
With JavaScript, you can just use the atob() function to encode your base64 url like this:
<script>
var x = <?php echo $row['image'] ?>
document.getELementById("code").innerHTML = atob(x);
</script>
<div class="room-thumb"><?php echo '<img alt="room 3" class="img-responsive" src="data:image;base64,' ?><span id="code"></span><?php echo '">'; ?>
<!-- DIV CONTENT HERE -->
</div>
However, as stated in this other SO thread, it would be a better approach if you use PHP itself or other JavaScript approaches (mentioned in that same thread) to retrieve and encode the base64 url as the above approach is not secure.
PHP:
With PHP, you can either encode the base64 url before outputting it into your HTML like this:
<?php echo '<img alt="room 3" class="img-responsive" src="data:image;base64,' . base64_encode(.$row['image']).'">'; ?>
Or you can create a new php file, encode the PHP in that file and then echo the encoded base64 url to your HTML like this:
<!-- PHP file -->
<?php
$id = (isset($_GET['id']) && is_numeric($_GET['id'])) ? intval($_GET['id']) : 0;
$image = base64_encode(getImageFromDatabase($id)); // your code to fetch the image
header('Content-Type: image/jpeg');
echo $image;
?>
<!-- HTML -->
<img src="image.php?id=<?php echo $image_id; ?>" />
Check out the accepted answer in this other SO thread for a more in-depth explanation of the above two PHP approaches.
I need some help, I have a repeat region which displays pics from a database, when I click on the image I would like to go to another page where there is a photo gallery to display my pictures bigger.
My problem, no matter which thumb I click I get the same set of pictures from the database, which is usually the last thumb listed.
I am new to php, so i am wondering if anyone can help me, thank you.
Code for thumb page
`
<?php do { ?>
<div class="display-property-pic">
<input type="image" id="imageIn1" src="upload/images/<?php echo $row_repeatRegion['thumb']; ?>" alt="Submit" width="100" height="100" ><input name="picHid" type="hidden" value="<?php echo $row_repeatRegion['property_pic1']; ?>">
</div>
<?php } while ($row_repeatRegion = mysqli_fetch_assoc($repeatRegion)); ?>
`
Code for Gallery page
if(isset($_POST['picHid'])){
$pic = $_POST['picHid'];
}
mysqli_select_db($wiplisttest, $database_wiplisttest);
$query_getPics = "SELECT photos.photo_id, photos.pic1, photos.pic2, photos.pic3 FROM photos WHERE photos.property_pic1 LIKE '%$pic%'";
$getPics = mysqli_query($wiplisttest, $query_getPics) or die(mysql_error($wiplisttest));
$row_getPics = mysqli_fetch_assoc($getPics);
$totalRows_getPics = mysqli_num_rows($getPics);
<div class="album">
<div class="description">fixed images</div>
<ol>
<?php do { ?>
<li>
<h4><?php echo "Pic"." ".$row_getPics['pic3']; ?></h4>
<div class="description">Salzburg, Austria</div>
<a href="upload/images/<?php echo $row_getPics['pic3']; ?>">
<img src="upload/images/<?php echo $row_getPics['pic2']; ?>" />
</a>
</li>
<?php } while ($row_getPics = mysqli_fetch_assoc($getPics)); ?>
</ol>
</div>
As you have stored images info in database, there should be id assigned to each image, so when you click on any specific image, get id of that image and retrieve that image on another page using the id.
I can display images in html form like below..here these images are in images folder
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li><a class="thumb" href="images/disease1.jpg" title="Title #0">Title #0</a></li>
<li><a class="thumb" href="images/disease2.jpg" title="Title #1">Title #1</a></li>
</ul>
<div>
But I want to display images in php file by getting imagges from the database according to above format.my mysql database has more than 1 images for an id.so I want to dispay images according to the id.
Below is what I've tried. Here's my PHP file:
<?php
$value=$_GET['val'];
$set_photos=mysql_query("SELECT * from photos where idProblem='$value'",$connection);
if(!$set_prob) {
die("database query failed".mysql_error());
}
$num_photos=mysql_num_rows($set_photos);
for($i=1;$i<=$num_photos;$i++) {
$get_photos='<div id="thumbs"><li><a class=\"thumb"\ href=\".$photo."\ title=\"Title.$i."\>photo </a></li></div>';
}
?>
This is the PHP file where I'm trying to display the images by running the above PHP file:
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<?php echo $get_photos; ?></ul></div>
I'm trying to find out what's wrong here. How can solve this issue?
Hi try below code it solve your issue :)
<?php
$value=$_GET['val'];
$set_photos = mysql_query("SELECT * from photos where idProblem='".$value."'", $connection);
$liList = '';
$ind = 0;
if(mysql_num_rows($set_photos))
{
while($row = mysql_fetch_assoc($set_photos))
{
$liList .= '<li><a class="thumb" href="'.$row['YOUR_IMAGE_PATH_FIELD_NAME'].'" title="Title #'.$ind.'">Title #'.$ind.'</a></li>';
$ind++;
}
}
?>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<?php echo $liList; ?>
</ul>
</div>
If I understand correctly you need to display them as you pull them out of the database:
This is simply overwriting the variable $get_photos
for($i=1;$i<=$num_photos;$i++) {
$get_photos='
<div id="thumbs">
<li>
<a class=\"thumb"\ href=\".$photo."\ title=\"Title.$i."\>photo </a>
</li>
</div>';
}
Change to:
echo '<div id="thumbs" class="navigation"><ul class="thumbs noscript">';
for($i=1;$i<=$num_photos;$i++) {
echo '<li><a class="thumb" href="'.$photo.'" title="Title'.$i.'">photo </a></li>';
}
echo '</ul></div>';
Check if the query returns rows, because it seems that for statement is not executing
I have a PHP and a jQuery script that I use to display a few images. A large image on the left side and 4 thumbnails on the right side. Each time the user clicks an image-thumbnail it will show up on the large image placeholder on the left side.
This is the PHP code I'm using to display the large image and thumbnails:
<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
</li>
<?php endforeach; ?>
This is the jQuery I'm using to update the large image when an user clicks on any thumbnail-image:
jQuery(document).ready(function($){
// handle the click of thumbnail images
// redirect it to change the main image
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href");
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
return false;
});
// preload the large images
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// populate the list of images to load
preload(images);
});
Everything works fine in this setup but I also need to display below the main large-image its title and description. This is the code I'm using:
<div class="container-title-description">
<div class="title"><?php echo $current->alttext ?></div>
<div class="descripton"><?php echo $current->caption ?></div>
</div>
The problem is this: if I add this code inside the foreach loop I get the title and description below each thumbnail-image. If I add this code outside the foreach loop when the main image changes the title and description will stay the same. How can I solve this?
You can view how this setup looks like on this website.
You already add the title and description as hidden title attributes inside the anchor element, so just extract them and update the HTML on demand:
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href"),
desc = $(this).attr('title'),
title = $(this).find('img').attr('title');
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
$('.container-title-description .title').text(title);
$('.container-title-description .description').text(desc);
return false;
});
Initial HTML (outside your foreach loop):
<div class="container-title-description">
<p class="title"></p>
<p class="description"></p>
</div>
I am trying to load pictures from database to jquery slider
infact what is stored at database is the name of the picture
i implemented this code, it's working without errors but it showing me nothing at slider all is empty
<div id="slider">
<?php
while ($result = mysqli_fetch_object($banner)):
?>
<img src="images/banner/<? $banner['picture'];?>/" width="950" height="400"alt="" title="<strong><? echo $banner['title'];?></strong><span><? echo $banner['description'];?> </span>" />
<?php
endwhile
?>
</div>
name of the table at database is banner in which i have id(INT), picture(varchar 50) title(varchar(100), description(longblob)
query is working and returning number of selected rows
but nothing is shown
You need to echo the result rather than just use the variable...
<div id="slider">
<?php
while ($result = mysqli_fetch_object($banner)):
?>
<img src="images/banner/<?php echo $banner['picture'];?>" width="950" height="400" alt="" title="<strong><? echo $banner['title'];?></strong><span><?php echo $banner['description'];?></span>" />
<?php
endwhile;
?>
</div>