I am building a product listing page with thumbnails using bootstrap3. And I want to use a thumbnail from Bootstrap which in turn bootstarp also using Holder.js. I have read documentation here and also here.
They all talk about this syntax: after you load js file.
<img src="holder.js/200x300">
I have tried to inspect and look that where and how the image source are retrieved, since I want to load that using a foreach in PHP.
Here my inspection result:
So ,as you can see from the image, there is a data:svg... something which I didn't understand.
To wrap up my question:
How do load images using hodelr.js?
Is there conversion needed for all images to be seen on thumbnails view?
Where can Hodler.js retrieve images and how could you do it dynamically?
I have the following I didn't see any svg:generated:
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="100%x200" class="img-thumbnail img-responsive" src="../assets/images/products/ring.jpg" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Button Button</p>
</div>
</div>
Thank you so much!
<img src="holder.js/200x300">
Holder.js is an image placeholders. It render the code as image.
Change your code to real image as below and set the the sizes.
<img src="you image path + image " width="200" height="300">
<img src="images/apple.jpg" width="200" height="300">
Related
im working on my crud skills, but im having some trouble. the first page shows a list of all blog posts, when the user clicks on read more it sends the specific posts id through the url and is recieved by the destination page which uses that id to display the single post/ heres the code for that part. it actually works fine
function display_single_post($title,$author,$date,$image,$content){
$main_page_blog_html = "<h2>
<a href='#'>%s</a>
</h2>
<p class='lead'>
by <a href='index.php'>%s</a>
</p>
<p><span class='glyphicon glyphicon-time'></span> Posted on %s</p>
<hr>
<img class='img-responsive' src='images/%s'>
<hr>
<p>%s</p>
<hr>
<hr>";
printf("{$main_page_blog_html}",$title,$author,$date,$image,$content);
if(isset($_GET["id"])){
$id = $_GET["id"];
$stmt = $connect->link->query("SELECT * FROM posts WHERE post_id = $id");
while($row = $stmt->fetch()){
$post_title = $row["post_title"];
$post_author = $row["post_author"];
$post_date = date('F j, Y \a\t g:ia', strtotime( $row["post_date"] ));
$post_image = $row["post_image"];
$post_content = $row["post_content"];
$id = $row["post_id"];
display_single_post($post_title,$post_author,$post_date,$post_image,$post_content);
}
}
like i said this all works fine. the get value is recieved and loads the post. the problem is when i try to use that $_get id in a query to insert a comment. all this code is on the one page im just showing the php without the html. anyway heres the code to insert the comment
if(isset($_POST["create_comment"])){
global $connect;
$post_id = $_GET["id"];
$comment_author = $_POST["comment_author"];
$author_email = $_POST["author_email"];
$comment_content = $_POST["comment_content"];
$comment_status = "pending";
edit with all the code
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="page-header">
Page Heading
<small>Secondary Text</small>
</h1>
<!-- First Blog Post -->
<?php
$connect = new db();
if(isset($_POST["create_comment"])){
global $connect;
echo "hello";
$post_id = $_GET["id"];
$comment_author = $_POST["comment_author"];
$author_email = $_POST["author_email"];
$comment_content = $_POST["comment_content"];
$comment_status = "pending";
$sql = "INSERT INTO comments(comment_post_id, comment_author, comment_email, comment_content, comment_status)
VALUES(:a,:b,:c,:d,:e)";
$stmt = $connect->link->prepare($sql);
$stmt->bindvalue(":a",$post_id);
$stmt->bindvalue(":b", $comment_author);
$stmt->bindvalue(":c",$author_email);
$stmt->bindvalue(":d",$comment_content);
$stmt->bindvalue(":e",$comment_status);
$stmt->execute();
}
function display_single_post($title,$author,$date,$image,$content){
$main_page_blog_html = "<h2>
<a href='#'>%s</a>
</h2>
<p class='lead'>
by <a href='index.php'>%s</a>
</p>
<p><span class='glyphicon glyphicon-time'></span> Posted on %s</p>
<hr>
<img class='img-responsive' src='images/%s'>
<hr>
<p>%s</p>
<hr>
<hr>";
printf("{$main_page_blog_html}",$title,$author,$date,$image,$content);
}
if(isset($_GET["id"])){
$id = $_GET["id"];
$stmt = $connect->link->query("SELECT * FROM posts WHERE post_id = $id");
while($row = $stmt->fetch()){
$post_title = $row["post_title"];
$post_author = $row["post_author"];
$post_date = date('F j, Y \a\t g:ia', strtotime( $row["post_date"] ));
$post_image = $row["post_image"];
$post_content = $row["post_content"];
$id = $row["post_id"];
display_single_post($post_title,$post_author,$post_date,$post_image,$post_content);
}
}
?>
<hr>
<!-- Blog Comments -->
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form" method="post" action="post.php">
<div class="form-group">
<input type="text" class="form-control" name="comment_author" placeholder="name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="author_email" placeholder="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="3" name="comment_content"></textarea>
</div>
<button type="submit" name="create_comment" class="btn btn-primary">Submit</button>
</form>
</div>
<hr>
<!-- Posted Comments -->
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<!-- Nested Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Nested Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- End Nested Comment -->
</div>
</div>
</div>
Based on your code and your comments, I assume the page is called post.php and when you first reach the page it has the id on the url like this: post.php?id=156.
But once you submit the comments' form, since the action for said form it is simply post.php you're losing the id.
You could add the id on the action after post:
<form role="form" method="post" action="post.php?id=<?php echo $id; ?>">
or add a hidden input with the id:
<input type="hidden" name="id" value="<?php echo $id; ?>">
But then you'd have to reach it with $_POST
Another option is to use the SELF for the action like this:
<form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
This will retain the id but also any other get variables you may have on the url.
//EDIT
This is a simplification of the probelm which is working, if you visit post.php?id=456 (or any number) and then press Submit, you get the proper response:
<!-- First Blog Post -->
<?php
if(isset($_POST["create_comment"])){
$post_id = $_GET["id"];
echo "The id is: $post_id";
// gets comment and inserts into the db
}
if(isset($_GET["id"])){
$id = $_GET["id"];
// calls display_single_post
}
?>
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form" method="post" action="post.php?id=<?php echo $id; ?>">
<button type="submit" name="create_comment" class="btn btn-primary">Submit</button>
</form>
</div>
I am trying to display the code of a php file as plain html. This is all going well except for that fact that I would like it to 'open up' the <?php require 'Main_content_bar.php'; ?> statements aswell.
So far I have show_source($page); correctly working.
It currently prints:
<?php require 'Main_content_bar.php'; ?>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Property</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
</div>
<div class="row">
<div class="col-md-12">
<h2>Current properties</h2>
</div>
</div>
<div class="footer">
<p><a href="Source_code.php" target="_blank"> <img src="Images/codebutton<?php echo $page_lower;?>.jpg" alt="<?php echo $page;?> Source"> </img>
</a></p>
<p>© Robin B'stards Retail 2014</p>
</div>
</body>
</html>
However, as one can see, the contents of the require statements do not show. I cannot for the life of me work out how to do this.
So what it would end up looking like is something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>-->
<!-- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>-->
<link href="justified-nav.css" rel="stylesheet">
<script>
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.nav a[href*="'+page+'"]').parent().addClass('active');
});
</script>
</head>
<body>
<div class="container" style="width: 1263px">
<div class="masthead">
<h3 class="text-muted">Ruthless Real Estate</h3>
<ul class="nav nav-justified">
<li class="menu">Property</li>
<li class="menu">Client</li>
<li class="menu">Type</li>
<li class="menu">Feature</li>
<li class="menu">Multiple Properties</li>
<li class="menu">Property Features</li>
<li class="menu">Images</li>
</ul>
</div>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Property</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
</div>
<div class="row">
<div class="col-md-12">
<h2>Current properties</h2>
</div>
</div>
<div class="footer">
<p><a href="Source_code.php" target="_blank"> <img src="Images/codebutton<?php echo $page_lower;?>.jpg" alt="<?php echo $page;?> Source"> </img>
</a></p>
<p>© Robin B'stards Retail 2014</p>
</div>
</body>
</html>
Note the lack of require statements
You cannot do that with show_source, which just "show some code sources" of a file.
You need to create your own function which take a filename in argument, then you have to analyze the source like this:
replace all require/include/require_once/include_once (what do I forget?) by their own content
make the function recursive (because Main_content_bar.php can have other include inside it)
Use highlight_string at the end of your function.
EDIT to search & replace, one way (there is several) is to use preg_match_all. That part of the code would look like this :
$new_content = file_get_contents('your-file.php');
$base_path = __DIR__.'/';
// pattern to find require, require_once, include, include_once functions
// and catch their arguments
$pattern = "#<\?php (?:require|include(?:_once)?)\s*'(.*)'; \?>#u";
if (preg_match_all($pattern, $new_content, $matches))
{
foreach($matches[0] as $pattern_index => $full_pattern)
{
$file = $matches[1][$pattern_index];
$subcontent = file_get_contents($base_path.$matches[$pattern_index]);
$new_content = str_replace($new_content, $full_pattern, $subcontent);
}
}
highlight_string($new_content);
I am trying to converting this line of hard coded images into a dynamic code by using mysql to retrieve it.
<div class="item-block-1">
<span class="tag-sale"></span>
<div class="image-wrapper">
<div class="image">
<div class="overlay">
<div class="position">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
Quick shop
</div>
</div>
</div>
<img src="images/photos/photo-3.jpg" style="margin: -32.5px 0 0 0;" alt="" />
</div>
</div>
<h2>Polka dot light blue blouse</h2>
<p class="price">$13.99<s>$36.99</s></p>
</div>
My dynamic code is as follow but it only allows me to retrieve only one image instead of looping through the codes..
<div class="item-block-1">
<div class="image-wrapper">
<div class="image">
<div class="overlay">
<div class="position">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
Quick shop
</div>
</div>
</div>
<?php
$result = mysql_query("SELECT * FROM my_image", $connection);
while($row = mysql_fetch_array($result))
{
echo "<div><img src=\"uploadedimages/".$row['name']."\" /></div>";
}
?>
</div>
</div>
Can anyone correct me ?
Try this code
<?php
$result = mysql_query("SELECT * FROM my_image");
?>
<div class="item-block-1">
<div class="image-wrapper">
<div class="image">
<div class="overlay">
<div class="position">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
Quick shop
</div>
</div>
</div>
<?php
while($row = mysql_fetch_array($result))
{
?>
<div>
<img src="new/<?php echo $row['name']; ?>"/>
</div>
<?php
}
?>
</div>
</div>
</div>
Since you're up for suggestions
<?php
/*
* I usually put this in a class, but doing this all in-line for you.
* I did this with PDO, which is just like mysql_, but better.
*/
$db_name = ''; // put your database name here
$db_host = ''; // your host name, usually localhost
$db_username = ''; // the database username used to access this database
$db_password = ''; // password associated with the username
$dsn = 'mysql:dbname='.$db_name.';host='.$db_host; // this is for the PDO object
$PDO = new PDO($dsn, $db_username, $db_password);
$query = 'SELECT * FROM my_image';
$Stmt = $PDO->prepare($query); // prepares your SQL
$Stmt->execute() // runs your SQL
// This will test to see if you get any images back from your database
if ($Stmt->rowCount() > 0) {
/*
* This means you have atleast 1 image back from your database
* The wile loop will iterate through your images from the database
* and generate the HTML below for each, only changing the name of the file
* on each iteration
*/
while ($row = $Stmt->fetch(PDO::FETCH_ASSOC)) {
echo '<div class="item-block-1">';
echo '<div class="image-wrapper">';
echo '<div class="image">';
echo '<div class="overlay">';
echo '<div class="position">';
echo '<div>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>';
echo 'Quick shop';
echo '</div>';
echo '</div>'; // class="position" div
echo '</div>'; // class="overlay" div
echo '<div><img src="uploadedimages/'.$row['name'].'" /></div>'; // This is the actual image
echo '</div>'; // class="image" div
echo '</div>'; // class="image-wrapper" div
echo '</div>'; // class="image-block-1" div
}
}
Of course this is not how to properly do this, but if you were to do it in-line like this, it would be this way. the while loop will generate the SAME html for every image, except for the image file path, which changes depending on the current row your in in the while loop.
Hi Im developng an hotel search website where client can search for hotel... I have developed my backend where hotel can update the details into my database... now im stuck with my front end where client can see my database based upon there search criteria. In php i do know how to display data in in table but unable to get my head stright in html div... I want to understand would i can display database instent of table... What all the coding required to get such resulte... Please click on my below link and you would understand how i want to display in result
http://hotel.makemytrip.com/makemytrip/site/hotels/search?session_cId=1388679988524&city=BOM&country=IN&checkin=01042014&checkout=01062014&area=South%20Mumbai&roomStayQualifier=1e0e&type=&sortName=
<div class="offset-2">
<div class="col-md-4 offset-0">
<div class="listitem2">
<img src="images/items/item7.jpg" alt=""/>
<div class="liover"></div>
<a class="fav-icon" href="#"></a>
<a class="book-icon" href="details.html"></a>
</div>
</div>
<div class="col-md-8 offset-0">
<div class="itemlabel3">
<div class="labelright">
<img src="images/filter-rating-5.png" width="60" alt=""/><br/><br/><br/>
<img src="images/user-rating-5.png" width="60" alt=""/><br/>
<span class="size11 grey">18 Reviews</span><br/><br/>
<span class="green size18"><b>$36.00</b></span><br/>
<span class="size11 grey">avg/night</span><br/><br/><br/>
<form action="http://demo.titanicthemes.com/travel/details.html">
<button class="bookbtn mt1" type="submit">Book</button>
</form>
</div>
<div class="labelleft2">
<b>Mabely Grand Hotel</b><br/><br/><br/>
<p class="grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec semper lectus. Suspendisse placerat enim mauris, eget lobortis nisi egestas et.
Donec elementum metus et mi aliquam eleifend. Suspendisse volutpat egestas rhoncus.</p><br/>
<ul class="hotelpreferences">
<li class="icohp-internet"></li>
<li class="icohp-air"></li>
<li class="icohp-pool"></li>
<li class="icohp-childcare"></li>
<li class="icohp-fitness"></li>
<li class="icohp-breakfast"></li>
<li class="icohp-parking"></li>
<li class="icohp-pets"></li>
<li class="icohp-spa"></li>
</ul>
</div>
</div>
</div>
</div>
It is simple as you do it using the tables. Tables are used only because they already formatted so the output is clear means you can display different data in different rows by using or different columns using
You can also print the data in the divs same things as you follow in a table. If you have problems using the divs go through some tutorials for divs or you can still do it using the tables just give it proper styling using CSS.
I'm Stuck on below code... Accroding to my understanding below code should display all the rows data which has been created in my database... But im getting only 1 row data in result only one product on my product page... Please help...
<?php
include 'core/database/connect.php';
include 'core/includes/listhead.php';
$dynamiclist = "";
$sql = mysql_query("SELECT * FROM `index` ORDER BY price1 LIMIT 2");
$hotelcount = mysql_num_rows($sql);
if($hotelcount > 0) {
while($row = mysql_fetch_array($sql)) {
$id = $row['index_id'];
$pic = $row['main_pic'];
$country = $row['country1'];
$destination = $row['destination1'];
$price = $row["price1"];
$dynamiclist = '<div class=/"offset-2/">
<div class="col-md-4 offset-0">
<div class="listitem2">
<img src="'. $pic .'" alt=""/>
<div class="liover"></div>
<a class="fav-icon" href="#"></a>
<a class="book-icon" href="details.html"></a>
</div>
</div>
<div class="col-md-8 offset-0">
<div class="itemlabel3">
<div class="labelright">
<img src="images/filter-rating-5.png" width="60" alt=""/><br/><br/><br/>
<img src="images/user-rating-5.png" width="60" alt=""/><br/>
<span class="size11 grey">18 Reviews</span><br/><br/>
<span class="green size18"><b>'. $price .'</b></span><br/>
<span class="size11 grey">Avg/Night</span><br/><br/><br/>
<form action="http://demo.titanicthemes.com/travel/details.html">
<button class="bookbtn mt1" type="submit">Book</button>
</form>
</div>
<div class="labelleft2">
<b>'. $country .'</b><br/><br/><br/>
<p class="grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec semper lectus. Suspendisse placerat enim mauris, eget lobortis nisi egestas et.
Donec elementum metus et mi aliquam eleifend. Suspendisse volutpat egestas rhoncus.</p><br/>
<ul class="hotelpreferences">
<li class="icohp-internet"></li>
<li class="icohp-air"></li>
<li class="icohp-pool"></li>
<li class="icohp-childcare"></li>
<li class="icohp-fitness"></li>
<li class="icohp-breakfast"></li>
<li class="icohp-parking"></li>
<li class="icohp-pets"></li>
<li class="icohp-spa"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="offset-2"><hr class="featurette-divider3"></div>';
}
} else {
$dynamiclist = 'We Do Not Have Any Hotel Listed in This City';
}
?>
<?php echo $dynamiclist ?>
<?php include 'core/includes/listfooter.php'; ?>
You have two issues
Your database query is limited to 2 items (although that doesn't explain the 1 item problem you have at the moment)
removing LIMIT 2 will fix this
Secondly
$dynamiclist = '<div class=/"offset-2/">
the "=" sign means that you set it as the content each time.
This is fine except you echo it OUTSIDE your while loop
either echo it within your while loop or change it to
$dynamiclist .= '<div class=/"offset-2/">
notice the .= -> that Adds items to the end of the string.
Hope that helps
Change the
$dynamiclist = '<div class=/"offset-2/">
to
$dynamiclist .= '<div class=/"offset-2/">
If you want to load all rows, remove 'LIMIT' from your query.