php search result images show across and fill a CSS div - php

I'm using dreamweaver and php to return a list of images based on search critiera.
I have used Dreamweaver's repeat function and can get the images to repeat below each other (as below).
<table width="100" height="38" border="1">
<?php do { ?>
<tr>
<td width="38">
<img class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/><br>
</a></td></tr>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation));
?>
</table>
How can I get the images to go across from each other within a CSS Div e.g. float:left; width:45%; so that if there are more images than what would fit in 45%, the images would continue onto a new line?
Would somehow 'printing' the array work?

Remove the table and replace with
<div style='width:45%'>
<?php do{ ?>
<img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
</div>
or for a more semantic version use a ul since you are showing a list of images.
<ul class='gallery'>
<?php do{ ?>
<li><img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/></li>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
</ul>
and in css
ul.gallery {
width: 45%;
list-style: none;
margin:0; padding:0;
}
ul.gallery li {
float:left;
padding: 5px;
}

Related

CSS Data-Badge, Value not appearing from database

I have this list in welcome.php
<li>
<img src="images/referral.png" > Referral
</li>
Here I am trying to populate the circle with value from database. I am getting the right value, but its not appearing in the circle. Pardon my CSS please.
Copied this code from here http://www.cssportal.com/blog/create-css-notification-badge/
In the same welcome.php, CSS code is
.badge1 {
position:relative;
}
.badge1[data-badge]:before {
content:attr(data-badge);
position:absolute;
top:0px;
right:0px;
font-size:.7em;
background:green;
color:white;
width:18px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #211;
}
The php value I am trying to echo here comes from a php block after this code.
Code is:
<html><li>
<a href="#" class="badge1" data-badge="<?php echo "$row_cnt"; ?>" value = "
<?php echo "$row_cnt"; ?>"><img src="images/referral.png" > Referral</a>
</li>
</html>
<?php
// Get $row_cnt
?>
So how do I access this $row_cnt value above?
Any help would be helpful.
Remove quotation marks:
<?php echo $row_cnt; ?>
or even
<?=$row_cnt?>
You can not put " inside " so use the escape \ before it
or remove it in echo before the variable

get first object from result array php

I have view file on my app there is code array I want to get first object of that array without going in loop.
<?php
$result = array_chunk($products->result_array(), 3);
foreach($result as $products){ ?>
<table style="width:100% style="page-break-after:always;" >
<tr>
<?php
foreach($products as $productArray){
$product = (object) $productArray;
echo '<td>';
?>
<div style="width: 100%; height: 210px; border: 1px solid #dddddd; margin: auto 5px 5px 0; padding: 5px;">
<div class="box-header">
<p class="box-title"><FONT SIZE=12><?php echo $product->product_name; ?></FONT></p>
</div>
<div style="height: 100px; text-align: center;">
<?php echo '<img src="'.'uploads/'. $product->photo.'" class="img-responsive" style="height:100px !important; width: 150px !important" />'; ?>
</div>
<div style="clear: both"></div>
<table class="table table-responsive">
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
$result is array of object I'm getting from a form. In below you can clearly see I'm chunking it to 3 more array and looping though individual objects and getting their details to html for example.
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
I want to get the first object details let's say want get $product->product_name of first object of result array without going in loop how to achieve that.
here is complete view file code.
<!DOCTYPE html>
<html class="bg-black">
<head>
<meta charset="UTF-8">
<title><?php if(isset($title)) echo $title.' | '; ?> Sales agent management software (SAMS) </title>
<style>
body{
font-size: 9px;
margin: 20px;
}
th,td,p,div,table,h3{margin:0;padding:0}
#page { margin: 20px; }
.header{
border-bottom: 0px solid #dddddd;
text-align: center;
position: fixed; top: 0;
}
.footer { position: fixed; bottom: 0px; text-align: center }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<?php
$usd = get_option('lkr_per_usd', 134);
?>
<div class="footer">
Page: <span class="pagenum"></span>, creation time : <?php echo date('l jS \of F Y h:i:s A') ?>, create by: <?php echo user_full_name(singleDbTableRow(loggedInUserData()['user_id'])); ?>, $ Rate : Rs. <?php echo $usd; ?> </div>
<br />
<div class="box-body">
<?php
$usd = get_option('lkr_per_usd', 134);
?>
<?php
$result = array_chunk($products->result_array(), 3);
foreach($result as $products){ ?>
<table style="width:100% style="page-break-after:always;" >
<tr>
<?php
foreach($products as $productArray){
$product = (object) $productArray;
echo '<td>';
?>
<div style="width: 100%; height: 210px; border: 1px solid #dddddd; margin: auto 5px 5px 0; padding: 5px;">
<div class="box-header">
<p class="box-title"><FONT SIZE=12><?php echo $product->product_name; ?></FONT></p>
</div>
<div style="height: 100px; text-align: center;">
<?php echo '<img src="'.'uploads/'. $product->photo.'" class="img-responsive" style="height:100px !important; width: 150px !important" />'; ?>
</div>
<div style="clear: both"></div>
<table class="table table-responsive">
<tr>
<th><FONT SIZE=12>ID</FONT></th>
<td><FONT SIZE=14><?php echo $product->product_id; ?></FONT></td>
</tr>
<tr>
<th><FONT SIZE=12>LKR</FONT></th>
<td><FONT SIZE=14><?php $lkr = get_selling_price($product);
echo number_format(round($lkr, get_option('round_precision')) ); ?></FONT>
</td>
</tr>
<tr>
<th> <FONT SIZE=12>US $</FONT></th>
<td><FONT SIZE=14><?php echo number_format(round(lkr_to_usd($lkr), get_option('round_precision')) ); ?></FONT></td>
</tr>
</table>
<?php $GLOBALS['a']= $product->product_id; ?>
</div>
</td>
<?php } ?>
</tr>
<?php } ?>
</table>
</div><!-- /.box-body -->
</body>
</body>
</html>
ok man as i said u need to change your way of writing codes but about your specific question use this:
$result = array('a', 'b', 'c', 'd', 'e');
reset($array);
$first = current($array);
you can check this:
http://php.net/manual/en/function.reset.php
http://php.net/manual/en/function.current.php
But still about your way of coding. u should soon go to MVC or such ways of programming so u should separate your view and coding logics
like u may have a page like view_profile.php which is going to show user's information. in regular coding u have this:
view_profile.php:
<?php session_start();
// you check sessions to see if the user is logged in and has the right to view this page.
// like:
if ($_SESSIONS['is_user_logged_in']){
$username=$_SESSIONS['username'];
$name=$_SESSIONS['name'];
// ....
}else{
header('location: ./login.php');// if user is not authenticated u redirect to login page
exit();// prevents the rest of codes to be shown and executed
}
?>
<html>
<head>
<title>View <?php echo $name; ?>'s profile</title>
</head>
<body>
<div>Name: <span><?echo $name; ?></span></div>
......
</body>
</html>
But in a better way u can do it like this:
you have files like
'view_profile.htm' // holds the HTML
'view_profile.php // holds the PHP logic
'inc.php' // holds some useful functions that help you in writing PHP logic
view_profile.htm
<html>
<head>
<title>View <?php echo $name; ?>'s profile</title>
</head>
<body>
<div>Name: <span><?echo $name; ?></span></div>
......
</body>
</html>
inc.php
<?php
function ses_start(){
if(!session_id()){
session_start();
}
}
function ses_get($key){
ses_start();
if(!empty($_SESSION[$key])){
return $_SESSION[$key];
}
return NULL;
}
function ses_set($key,$val){
$_SESSION[$key]=$val;
}
function is_user_loggedin(){
ses_start();
if(!empty(ses_get('is_user_loggedin')){
return true;
}
return false;
}
function go($to){
header('location: '.$to);
exit();
}
//and lots of useful functions that help u connect and work with data base.
view_profile.php
<?php
include('inc.php');
if(is_user_loggedin(){
$username=ses_get('username');
$name=ses_get('name');
//...
}else{
go('login.php);
}
include('view_profile.html); // and u call the .htm file that holds the HTML the view file)
?>
this was a simple sample of separating codes logic(php codes) from views(html tags)
and also u may search about MVC Model-View-Controller and try working with simple MVC frameworks.

CSS li inline & jquery sortable

having an issue with the jquery sortable code - it's not so much the jquery but how my list of images is showing. Prior to adding the sortable code it displayed the images in my wrapper in a grid like formation perfectly - now I have added a little style from the jquery it seems to have thrown it but im not sure why...
here is the Jquery style:
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li {float: left; }
</style>
Here is my list of images that worked perfectly ok before:
<div id="images">
<hr style="margin-top: 10px" />
<ul id="sortable">
<?php
// get folio for user
if(isset($_GET['userid'])) {
$query = 'SELECT * FROM folio WHERE userid=\'' . $_GET['userid'] . '\' ORDER BY ord';
}
else {
$query = 'SELECT * FROM folio WHERE userid=\'' . $_SESSION['userid'] . '\' ORDER BY ord';
}
$result = mysqli_query($connection, $query);
if(!$result) {
// error with MYSQL
die('Failed to retrieve images! - ' . mysqli_error($connection));
}
// list images
$numRows = mysqli_num_rows($result);
if($numRows < 1) {
echo '';
}
else {
$filepath = 'uploads/folio/';
while($imagerow = mysqli_fetch_assoc($result)) {
?>
<li>
<div class="outimgbox"> <a class="fancybox fancybox.ajax" rel="gallery1" style="text-decoration: none;" data-fancybox-type="ajax" href="profile_image_fancybox.php?imgid=<?php echo $imagerow['imgid']; ?>">
<div id="mainwrapper">
<div id="box-3" class="box"> <img class="uploads" src="<?php echo $filepath . $imagerow['filename']; ?>" alt="<?php echo $imagerow['description']; ?>"/> <span class="caption fade-caption">
<h3 ><?php echo $imagerow['title']; ?></h3>
</span> </div>
</div>
</a> </div>
</li>
<!-- class outingbox -->
<?php }} ?>
</ul>
For some odd reason:
<style>
#sortable { list-style-type: none; }
#sortable li {float: left; }
</style>
This resolved the issue....

How to apply margin on DIV when printing with loop?

Here is my Code:
<?php
$qr = mysql_query("SELECT * FROM products");
while($res = mysql_fetch_array($qr)):
?>
<div class="box">
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
I want the output of the fetched record like this http://jsfiddle.net/CqYhE/3/
Please help me that how can I apply margin of 10px on both sides (left & right), only on the center div of each row when printing it with php loop.
Here is your solution:
This will work for N divisions.
<?php
$qr = mysql_query("SELECT * FROM products");
$count = 1;
$margin='';
while($res = mysql_fetch_array($qr)):
$count == 2 ? $margin='style="margin:0px 10px;"' : $margin = '';
$count == 3 ? $count = 1 : $count++;
?>
<div class="box" <?php echo $margin; ?>>
<p><?php echo $res[1]; ?></p>
<img src="<?php echo $res[3]; ?>" width="100" /><br />
View Data Sheet
</div>
<?php
endwhile;
?>
Use css :first-child and :last-child selectors
#container .box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
#container .box:first-child,
#container .box:last-child { margin-left:0px; margin-right:0px;}
if you have Multiple Rows you will need to change you html to make it easy : See This DEMO
This is best achieved with a CSS solution. If you forget about the left margin and just apply a right one you can then remove it from the last-child. Fewer lines of CSS so better performance.
.box{
float: left;
width:245px;
height:200px;
background-color:#0CC;
margin: 0 20px 10px 0;
}
.box:last-child {
margin-right: 0;
}

Pulling photo and photo id from a SQL table and displaying them in a list on a PHP page

I have a SQL table which contains ID, photourl and thumbnailurl. Now I've written a script which deletes the photos. Everything is working properly the thing is I want to display the images in a list:
As you can see, I want to put the photo and the delete link into one list item.
<ul>
<li>
<ul>
<li><img src="#"/></li>
<li> DELETE IMAGE </li>
</ul>
</li>
<li>
<ul>
<li><img src="#"/></li>
<li> DELETE IMAGE </li>
</ul>
</li>
</ul>
I wrote some code but it doesn't seem to work... it displays the photo's vertically in a list.
<ul >
<li>
<?php
while ($line = $db->fetchNextObject()) {
//echo '<li>';
echo '<ul>';
echo '<li> <img class="thumb_image '.$line->category.'" src="'.$line->minurl.'"/> </li>';
echo '<li> Verwijder </li>';
echo '</ul>';
//echo '</li>';
/*echo '<img class="thumb_image '.$line->category.'" src="'.$line->minurl.'"/> <br/> Verwijder ';
*/
}
?>
</li>
</ul>
try setting your HTML up like this:
<ul>
<li><img src="#"/> DELETE IMAGE </li>
</ul>
and then your CSS as follows:
.deleteImage { display: block; }​
this will allow you to manipulate where you would like the delete image text to display under the image.
one way to do this... use <table> and <li>
this will give you rough idea.. try something like..
<table>
<ul>
<tr>
<td><li> row1 - column1 (1,1) </li></td>
<td><li> row1 - column2 (1,2) </li></td>
</tr>
<tr>
<td><li> row2 - column1 (2,1) </li></td>
<td><li> row2 - column2 (2,2) </li></td>
</tr>
</ul>
</table>
rest you can figure out yourself..
Sometimes, what you need is a table, but it doesn't have to look like one:
CSS:
table {
display: block;
}
tr {
display: inline-block;
border: 1px solid;
margin: 1em;
}
td {
display: block;
text-align: center;
}
img {
width: 100px;
height: 100px;
border: 1px solid red;
}
HTML:
<table>
<tr>
<td><img /></td>
<td><a href="#">Delete</td>
</tr>
<tr>
<td><img /></td>
<td><a href="#">Delete</td>
</tr>
</table>
http://jsfiddle.net/52yTm/
You can add extra columns, such as who uploaded it or when the picture was taken, etc. and style those however makes sense.
A list of lists doesn't seem appropriate to me. A list, in my mind, should be similar things (a grocery list, a list of colors, etc.). An image and a delete button are dissimilar items with a relationship ("delete" deletes the associated image). Relationships are better expressed with a table.

Categories