I am using PHP loop to create and display articles (as 'col' divs) from the MySQL database. If I use 3 "col-6" divs, the 3rd one moves below both the above divs. I want it to stay just close to the div above it(the first col-6 div in this case). How can I achieve this?
I have figured out that this is a problem with bootstrap columns. Also, I cannot use absolute positioning in this case.
while($row=mysqli_fetch_array($run_query)){
echo '<div class="col-md-6 col-xl-4 blogColumn">';
echo '<a class="articleLink" href="show.php?blogId=';echo $row['id'].'" target="_blank">';
echo '<article>';
echo '<header>';
if($row['file_id']==null){
echo '<img class="img-fluid rounded focus" src="https://i.ibb.co/ZNDm012/logo.jpg"/>';
} else{
$fileId=$row['file_id'];
$q="SELECT * FROM uploads WHERE id='$fileId'";
$run_q=mysqli_query($con,$q) or die(mysqli_error($con));
$res=mysqli_fetch_array($run_q);
$path="uploads/".$res['name'];
if($res['type']=='image'){
echo '<img class="img-fluid rounded focus" src="'.$path.'"/>';
} else {
echo '<video class="articleVideo" src="'.$path.'" controls="controls">';
echo '</video>';
} }
echo '<h2>'.$row['title'].'</h2>';
echo '</header>';
echo '<p>'.substr($row['description'],0,100).'... Read More'.'</p>';
echo '</article>';
echo '</a>';
echo '<hr/>';
echo '</div>';}?>```
The full width of the page is defined by col-12.
So if you want to have 3 same width columns next to each other use col-md-4
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
This will result in 3 equal width columns next to each other.
Related
Thanks for taking the time. I trying to make some image links inside of a DIV in html. The links are stored in a SQL DB. The links work just fine when outside of this specific div, but I really want to put them inside for styling purposes. The social images div is the one
echo "<div class=column-3>";
echo "<h3 id=\"artistNameLabel\"><strong>$artist_name</strong></h3>";
echo "<img id=\"artistImage\"src=\"imageuploads/$imageFilePath\">";
echo "<p><img alt=\"Artist Instagram\" src=\"images/instagramLogo.png\" width=\"25%\"></p>";//link doesnt work
echo "<p><img alt=\"Artist Streaming Account\" src=\"images/spotifyLogo.png\" width=\"25%\"></p>";//link doesnt work
echo "</div>";
The images appear just fine, but the link doesn't work. Also the text value that is the link is loaded just fine. Thanks for any help
echo "<div class=column-3>";
echo "<h3 id='artistNameLabel'><strong>".$artist_name."</strong></h3>";
echo "<img id='artistImage' src='imageuploads/".$imageFilePath."'>";
echo "<p><a href='".$artistInstagram."' target='_blank'><img alt='Artist Instagram' src='images/instagramLogo.png' width='25%'></a></p>";//link doesnt work
echo "<p><a href='".$artistStreaming."' target='_blank'><img alt='Artist Streaming Account' src='images/spotifyLogo.png' width='25%'></a></p>";//link doesnt work
echo "</div>";
You can try like this way :
$artistInstagram = "https://www.instagram.com/";
$artistStreaming = "https://www.example.com/";
$artist_name = "Test";
$imageFilePath = "https://via.placeholder.com/150";
$html = <<< EOT
<div class=column-3>
<h3 id="artistNameLabel"><strong>$artist_name</strong></h3>
<img id="artistImage"src=$imageFilePath>
<p>
<a href=$artistInstagram target="_blank">
<img alt="Artist Instagram" src="https://via.placeholder.com/150" width="5%">
</a>
</p>
<p>
<a href=$artistStreaming target="_blank">
<img alt="Artist Streaming Account" src="https://via.placeholder.com/150" width="5%">
</a>
</p>
</div>
EOT;
echo $html;
I think this will solve your problem
You need to style you anchor tag with "display:inline-block" and it will work fine. no matter if image is there or not.
How is it possible to use the href for this full div tag?
<?php
echo '<div id="" onclick="location.href="viewpost.php";" style="cursor:pointer;"> test </div>';
echo "<div class='nieuwscol' onclick='location.href='viewpost.php';' style='cursor:pointer;'>";
echo "<img class='imgnews' src='".$row['imgNewspost']."'>";
//echo '<p>'.$row['postAuteur'].'</p>';
echo '<div class="newstitle"><p>'.$row['postTitle'].'</p></div>';
echo '<p>'.$row['postDesc'].'</p>';
echo '<a style="font-size: 14px;" href="viewpost.php?id='.$row['postID'].'#commentsID"><img src="img/commenticon.png" alt="" height="20" width="20" ><div class="newsdate" float: right;> <p style="font-size: 14px;"> 000 </a>'.date('jS M Y', strtotime($row['postDate'])).'</p></div>';
echo '</div>';
echo '</a>';
?>
As you can see, the a href is working for newstitles, but now I would like to use the same weblink for the whole div.
Any suggestions?
You should set the url with the div like :
<div data-bind="<?php echo 'viewpost.php?id='.$row['postID'];?>" class="div-class"></div>
Then write jquery function like following:
$(document).on("click",".div-class",function(){
window.location = $(this).data('bind');
});
Simply add <a href=""> which contains whole div.
In your code we see </a> in the last echo which don't have start anywhere above first echo;
i've a simple function, which has two parameters, one for the image url, and other for the attributes for the image
function image_found($url,$attributes)
{
if(#getimagesize($url))
{
echo '<img src="'.$url.'" '.$attributes.'/>';
}
else
{
echo '<img src="'.base_url().'/site_images/image_not_found.svg" '.$attributes.'/>';
}
}
now what i'm trying to do is create a clickable image, if the image is found, now this is the html code
echo '<div class="panel-body">';
echo '<div class="col-md-12 col-lg-12 col-sm-12 text-center">';
$url = base_url().'product_images/'.$result->product_image.'.'.$result->image_type;
$attributes = 'height="200px" width="100%"';
echo ''.image_found($url,$attributes).'';
echo '</div>';
echo '</div>';
and this is the output i'm getting
<div class="panel-body">
<div class="col-md-12 col-lg-12 col-sm-12 text-center">
<img src="http://localhost/nsc/product_images/7908076366784972032090.jpg" height="200px" width="100%"/>
</div>
</div>
i don't know what is wrong here, i'm using bootstrap
Just use return statements instead of echo in your function and your problem should be solved ;-)
The better way is verify if your image exists (remove #) and then return (instead of echo):
...
if(file_exists('your/path/to/image'))
return '<img src="'.$url.'" '.$attributes.'/>';
else
return '<img src="'.base_url().'/site_images/image_not_found.svg" '.$attributes.'/>'
...
When you need to return a value from a function, use return statement instead of echo
When echo is used the output immediately gets printed instead of getting returned to the place where the function call is. Here is an illustration.
function printer(){
echo 'second';
}
echo 'first'.' '.printer().' '.'last';
The Output:
secondfirst last
This is the exact same thing happening with your code. The echo in image_found() gets printed as
<img src="http://localhost/nsc/product_images/7908076366784972032090.jpg" height="200px" width="100%"/>
The rest of the echo statement gets printed as
So using a return statement should solve your problem
By compiling this, display three image get my database and show it, when i click each image popup window show last image of my database.I want to know how to display the particular image, when i click first image,then popup window show first image and description, as well as same way second and third image. check to array loop in this code...
enter code here
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN = array();
$i=0;
$firstN = '<img src="'.$row ['image'].'">';
echo ' <a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ' ; echo $productname;echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
<div id="myModal" class="reveal-modal">
<form>
<table>
<tr><td><?php echo $r; ?></td>
<td><h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p></td>
<a class="close-reveal-modal">×</a>
</div>
</body>
</html>
I guess you have the images stored in the database like BLOB data. If so you need to create a handler to retrieve those images and render them as image/[mime]...
So in short.
In your code you need to create a new file iz get_image.php in it you need to make a request to the server and retrieve the image so you can send it to the client.
In your code you need to change the image path to the handler path with some query parameters.
$firstN = '<img src="get_image.php?imageid='.$row ['productid'].'">';
There are a lot information how to render the image to the client from the internet.
may be you have to declare your $firstN = array(); and then incrementor $i=0; out of while loop and put in array like this:
$firstN[$i] = '<img src="'.$row['image'].'">';
below is the full code:
<?php
$sql=mysql_query("select * from product_reg")or die(mysql_error());
$firstN = array();
$i=0;
while($row=mysql_fetch_array($sql))
{
$productname=$row['productname'];
$productid=$row['productid'];
$description=$row['description'];
$image=$row['image'];
$firstN[$i] = '<img src="'.$row['image'].'">';
echo '<a href="#" class="big-link" data-reveal-id="myModal" name="image" style="float:left;margin:100px 0 100px 100px;"> ';
echo $productname;
echo $firstN[$i];
$r=$firstN[$i];
echo '</a>';
$i++;
}
?>
Updates:
You have a space here:
$firstN[$i] = '<img src="'.$row['image'].'">';
//-----------------------------^----here at this code block;
To get the last image , you need to modify your query to have SORT BY productid DESC
To display the images
echo "<a href='xxx.php?imgid=$image'><img src='yourimagesfolderpath/$image.jpg'> </a>";
to navigate in the images , you have to use JQUERY
I have a set of image url's in a database which I am echoing into an <img>tag to display on a website.
I am using bootstrap and have my basic model set up like this:
<div class="row-fluid gallery">
<div class="span3">
<img src="some fancy url here for the image">
</div>
</div>
Now if you have ever used bootstrap you know once that span3 reaches 12 (basically when 4 images are displayed in the row). You must start the above all over to keep the images all in line.
I have a PHP script below that echoes out the image source and the above layout. The problem is, I have more than 4 images to echo out. I removed credentials for security purposes.
$con=mysqli_connect("localhost","username","password","db_name");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM gallery");
while($row = mysqli_fetch_array($result))
{
echo "<div class='row-fluid gallery'>";
echo "<div class='span3'>";
echo"<img src='". row['image_url']."'>";
echo "</div>";
echo "</div>";
}
mysqli_close($con);
My question is how do you do something like:
for every 4th image {
<div class="row-fluid gallery">
<div class="span3">
<img src="some fancy url here for the image">
</div>
</div>
}
Basically, I can say it in English and know what I need. But I can't say it in PHP and have it know what I need. Any help would be appreciated.
Create a counter variable outside the loop and check every fourth
$i = 1;
while($row = mysqli_fetch_array($result))
{
// do every time
if($i % 4 == 0)
{
// do only each 4th time
}
$i++;
}
$counter=0;
while($row = mysqli_fetch_array($result))
{
echo "<div class='row-fluid gallery'>";
echo "<div class='span3'>";
echo"<img src='". row['image_url']."'>";
echo "</div>";
echo "</div>";
$counter++;
if (!($counter%4))
// do your fancy staff, this is the forth image
}