In my code I use this MySQL query:
$qry="SELECT ServiceIcon FROM Services INNER JOIN UserServices ON UserServices.ServiceID=Services.ServiceID WHERE UserServices.UserID=$_SESSION[SESS_MEMBER_ID]";
$result=mysql_query($qry);
header("Content-type: image/png");
echo mysql_result($result,0);
I want these images to be displayed in a grid of 3 icons wide. Currently they're displayed on top of each other however. So I should echo an like this:
echo '<ul>';
foreach ($images as $image) {
echo '<li><img src="' . $image['src'] . '" id="' . $image['id'] . '" /></li>';
}
echo '</ul>';
What I don't understand is how I should incorporate into my code. Or maybe my code is not even the right way to do it. Please help me out.
EDIT: So this is the complete file in question:
<?php
session_start();
include "connection.php";
// just so we know it is broken
error_reporting(E_ALL);
// some basic sanity checks
$qry="SELECT ServiceIcon FROM Services INNER JOIN UserServices ON UserServices.ServiceID=Services.ServiceID WHERE UserServices.UserID=$_SESSION[SESS_MEMBER_ID]";
$result=mysql_query($qry);
header("Content-type: image/png");
?>
<html>
<head>
<style>
ul.horizontal-display {
margin: 0;
padding: 0;
}
ul.horizontal-display li {
list-style: none;
display: inline-block;
}
</style>
</head>
<body>
<?php
echo '<ul class="horizontal-display">';
foreach ($images as $image) {
echo '<li><img src="' . $result . '" id="' . $image['id'] . '" /></li>';
}
echo '</ul>';?>
</body>
</html>
Hello you need to add CSS. Something like this:
echo '<ul class="horizontal-display">';
foreach ($images as $image) {
echo '<li><img src="' . $image['src'] . '" id="' . $image['id'] . '" /></li>';
}
echo '</ul>';
And in the CSS rules
ul.horizontal-display {
margin: 0;
padding: 0;
}
ul.horizontal-display li {
list-style: none;
display: inline-block;
}
Related
I have problem with displaying photo from database on the page. I made a path in database column image_src = "../GameForest/gamephoto/gta5.jpg". And path is correct I checked it several times.
//This is a class that displaying all the data from the database
<?php
class Game extends Dbh {
public function gameDiv() {
$id = $_GET['id'];
$stmt = $this->connect()->query("SELECT g.game_id, g.game_name, g.image_src, g.genre_id, g.developer_id, g.release_date, g.platfrom_id, g.game_price, g.game_description, g.processor, g.graphic, g.ram\n" . "FROM game AS g\n" . "LEFT JOIN genre AS z\n" . "ON g.genre_id = z.id WHERE game_id = '$id'");
while ($row = $stmt->fetch()) {
echo "<div class='gameName'><h2>" . $row['game_name'] . "</h2></div>";
echo "<div class='buying'><p>" . $row['game_price'] . "€</p><a href='bought.php'><button>Buy Game</button></a></div>";
//This next echo is for displaying photo from database:
echo "<div class='gamePhoto'><img>" . $row['image_src'] . "</img></div>";
echo "<div class='gameGenre'><b>Genre: </b><p>" . $row['genre_id'] . "</p></div>";
echo "<div class='gameDeveloper'><b>Created by: </b><p>" . $row['developer_id'] . "</p></div>";
echo "<div class='gamePlatform'><b>Platform: </b><p>" . $row['platfrom_id'] . "</p></div>";
echo "<div class='gameRdate'><b>Release date: </b><p>" . $row['release_date'] . "</p></div>";
echo "<div class='gameDescription'><b>Description: </b><p>" . $row['game_description'] . "</p></div>";
echo "<div class='sysRequirements'><p>Recommended System Requirements:</p><b>Processor:</b><p>" . $row['processor'] . "</p>" . " Heading <b>Graphic:</b><p>" . $row['graphic'] . "</p>" . " <b>RAM:</b><p>" . $row['ram'] . "</p>";
}
}
}
**//This is instance for previous class:**
<?php
#istance for printing information about a Game
$game = new Game;
echo $game->gameDiv();
?>
**//This is CSS code of that photo:**
.gamePhoto {
margin: 10px 0 20px 10%;
width: 200px;
height: 400px;
float: left;
}
.gamePhoto img {
width: 500px;
height: 600px;
}
?>
I expect that there is a picture from database but I get only a gray frame where the image should actually be below that it writes "../GameForest/gamephoto/gta5.jpg" (the path I wrote in the base).
The rest of the database data are displayed normally it's just a problem with images.
On the other page (and other class) the same picture from the same database is normally displayed and I have no problem.
img is inline block，use it like <img src="" />
Change this
<img>" . $row['image_src'] . "</img>
to this
<img src=" . $row['image_src'] . ">
I have a php to echo three variable fields :
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo $toprow2['overallRank'] ." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
Among these three variables of the list,I want to align the first field "overallRank " to left ,"EmployeeName " to centre and "Total_points_Rewarded" to extreme right.
Below is the code I tried for the first field:
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo "<div style = "text-align=left" ."$toprow2['overallRank'] "</div>"." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
when I use three divs :
echo "<div style ='text-align:left'>" . $toprow2['overallRank'] . "</div><div style ='text-align:left'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";
I am not able to align them :Current scenario :
the first block is the rank,then name and last points - the three fields that I am trying to echo here.
You can wrap your content elements with <div> and use flexbox to align your items, e.g. like this:
li mark {
display: flex;
justify-content: space-between;
}
li mark div {
flex: 0 1 auto;
width: 100px;
height: 100px;
border: 1px solid;
}
<li>
<mark>
<div>some content</div>
<div>some content</div>
<div>some content</div>
</mark>
</li>
Your PHP code would than probably look like this:
<li>
<mark>
<?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo "<div>" . $toprow2['overallRank'] . "</div><div>" . $toprow2['EmployeeName'] . "</div><div>" . $toprow2['Total_points_Rewarded'] . "</div>";
} ?>
</mark>
</li>
See MDN for more information or CSS-tricks for a nice guide.
You could still use list you would want to add the style to your style sheet but you will get the idea
Add new classes to style sheet
/* CSS layout */
.rstlist {
}
.ovrank {
list-style:none;
display:inline-block;
width:33%;text-align:center
}
.emname {
list-style:none;
display:inline-block;
width:33%;text-align:center
}
.tpr {
list-style:none;
display:inline-block;
width:33%;text-align:center
}
Then here is the edited script
<?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo '<ul class="rstlist">' . PHP_EOL .
'<li class="ovrank">' . $toprow2['overallRank'] . '</li>' . PHP_EOL .
'<li class="emname">' . $toprow2['EmployeeName'] . '</li>' . PHP_EOL .
'<li class="tpr">' . $toprow2['Total_points_Rewarded'] .'</li>' . PHP_EOL .
'<ul>';
}
?>
Now you can view in different browsers and adjust the style of each element to get your desired look based on you actual output...
I load wordpress content in an external page. I display de content in 3 columns. I created a counter to do that. This works perfectly, except that I want to make it responsive. This works for thumbnails but not for the columns. How to change the value of 3 columns to 1 in PHP if the screen or browser size is less than 1024px ? Here is my code, I appreciate your help.
<?php
$compteur=0;
echo "<table width='100%'><tr>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo "<td width='30%'>";
echo "<br />";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "<br /><h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "<td />";
$compteur++;
if ($compteur==3)
{
echo "<tr/><tr>";
$compteur=0;
}
}
echo "<tr /><table/>" ;
?>
My bad, It's completly working.
Here is the code :
<div id="articles">
<?php
$compteur=0;
echo "<div width='100%'>";
echo '<div class="colonnes">';
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo '<div class="col">' . "\n";
echo "<br />";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "<br /><h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "</div>";
$compteur++;
if ($compteur==3)
{
echo "</div>";
echo '<div class="colonnes">';
$compteur=0;
}
}
echo "</div /></div>" ;
?>
</div>
and the css :
.colonnes{
display:block;
width: 100%;
}
.colonnes:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.col {
border: 1px solid #999999;
float: left;
width: 30%;
}
#media (max-width: 1024px) {
.col {
width: 100%;
}
}
thank you for your help.
Use a media query and style the cells as blocks:
#media (max-width: 1024px) {
td {
display: block;
}
}
In practice, you would probably want to give the table a class and use that class in the rule so you don't affect every table.
Also, as noted in the comment above, using div instead of table cells would be easier to deal with.
Example:
$compteur=0;
echo "<div width='100%'>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post) {
setup_postdata( $post );
echo '<div class="col">' . "\n";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "\n<h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "</div>";
$compteur++;
if ($compteur==3)
{
$compteur=0;
}
}
echo "</div>" ;
Then, have CSS like:
.col {
width: 30%;
float: left;
}
#media (max-width: 1024px) {
.col {
width: 100%;
}
}
ok this one is working. Now I'm trying to display posts in several pages. I change my code and add a Previous/Next navigation. When I click on next, I've got a wrong link, a 404 page of my actual website. So, what is wrong please ?
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
<div id="articles">
<?php
$args = array( 'posts_per_page' => 3 );
$compteur=0;
echo '<div class="tableau">';
echo '<div class="colonnes">';
$posts = get_posts($args,'order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo '<div class="col">' . "\n";
echo '<div class="img-crop">';
if ( has_post_thumbnail() ) {
echo '<a href='.post_permalink($ID).'>';
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img src="' . $image_src[0] . '">';
}
echo '</a>';
echo '</div>';
echo '<br/>';
echo '<div class="date">';
echo the_time('j F Y');
echo "</div>";
echo '<div class="title">';
echo the_title();
echo "</div>";
echo '<div class="excerpt">';
echo the_excerpt();
echo "</div>";
echo "</div>";
$compteur++;
if ($compteur==3)
{
echo "</div>";
echo '<div class="colonnes">';
$compteur=0;
}
}
echo "</div /></div>" ;
?>
</div>
I have an Image uploaded to a folder with the filepath stored in a table along with other info (title, description). I would like this info looping inside a repeated div. Both other variables loop correctly, however the filepath variable needs to be used in a background URL and at the moment only echos the value of the last row. Thank you very much for your help, there has got to be a simple solution! -Sean
<?php
$result = mysql_query("SELECT * FROM `program`");
$values = mysql_fetch_array($result);
$globals['filepath'] = $row['filepath'];
echo "<div>"; // start a table tag in the HTML
while($row = mysql_fetch_array($result)){ //Creates a loop to loop through results
echo "<div class=wrapper3 >
<h2>" . $row['program_name'] . "</h2>
<p>" . $row['program_description'] . "</p>
</div>
<p> </br> </p>";
$globals['bgimage'] = $row['filepath'];
}
echo "</div>";
?>
<style type="text/css">
.wrapper3{
width:85%;
margin:0 auto;
padding:20px;
height:auto;
color:#FFF;
background: url(/SMLC/<?php while ($row = mysql_fetch_array($result)){ echo $globals['bgimage'];} ?>
) no-repeat;
background-size:cover;
color:#000;
height:250px;
text-align:center;
background-color:#fff;
border-radius:6px;
border:1px solid #0FF;
}
</style>
<?php mysql_close();?>
Remove the background from the .wrapper3 in css, and add it to the element as an inline style.
<?php
$result = mysql_query("SELECT * FROM `program`");
echo "<div>"; // start a table tag in the HTML
while ($row = mysql_fetch_array($result)) { //Creates a loop to loop through results
$globals['filepath'] = $row['filepath'];
echo "<div class='wrapper3' style=\"background: url('/SMLC/".$row["filepath"]."');\">
<h2>" . $row['program_name'] . "</h2>
<p>" . $row['program_description'] . "</p>
</div>
<p></br></p>";
}
echo "</div>";
?>
NOTE: Use mysqli functions or PDO instead of mysql functions, since, mysql functions are deprecated.
Here is my code to show blob images on my webpage..
$sql = mysql_query("SELECT slider_id,date,page_image FROM news_slider where date='$ndate' order by slider_id ASC LIMIT $start, $limit");
// the result of the query
// $result = mysql_query("$result") or die("Invalid query: " . mysql_error());
while ($slider_rs = mysql_fetch_array($sql)) {
$sl_id = $slider_rs['slider_id'];
$sl_img = $slider_rs['page_image'];
echo '<div class="showcase-slide">';
echo '<div class="showcase-content">';
echo '<div class="map" style="display: block; background-image:url(' . base64_encode($sl_img) . '); position: relative; padding: 0px; width: 518px; height: 801px; background-position: initial initial; background-repeat: initial initial;">';
echo '<canvas style="width: 518px; height: 801px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 0.9999999999999999;" height="801" width="518"></canvas>';
echo '<img id="image' . $sl_id . '" class="map maphilighted" usemap="#Map' . $sl_id . '" src="data:image/jpeg;base64, ' . base64_encode($sl_img) . ' " align="top" style="border: 0px; opacity:0.9999999999999999; position: absolute; left: 0px; top: 0px; padding: 0px;">;';
echo '</div>';
echo '<span id="Label1" style="display:inline-block;height:1px;width:1px;">';
echo '<map name="Map' . $sl_id . '">';
$get_list = "select news_id,x1,y1,x2,y2 from cords where slider_id='{$sl_id}'";
$get_list_res = mysql_query($get_list) or die("Invalid query: " . mysql_error());
if (mysql_num_rows($get_list_res) > 0) {
while ($add_cords = mysql_fetch_array($get_list_res)) {
$news_id = $add_cords[news_id];
$a = $add_cords[x1];
$b = $add_cords[y1];
$c = $add_cords[x2];
$d = $add_cords[y2];
echo '<area shape="rect" coords="' . $a . ',' . $b . ',' . $c . ',' . $d . '" "href=" " onclick="showUser(' . $news_id . ')" alt=" " title=" " id="' . $news_id . '" >' . "\n";
}
}
echo ' </map>';
echo '</span>';
echo '</div>';
echo '</div>';
}
// close the db link
mysql_close($link);
but problem is images are not dispay on chrome and IE???
i used pagination for paginate images.
Please give any solution?
I think you need to also include the mimetype and a base 64 header:
Try changing this:
background-image:url('.base64_encode($sl_img).');
...to this:
background-image:url(data:image/jpeg;base64,'.base64_encode($sl_img).');
Certainly this only works if the blob is a JPEG. You'd use image/png if it's a PNG, for instance.
See this page for a more flexible implementation: http://devin.la/blog/base64-encode-images-css-script-mobile