style not working when element created using PHP's "echo' '" - php

I use PHP code to insert some elements in another PHP file, when the elements were originally created inside the calling PHP file style worked just fine, but when i replaced the code with an 'include(somephpfile.php)', elements were added the way i wanted them to but style didnt apply.
style doesn't apply to elements created this way:
echo '<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms" style="box-shadow: 0px 10px 12px grey; width:80%">
<div class="img-wrapper">
<img src="booksCovers/';
$queryImage = "SELECT cover from books where bookno = '$temp';";
$resultsImage = mysqli_query($db, $queryImage);
$imagesrc = mysqli_fetch_array($resultsImage);
echo $imagesrc[0];
echo '" class="img-responsive" alt="this is a title" style="width : 450px ; height :320px; " />
<div class="mybooks-overlay">
<div class="desc">
<div class="description">';
$query2 = "SELECT description FROM books WHERE bookno = '$temp';";
$results = mysqli_query($db, $query2);
$book = mysqli_fetch_array($results);
echo $book[0];
echo '
</div>
<a class="details" target="_blank " href=" #">Learn More</a>
</div>
</div>
</div>
<figcaption>
<button class="myButtone">
<div class="insider"> </div>
20. 00$
</button>
<div class="heart"></div>
</figcaption>
</div>
</div>';
but it applied when it was done this way:
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms" style="box-shadow: 0px 10px 12px grey; width:80%">
<div class="img-wrapper">
<img src="booksCovers/" class="img-responsive" alt="this is a title" style="width : 450px ; height :320px; " />
<div class="mybooks-overlay">
<div class="desc">
<div class="description">
</div>
</div>
</div>
</div>
<figcaption>
<button class="myButtone">
<div class="insider"> </div>
20. 00$
</button>
<div class="heart"></div>
</figcaption>
</div>
</div>

Related

How do I make the card align on the same row?

I'm trying to display MySQL query in each card but how do I print the cards inline? It is now printing below one another but I want them to be on the same row horizontally.
<?php
$output="";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
just move your while into this :
<div class="container">
<div class="row">
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!--from here-->
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<div class="card-body">
<div class="card-title">
<h1>title</h1>
</div>
<div class="card-text">
<h5>body</h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<!--to here-->
</div>
</div>
duplicate the code between (from here) and (to here)
here is a for loop example I used a while ago:
<div class="container">
<div class="row">
<?php for ($i=0; $i < count($user_elements[0]) ; $i++):?>
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<img class="card-img-top" src="<?php if(isset($user_elements)){echo "../private/uploads/".$thumbnail[$i];}?>">
<div class="card-body">
<div class="card-title">
<h1><?php echo $user_elements[4][$i];?></h1>
</div>
<div class="card-text">
<h5><?php echo $user_elements[5][$i];?></h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="readmore.php?Post=<?php echo $user_elements[0][$i];?>" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<?php endfor?>
</div>
</div>
create a parent div with container as a class add one more div to that parent div with row as a class then add your cards in that row classed div.
ex:
<div class="container">
<div class="row">
//your cards div
</div>
</div>
Use this snippet. Grid can be better with grid-gap.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
padding: 10px;
}
.grid-item {
background-color: #999;
border: 1px solid #fff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
You can make a new div before your while loop and join the
As you can see below, you will make a new div named cards
<?php
$output="<div class='cards' style='white-space:nowrap'>";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12' style='display:inline-block'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
I hope by using this code the cards will align in same line.

using <? echo$item->getImage().'-1.jpg'?> to get an image name from a database

in my code i used
<img class='container card-body furniture-size' src="../FurnitureImages/<? echo$item->getImage().'-1.jpg'?>"
but when i test it the image name is
<?%20echo%20$item->getImage().%27-1.jpg%27%20?>
instead of
"furniture1-1.jpg"
the section with the code is:
<div class="center-align main-side furniture-box " style="float: right">
<h1 class="w-100 p-5 pulse text-white" >Furniture</h1>
<div class="col-sm-12 row" style="margin-left: 175px">
<?php foreach ($view->searchResult as $item) { ?>
<div class='furniture-box border-white col-sm-4 pt-2 pb-3 m-1' style='float: right; color:#fff; background:#9fa9a3'>
<?php echo $item->getFurnitureName()?>
<img class="container card-body furniture-size'" src="../FurnitureImages/<?php echo $item->getImage() . '-1.jpg'; ?>"/>
Color: <?php echo $item->getFurnitureColour()?>
<br>
View to Bid
</div>
<?php }?>
</div>
</div>
can anyone help me fix this please?

php/mysql responsive imaging

I'm trying to make a responsive php/mysql image system.
I took this Code from the internet:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="item-container">
<a href="#">
<div class="item-caption">
<div class="item-caption-inner">
<div class="item-caption-inner1">
<h3>$45</h3>
<span>Only</span>
</div>
</div>
</div>
<img src="images/menu-1.jpg" />
</a>
</div>
<div class="item-container">
<a href="#">
<div class="item-caption">
<div class="item-caption-inner">
<div class="item-caption-inner1">
<h3>$45</h3>
<span>Only</span>
</div>
</div>
</div>
<img src="images/menu-5.jpg" />
</a>
</div>
</div>
</div>
Which is showing this: img
and tried to make it responsive with mysql and php. So I can add the images.
<div class="row">
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc()) {
if($row['Ordine'] %2 != 0)
{
echo "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'>";
}
echo "
<div class='item-container'>
<a href='#'>
<div class='item-caption'>
<div class='item-caption-inner'>
<div class='item-caption-inner1'>
<h3>$45</h3>
<span>Only</span>
</div>
</div>
</div>
<img src='/dulcearoma/admin/images/" . $row["Poza"]. "' />
</a>
</div>";
if($row['Ordine'] %2 != 0)
{
echo "</div>";
}
}
}
?>
</div>
but it's looking like this: enter image description here
The Ordine row is 1,2,3,4,5,6 etc.
Any ideas what I did wrong?
I'm really out of ideas
please use boostrap class="img-responsive" and add height and width in img tag
example :
<img src="images/menu-5.jpg" class="img-responsive" width="304" height="236">

How to hide image in PHP if there is no image set

How do I hide the image tag if there is no image present? Basically, I have an image gallery that has 4 images that can be set. However, if a product has 2 images how do I hide the other 2 image tags? What would be the best method to use?
<img src="/images/large/<?=$prod_id?>.jpg" onclick="openModal();currentSlide(1)" style="border: 1px solid #cccccc;" class="hover-single"/>
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:80px; height:80px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="gallery cursor active" src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
</div>
</div>
</div>
Your modal-content code can be rewritten as below:
check if the image file exists or not
display the slide if the image file exists, do nothing if not.
for($i = 1; $i<=4; $i++) {
$img_file = '/images/large'.$i.'/'.$prod_id.'.jpg';
if(file_exists($img_file)) {
$display = ($i == 1) ? ' block' : ' none';
echo '<div class="mySlides" style="display:'.$display.';">';
echo ' <div class="numbertext">'.$i.' / 4</div>';
echo ' <img src="'.$img_file.'" style="width:95%; height:95%; margin-left: 2.5%;">';
echo '</div>';
}
}
The above code can be used to replace the following code section:
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
Sure it is not the best way to check file_exists each time. This can be improved by means of storing the number of images for each product in your data set / database. Then just set a new variable such as $img_num to replace the 4 in the loop.
Try this code:
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<?php if(file_exists('/images/large2/'.$prod_id.'.jpg')){<?php>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"><?php }
</php>
Here is possible idea for your requirement :
$query = "here is your query";
$res = "your query executed";
$imagearray = array();
$i = 0;
while($row = mysql_fetch_array($res))
{
if(file_exists(imagepath.$row["image"]))
{
$imagearray[$i] = $row["image"];
$i++
}
}
Hi their Brother ild flue did a good work, but we can enhance the code a bit more but making the fetching a bit more dynamic, I propose the code below,
scan the dir for existing folders(in that way u don't need to depend
on the arbitrary number to indicate the folder
see that those paths with ur image exist or not
display the specified images and let the rest of the be discarded.
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$k=1;
$dirs = array_filter(glob('images/*'), 'is_dir');
foreach ( $dirs as $allLargeDir ){
$imgPath=$allLargeDir."/".$prod_id.".jpg";
if(file_exists($imgPath)){
?>
<div class="mySlides" style="display: block;">
<div class="numbertext"><?php echo $k++." / ".$n; ?></div>
<img src="<?php echo $imgPath;?>" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<?php
}
}
?>

SAMP PHP API Integration

I want to show the number of players in the server instead of that UNKNOWN thing, I haven't enabled the API yet, can I get help that, I want to integrate the progress bar to the total players in game like
if players are 50/100
= 50% of the bar will be filled.
Like the bar should work as the api updates.
<div class="is-clearfix"></div>
<section class="section dark-grey has-text-centered">
<div class="container">
<div class="heading">
<h1 class="title">Our Servers</h1>
<br>
</div>
<div class="columns is-gapless">
<div class="column">
<div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png">
</figure></div> <div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div>
<div class="players is-marginless">
<div class="content playersOnline">
Unknown PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress>
<br></div> <a class="button is-info is-medium is-fullwidth">Play Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Just use the SACNR monitor API, and
<div class="columns is-gapless">
<div class="column"><div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png"></figure></div>
<div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div> Hostname:
<div class="hosting"></div>Gamemode:
<div class="game-mode"></div>Map:
<div class="language"></div> Players:
<div class="players is-marginless"><div class="content playersOnline">
FETCHING PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress><br></div>
<a class="button is-info is-medium is-fullwidth">Play Now</a></div></div></div></div></div></section></div>
Where We fetch from API the following things
<?php
require_once("sampsvr.php");
$monitor = new SACNR\Monitor;
//$obj = $monitor->get_info_by_id(1790345);
$obj = $monitor->get_info_by_ip('87.98.241.207','7775');
$players = $obj->Players;
$hostName = $obj->Hostname;
$Gamemode = $obj->Gamemode;
$Mapname = $obj ->Language;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.progress').val(<?php echo $players;?>);
$('.playersOnline').html(<?php echo $players;?> +' PLAYERS ONLINE' );
$('.hosting').html("<?php echo $hostName;?>");
$('.game-mode').html("<?php echo $Gamemode;?>");
$('.language').html("<?php echo $Mapname;?>");
});
</script>
You may find the API at http://monitor.sacnr.com/api.html

Categories