I am trying to show a dummy image from - Font awesome- when the picture is not set.
You can see my code it shows the image if there is one but when there isn't one it needs to set the dummy pic from awesomefont. tried pasting this <i class="fas fa-user-circle"></i> in the else but that isn't working. can anyone please help me?
<?php
$onderrwerp = $app->get_onderwerpen();
foreach($onderrwerp as $onderwerp){
echo '<div class="well well-sm">';
if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) {
echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
} else {
}
echo '<b> '.$onderwerp['onderwerpnaam'].'</b>';
echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
echo '</div>';
}
?>
update
this worked for me! I changed it a little with the font-size. The only problem I have is that it isnt aligned great. As you can see on the pic the text next to the picture on the first one is nice but the second and 3e are a little but lower? how to fix that?
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<?php
$onderrwerp = $app->get_onderwerpen();
foreach($onderrwerp as $onderwerp){
echo '<div class="well well-sm">';
if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) {
echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
} else {
echo '<i style="font-size: 2.5em;" class="fas fa-user-circle"></i>';
}
echo '<b> '.$onderwerp['onderwerpnaam'].'</b>';
echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
echo '</div>';
}
?>
how it looks like now
You may be missing the required js file that's why it's not showing.
Getting Started
Try:
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<?php
$onderrwerp = $app->get_onderwerpen();
foreach($onderrwerp as $onderwerp){
echo '<div class="well well-sm">';
if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) {
echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
} else {
echo '<i style="font-size: 6em;" class="fas fa-user-circle"></i>';
}
echo '<b> '.$onderwerp['onderwerpnaam'].'</b>';
echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
echo '</div>';
}
?>
You can put the font icon in else part and it should work perfectly.
I think your if statement isn't allowing you to goto else. just update the if condition like this:
$foto = '/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].' 'images/userphoto/1/2/2/59874a886a0356abc1_thumb9.jpg';
if(file_exists($foto)) {
echo '<img class="img-circle" src="'.$foto.'" />';
}
else{
echo '<i class="fas fa-user-circle"></i>'
}
For your second problem:
You can write CSS class and use it in the parent, in your case it'll be <div class="well align-children"> :
.align-children{
line-height: 40px; /* depending on the size of your icon */
display: inline-block;
vertical-align: middle;
}
You can use the styling on html document with this:
<style>
.align-children{
line-height: 40px; /* depending on the size of your icon */
display: inline-block;
vertical-align: middle;
}
</style>
Related
This is main problem of my system I can display images and their names but it cant't be a horizontal.. Need help please. Cause when I run my codes the images will be vertically but I want to be in a horizontal
Here;s the code:
echo'<?php $src=array("candidates/images/".$rows["image"]); for($i=0;$i<2;$i++){ ?>';
echo '<div clas ="image">';
echo '<img src="candidates/images/'.$rows['image'].'" width="10" height="20px" />'.', '.'<br>'.$rows['lastname'].', '.$rows['firstname'].'<br>'.' = '.$rows['votes'];
// echo '<br>';
}
$sdsd=$dsada
?>
<img src="candidates/images/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
// echo(100*round($rows['votes']/($sdsd),2)); /
/*?>%<br>*/
/*<?php
}
*/echo '</div>';
}
}
Here's the CSS:
.image {
position: relative;
width: 150px;
display: inline-bloxk;
}
Remove the <br> ?
echo ''.', '.''.$rows['lastname'].', '.$rows['firstname'].''.' = '.$rows['votes'];
is there something wrong from with my code? something hidden quote i forgot to close.
{
echo '<div class="project_box" title="'. $row['title']. '">';
echo '<p class="project_title">' . $row['title'] . '</p>';
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['image']) . '" width="200" height="200"</img>';
echo '</div>';
}
when i echo this in my project box it has some space between the bottom of the image, and the bottom border i give to the div. i give the box a height "auto".
this is the div i place the echo'ed stuff in;
.project_box{
float:left;
width: 200px;
height: auto;
border: 1px solid #dbae78;
opacity: 0.7;
}
i cant find the problem:( i hope you see the problem in my code what i didn't see atm.
i want the border sticks to the bottom of the image.
It looks like
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['image']) . '" width="200" height="200"</img>';
Should be
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['image']) . '" width="200" height="200" />';
The img tag is a self closing tag, meaning it won't have a <img> and a </img>, only a <img/>. Also, even if it did, you still didn't have the closing bracket on the beginning of the tag.
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;
}
I am currently trying to create a login button that is similar to that of dropbox. There is another thread available on how to do this, but I wish to do it differently. Note I tried to follow the code provided in that thread as close as I can, but it was a failed attempt.
Rather than having a link written in text, my button refers to a link through an image. Furthermore, when the button is pressed, I want another image to popup right below it.
Here is my code:
html/ jquery /php code:
echo '<div id = popup>';
echo '';
echo '<div id = "popupimage"> </div>';
echo '</div>';
echo '<script type="text/javascript src="jquery.js">';
echo '$("#popup").click(function(e){
$("#popupimage").css("visibility","visible");
e.stopPropagation();
});';
echo '</script>';
css code:
#logbutton{
top:50px;
left:850px;
position: absolute;
background-image: url(../images/buttons/loginbutton.png);
width:59px;
height:28px;
}
#popupimage{
top:63px;
left:887px;
position: absolute;
background-image: url(../images/popupimage.png);
visibility: hidden;
width:400px;
height:600px;
}
If possible I would also like to know if this can be done using html 5 and css only?
Thanks in advance
I have managed to do this. Here is the code:
echo '';
echo '<div id = "popup">';
echo '<div id = "popupimage"> </div>';
//HTML INSIDE POPUP
echo '</div>';
echo '<script type="text/javascript" src="jquery.js"></script>';
echo '<script>';
echo '$("#loginbutton").click(function(e){';
echo '$("#popup").css("visibility","visible");';
echo 'e.stopPropagation();';
echo '});';
echo '$("#popup").click(function(e){';
echo 'e.stopPropagation();';
echo '});';
echo '$("body").click(function(e){';
echo '$("#popup") . css("visibility", "hidden");';
echo '});';
How do I "highlight" (turn to a different color, make bold, whatever..) a link that has been clicked on?
Example is here: http://www.celebrything.com/
Trying to get the Today, Week, and Month links in the right sidebar to turn a different color once clicked.
Here's the code I'm using to show the results in the right sidebar:
<div id="sidebar">
<div class="post">
<h2>
<font color="#333333">Top 50 Celebrities</font>
<br>
<br>
<font color="#333333">Today</font>
<font color="#333333">Week</font>
<font color="#333333">Month</font>
</font>
<br>
<br>
<?php
function showTable ($table){
if (!in_array($table, array('today', 'week', 'month'))) {
return false;
}
global $wpdb;
$result = $wpdb->get_results('SELECT name, count FROM wp_celebcount_' . $table);
foreach($result as $row) {
echo '<a href="http://www.celebrything.com/?s=' .
urlencode($row->name) . '&search=Search">' . $row->name .
'</a> - ' . $row->count . ' Posts<br/>';
}
}
if (!empty($_GET['table'])) {
showTable($_GET['table']);
} else { showTable('today'); }
?>
</h2>
</div>
</div>
<div class="clear"></div>
CSS can do this.
If a link has been visited at any point:
<style type="text/css">
a:visited { color: red; }
</style>
If the link has focus:
a:focus { color: red; }
Note: IE7 and lower don't support :focus. See CSS contents and browser compatibility and :focus.
If your asking howto make the current page active here is how you can do it:
<font color="#333333"><a class="<?php echo currentPage('today') ?>" href="index.php?table=today">Today</a></font>
<font color="#333333"><a class="<?php echo currentPage('week') ?>" href="index.php?table=week">Week</a></font>
<font color="#333333"><a class="<?php echo currentPage('month') ?>"href="index.php?table=month">Month</a></font>
function currentPage($isTableSet)
{
if($_GET['table'] == $isTableSet)
return 'selected'
else
return '';
}
And you will need to add the .selected class in your css and style it to whatever you want, maybe something like this:
<style type="text/css">
.selected {
font-weight: bold;
}
</style>