EDIT: This works now thanks to ' olly_uk '
EDIT2: It works now, but the alignment of the boxes is wrong. You can view a screenshot HERE. Without any text it will align perfectly with 2 boxes on each line at a perfect distance from each other, but with text it echo's it under each other. Why?
I am trying to echo a image, then in that image I want to echo text from a database.
Well it echo's the images (3, because I only have 3 product examples in the database), but the products are not aligned in the boxes. It comes under it. I have searched on google but could not find anything
Is it even possible to use e.g. margin-top to move the posted echo so I could align it in the box?
I want to use style or class in the PHP...
Example image: IMAGE
adding <style>p{...};h3{...};</style> worked
Code sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BOX</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
</head>
<?php
include 'includes/connection.php';
$query = "SELECT * FROM products";
$result = mysql_query($query);
?>
<body>
<div class="header navpos c1" id="nav">
<table summary="header" border="0">
<tr>
<td>
<ul>
<li class="home"></li>
</ul>
</td>
<td>
<ul>
<li class="about"></li>
</ul>
</td>
<td>
<ul>
<li class="contact"></li>
</ul>
</td>
<td>
<ul>
<li class="twitter"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></li>
</ul>
</td>
<td>
<ul>
<li class="facebook"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0 />';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
</body>
</html>
i think you could achieve this using CSS. by having a negative top to bump the text over the top of the image. will try to give some example code when i get home.
check this out in the mean time, w3schools CSS-positioning
hope that helped
EDIT: added code to show what i mean
<html>
<head>
<title>text over image</title>
<style>
p {
position:relative;
top:-200px;
}
h2 {
position:relative;
top:-140px;
}
</style>
<head>
<body>
<img src="/images/office1.jpg" alt="demo image"/>
<h2>test text</h2>
<p>test desciption text</p>
<hr/>
<img src="/images/office1.jpg" alt="demo image"/>
<h2>test text</h2>
<p>test desciption text</p>
</body>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I can't see the problem with this bit of code it seems simple enough, i have a basic webpage:
<?php
include('includes/db_connection.php');
include('includes/functions.php');
include('includes/arrays.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Payday Dreams</title>
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="templates/css/main.css" rel="stylesheet" type="text/css" />
<link href="templates/css/bootstrap_v3.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{background:url(templates/images/bg_sub.png) repeat-x;}
</style>
<script type="text/javascript" src="templates/js/jquery.js"></script>
<script type="text/javascript" src="templates/js/bootstrap.js"></script>
<script type="text/javascript" src="templates/js/json2.js"></script>
<script type="text/javascript" src="templates/js/common.js"></script>
<script type="text/javascript" src="templates/js/ajax.js"></script>
</head>
<body style="background:#cfe4ee;">
<div style="height:100px; background:#000;">
<div style="width:971px; margin:0 auto; color:#ffffff; font-size:13px;">
<div style="text-align:center; padding-top:10px; font-size:16px; font-weight:bold; font-family:Arial"> <img src="templates/images/small_lock.png" alt="" style="vertical-align:middle" /> Unlock this page to continue!
<br />
<p class="link_ins">TEST</p>
<div id="_ostatus" style="color:#ffffff; font-size:14px; font-weight:normal"> </div>
</div>
</div>
</div>
<div id="linklocker_wrapper">
<div id="contents" style="margin-top:100px;">
<div class="jumbotron">
<div id="offersSection2" style="height:250px; width:570px; margin:25px auto" >
<!-- offer box -->
<div class="offerp_box3" >
<div class="mid" style="height:220px">
<div id="_offers">
<table class="table table-hover table-bordered table-condensed" style="width:530px; background:#ffffff; border:1px solid #cccccc;">
<?php
// get offers from the database
$rows = DB::getInstance()->select('SELECT * FROM `offers` ORDER BY RAND() LIMIT 5');
?>
<?php foreach ($rows as $row) { ?>
<?php
print_r($_GET);
$p = $_GET['p'];
echo $p;
?>
<tr >
<td class="offerDiv" title="<?php echo $row['offer_title']; ?>" style="height:30px; vertical-align:middle">
<div><img src="templates/images/chk.png" alt="" /> <?php echo $row['offer_title']; ?></div>
</td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
<div id="dform" style="display:none; width:90%; text-align:center">
</form>
</div>
</div>
</div>
The URL is like this: http://www.site.co.uk/page.php?l=1p=7 what i'm trying to do is get the value of $_GET['p'] and use it within the foreach loop, when i try to print the value out within the loop it's blank but shows fine before it enters the loop, i have racked the brains i can't think of an alternate way of getting that value, any help would be appreciated.
Is your URL correct at your guess? Believably, what you are trying to do is: http://www.site.co.uk/page.php?l=1&p=7 Notice the & in the URL. You had: http://www.site.co.uk/page.php?l=1p=7. Was that intentional?
In your URL, the two query string parameters need to be separated by &. It's unable to recognize what p is.
http://www.site.co.uk/page.php?l=1&p=7
So I'm trying to set the body background tag to a php variable I created, however I can't get it to correctly work.
Here is the simple PHP:
<?php
$backGround = "images/backgrounds/grey.png";
?>
and here is the HTML I tried which none worked.
<body background="<?php echo $backGround; ?>">
<body background="<?php echo htmlspecialchars($backGround); ?>">
I found these from preview stack overflow questions but they were about setting PHP variables to image sources. I would have thought it would apply to this as well.
Here's my entire PHP page using some of the suggestions but yet to still work.
<?php
$backGround = "images/backgrounds/grey.png";
?>
<html>
<head>
<title>Exodus</title>
<link rel=StyleSheet href="styles/main.css" type="text/css" media=screen>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<!-- JS Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/fader.js"></script>
</head>
<body style= 'background-image: url("<?php echo $backGround; ?>")'>
<div class="pre-wrap">
<div id="container">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
</div>
<div class="wrap">
<p>Test</p>
</div>
</div>
</body>
First of all - using backgound attribute is not recommended by W3C.
What you really need is inline style:
<body style="background-image: url('<?php echo $backGround; ?>')">
check this it will work
<body style= 'background-image: url("<?php echo $backGround; ?>")'>
<body style= 'background-image: url("<?php echo htmlspecialchars($backGround); ?>")'>
I have a programming newbie. I am learning from the alphabets. Pardon me of my very basic questions. I have a HTML template inside a PHP gallery script. In the title tag of the HTML two variables are placed. <title>"$gtitle $pcaption"</title> ($gtitle is gallery title and $pcaption is photo caption) My problem is $pcaption shows up as zero in the title tag of the page on the gallery page.It shows up in the title like
"example gallery-0"
( I am thinking it is because $pcaption is empty on gallery page and when a picture is clicked the title tag shows up with the caption ). My question is, is there anyway to avoid the zero showing up?
I am working on a localhost and is using PHP 5.5.12.
My HTML part is below ( Sorry if this is full of mistakes )..
// Final Output
echo <<<__HTML_END
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<base href="/viewgallery.php/">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<!-- <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/> -->
<title><? php echo $gtitle . " " . $pcaption;?></title>
<link rel="stylesheet" type="text/css" href="/styles.css">
<meta name="author" content="by .">
<meta name="Copyright" content="All rights reserved by .">
<meta name="keywords" content="$p_keywords,Photography by .">
<meta name="title" content="$gallery_listing">
<meta name="description" content="$gallery_description,$pcaption.">
<link rel="image_src" href="/photos/$cname/$pcaption/">
<link rel="icon" type="image/ico" href="/favicon.ico">
</head>
<body>
<div class="wrapper">
<h1 id="header1"><span></span></h1>
<div class="main">
<ul class="nav">
<li>HOME |</li>
<li>MY GALLERIES |</li>
<li>SEARCH |</li>
<li>ABOUT ME</li>
</ul>
$result_final
</div>
</div>
<div class="footer">
<div class="footinner">
<div id="seeker">
<form action="/searchmyway.php" method="get"><input type="text" name="q" id="search">
<input type="submit" id="find" value="Search">
<input type="hidden" name="form_id:search" value="1">
</form></div></div>
<p class="footnote"> </p>
</div>
</body>
</html>
__HTML_END;
?>
Thanks for any help...
EDIT - I have to admit this is not my own gallery script. I am trying to learn from this code. After looking at this for a long time. I see that there is an " echo " just above the HTML code. Looks like the final HTML is echoed out with the $results_final and I am trying to make changes after the echo command, may be that's where I am doing it wrong?
You can perform a test -
if(0 == $pcaption) {
echo '<title>' . $gtitle . '</title>';
} else {
echo '<title>' . $gtitle . ' - ' . $pcaption . '</title>';
}
$galleryTitle = $gtitle;
if(!empty($pcaption) && $pcaption > 0) { $galleryTitle .= " " . $pcaption; }
Put the 2 lines above right above the 'echo' line of your code and replace your title tag inside of that echo with the following.
<title>$galleryTitle</title>
That statement that is being echoed out is called a heredoc statement.
http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc
You could use an if/then/else statement to accomplish this, something like:
echo "<title>".$gtitle;
if($pcaption != 0){echo " - ".$pcaption;}
echo "</title>";
You already know that you want to output your open and closing title tags and your $gtitle variable so you only need to write an if statement that checks the value of $pcaption and if it's not 0 then echo it. You might also want to add a check to see if $pcaption is empty (http://php.net/manual/en/function.empty.php) as well, so your new if statement would be:
if($pcaption != 0 && !empty($pcaption)){...}
This way you don't end up out putting something like <title>$gtitle - </title> and having something that looks weird.
I wonder whether someone may be able to help me please.
I'm using Aurigma's 'Image Uploader' software to allow users to add, and view images for the records they create with the image data collected and retrieved via an XML file.
One of the pages I've put together creates a gallery which allows the user to view the images, both individually and as part of a 'fancybox' slideshow. The script for this is shown below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
$galleryPath = 'UploadedFiles/';
$thumbnailsPath = $galleryPath . 'Thumbnails/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -475px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "imagefolders.php" /> View Uploaded Images In Folder Structure <a/> ← View All Uploaded Images </div>
<form id="gallery" class="page">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a> </li>
<li class="item"></li>
<p><span class="style4"><b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> <br />
<b>Image contained in folder:</b> <?php echo htmlentities($xmlFile->getAttribute('folder'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aB-a"> </div>
</div>
</div>
</div>
</form>
</body>
</html>
What I'd like to be able to do is now make the images that are retrieved, user specific, i.e. User A can only view their images.
If this information was being retrieved straight from a mySQL database I know that within PHP I can use the 'SELECT WHERE' statement to filter the returned records, but could someone tell me please is there an XML equivalent that I could use?
Many thanks
Allowing users to view only their own uploaded images is not such a simple task. If the images are stored in a publically accessable folder then anybody can view the images using their browser.
To achieve this there are a few alternatives such as:
storing the images in the database rather than the filesystem,
creating a new foler for each user on the filesystem and changing
the read write permissions for each folder, or
storing the images outside the web root and fetching the images
using php i.e.
Instead of providing a link to an image. Provide a link to a cgi
script which will automatically provide the proper header and
content of the image.
For example: image.php?sample.jpg
You can then make sure they are already authenticated (e.g. pass a
session id) as part of the link.
This would be part of the header, and then your image data can
follow.
<?php
$file = basename(urldecode($_GET['file']));
$fileDir = '/path/to/files/';
if (file_exists($fileDir . $file))
{
//perform some authorisation check
...
...
// Note: You should probably do some more checks
// on the filetype, size, etc.
$contents = file_get_contents($fileDir . $file);
// Note: You should probably implement some kind
// of check on filetype
header('Content-type: image/jpeg');
echo $contents;
}
?>
I have 16 Documents with a php include in them to include a php template like this:
<?php include("templates/template.php"); ?>
Inside that template there is a little bit of PHP which finds the document name and prints it. The problem is that for the php document to be included its PHP is processed (Naturally because its PHP), this means that the document name finder is finding the name of the template and not the main document. What I am trying to do is have 16 PHP Files which act as a front end and are accessed by the User, these files include the Template file which finds the name of the accessed file and pulls html code from another file into the body of the template. This means that the content for the file is external to the Structure of the site and allows a level of simplicity for basic editing (I.E. The client can edit their website). As I stated above my method has a simple problem what I am trying to figure out is if anyway knows how to do this.The Template file is pasted below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript">
</script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
var screenwidth = screen.width;
if (screenwidth < 1180){
document.write('<link rel="stylesheet" href="css/ldrop.css" type="text/css" media="screen" />');
}
else
{
document.write('<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen" />');
}
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Alignment Courses</title>
<link rel="shortcut icon" href="favicon.png" />
</head>
<body onload="makerequest('templates/quote.php','quote'); return false;makerequest('editing/<?php echo basename(__FILE__, '.' . pathinfo(__FILE__, PATHINFO_EXTENSION)); ?>.php','main')">
<div id="menu"><img src="webpics/logo.png" width="225" height="150" onmouseover="this.src='webpics/logoinv.png'" onmouseout="this.src='webpics/logo.png'" style="float:left" alt="Exit To Banner"/>
<div id="logo"><a href="index.html"><img src="webpics/Yoga Health.png" alt="Yoga Health Townsville" width="458" height="43" vspace="20"
onmouseover="this.src='webpics/Yoga Health Inv.png'"
onmouseout="this.src='webpics/Yoga Health.png'"/></a>visit the photo gallery</div>
<div id="nav" class="mainmenu">
<ul>
<li class="menu1">Home</li>
<li class="menu2">Classes
<ul>
<li>Daily</li>
<li>Beginner</li>
<li>Alignment</li>
<li>Preparation</li>
</ul>
</li>
<li class="menu3">Family Yoga
<ul>
<li>Family Yoga</li>
<li>Childrens Yoga</li>
<li>Prenatal Yoga</li>
</ul>
</li>
<li class="menu4">Prices
<ul>
<li>Classes</li>
<li>Equipment</li>
</ul>
</li>
<li class="menu5">Events/Workshops
<ul>
<li>Dance</li>
</ul>
</li>
<li class="menu6">Our Teachers</li>
<li class="menu7">Location</li>
</ul>
</div></div>
<div id="content"><div id="sidebar"><div id="sidebar">
<p><strong class="MyriadPromain"><em>Contacts</em></strong><br />
<span class="MyriadProcontact">Shop 3, 262 Woolcock Street, Currajong, 4812 <br />
Information: info#yogahealth.net.au<br />
Bookings: bookings#yogahealth.net.au<br />
Phone: 07 47 751 154<br />
Mobile: 0410 085 054<br /><br /></span>
<span class="ArialGroup">For Enquiries Regarding Group Bookings<br />Click Here</span>
</p>
<p><img src="http://www.yogahealth.net.au/webpics/facebook.gif" width="120" height="45" /></p>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FYoga-Health-Townsville%2F140216156034239%23&layout=box_count&show_faces=false&width=700&action=like&font=verdana&colorscheme=light&height=50" scrolling="No" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px;" allowtransparency="true"></iframe>
<p>
Links to other Websites in our Community</p>
<div class="quoteback">
<img src="http://www.yogahealth.net.au/webpics/Refresh.gif" height="20px" width="20px" align="right" />
<div id="quote"><br \></div>
</div>
<br \>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('YogaHealth1').start();
</script>
<?php include("templates/quotein.php"); ?>
</div>
</div><div id="main"><?php include("editing/alignment.php"); ?></div></div>
<div id="footer"></div>
</body>
</html>
Many Thanks in advance.
Template should be a piece of code, which takes parameters and based on that generates output.
The solution for this problem could be, that in that accessed file, you declare a variable with appropriate name and pass it to the template. There you will have each page differentiated as requested.
Solution:
Magic constant __FILE__ holds name of the included file, if used in include. So the solution is to move php code to the file, from which you are running the include.