Line break when page is vertically full - html

I have a page with a lot of Bootstrap 4 cards in a line.
I want to insert a line break when the vertical scroll bar would appear. How can I do that?
Code:
<?php
//THIS FILE IS A PART OF CROPSATH, LICENSED UNDER GPLv3.
//MADE BY MORICZGERGO A.K.A. SKIILAA
//CREATED: 2017.01.22.
//LAST MODIFIED: 2017.01.22.
include_once "include.php";
$conn = new mysqli($config->sqlServ, $config->sqlUser, $config->sqlPass, $config->dbName);
if ($conn->connect_error){
echo "<center><h1>Failed to connect to database.</h1></center>";
echo $conn->connect_error;
die();
}
$sql = "SELECT questionName FROM questions ORDER BY id DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0){
echo "<div class=\"responsive-thingy\">";
//output data of each row in bootstrap cards
while($row = $result->fetch_assoc()) {
echo "<div class=\"card\" style=\"width: 20rem; display: table-cell;\"><div class=\"card-block\"><h4 class=\"card-text\">" . $row["questionName"] . "</h4></div></div>";
}
echo "</div>";
} else {
echo "<center><h1>No questions found.</h1></center>";
}
?>
GitHub Repo

If it is text you are talking about you can use the 'hyphens' in css

Related

When images are imported from my database and outputted in a gallery they become blurry?

Blurry Image
Original image
I have a simple image upload function in php. It takes an image and uploads it to the database as a blob. When i call the image into the gallery it becomes blurry. Is there a way around this i have heard of people using GD etc. My code is below for the upload and the calling.
gallery.php
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
<?php
$result = mysqli_query($connection, "SELECT * FROM tbl_images");
while($row = mysqli_fetch_array($result))
{
?>
<div>
<?php echo'<img width="100%" height:"100%" class="img-fluid" src="data:image/jpg;base64,' . base64_encode($row['name']) . '" />' ?>
</div>
<?php } ?>
uploadFile.php
<?php
if(isset($_POST["insert"]))
{
$file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
$query = "INSERT INTO tbl_images(name) VALUES ('$file')";
if(mysqli_query($connection, $query))
{
echo '<script>alert("Image Inserted into Database")</script>';
}
}
?>
Try adding image-rendering: pixelated CSS style to your img element.

Display latest wordpress featured images on static html page

I have a wordpress blog page installed in subfolder of my website(converted from html)and a static html home page.
I would like to display 3 latest posts and its featured images on home page. With code below i can display latest posts text but i dont know how to show featured images of posts. Into index.php of a wordpress custom theme i placed featured photo inside a div:
<div id="blogphoto"><?php the_post_thumbnail(); ?></div>
This is the code on static html index.php page which is pulling out latest post. Can anyone help me to get featured images of these posts too?
<div id="wp-post">
<?php
$args = array('numberposts'=>1);
$recent_posts=wp_get_recent_posts($args);
foreach( $recent_posts as $recent_post ){
echo "<h3>".$recent_post['post_title']."</h3> <br>";
echo "<span>".$recent_post['post_date']."</span> <br>";
echo "<p>".$recent_post['post_content']."</p><br><br>";
}
?>
</div>
<div id="wp-post2">
<?php
$args = array('numberposts'=>1 , 'offset'=>1 );
$recent_posts=wp_get_recent_posts($args);
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_title']."</span> <br>";
echo "<p>".$recent_post['post_content']."</p><br><br>";
}
?>
</div>
<div id="wp-post3">
<?php
$args = array('numberposts'=>1 , 'offset'=>2 );
$recent_posts=wp_get_recent_posts($args);
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_title']."</span> <br>";
echo "<p>".$recent_post['post_content']."</p><br><br>";
}
?>
</div>
Please try to this code the_post_thumbnail getting the feature image
<?php
if ( $query->have_posts() ) {
$i = 1;
while($query->have_posts()) {
echo '<div id="wp-post-'.$i.'">';
$query->the_post();
?><h2><?php the_title(); ?></h2>
<?php
if ( has_post_thumbnail() ) { // only print out the thumbnail if it actually has one
echo '<p>post says it has a featured image</p>'; // double checking
the_post_thumbnail('thumbnail');
} else {
echo '<p>this post does not have a featured image</p>';
}
echo '</div>';
$i++;
}
} else {
echo '<p>no posts found</p>';
}
?>

how to create space between anchor tag elements in loop in paging

I'm creating a paging option in my website. The problem is that the paging digits is not align in the appropriate way in fact the images is attached. [This is my image in which number not align correctly
This is output of my paging numbers:
This is my code.
<section>
<div class="container" style="padding-bottom:10px; font-size:20px;">
<?php $sql1 = "SELECT * FROM videos ";
$query = $conn->query($sql1);
// Return the number of rows in result set
$rowcount = $query->rowCount();
$a=$rowcount/3;
$a= ceil($a);
for($b=1; $b<=$a; $b++)
{
?> <a style=" " href="index.php?page=<?php echo $b; ?>"><?php echo $b. " " ?> </a> <?php
}?>
</div>
</section>
But I want to align these numbering in this way:
This image exactly shows requirement of my result:
please anyone can help me. how to fix it. thanks
you should use a table as grid
Try this
<table>
<tr>
<?php
$numbers_per_row = 5;
$rowi= 0;
$numbers_limit = 25;
for($b=1; $b<=$numbers_limit ; $b++)
{
echo '<td><a href="index.php?page='.$b.'">'.$b.'</td>';
if($rowi<=$numbers_per_row) {
$rowi++;
}
else { echo '</tr><tr style="margin-top:10px;">';
/* <-- change it ^ to what you want */
/* Reset counter */
$rowi = 0; }
}
?>
</table>

Yii2: How to display Multiple images in view from path saved in database?

I have column called images in database which contain image paths.
Query:
$query = new Query;
$todo = (new yii\db\Query())
->select(['images'])
->from('room_types')
->andWhere("id = '$model->id'")
->all();
View :
<?php
foreach ($todo as $row)
{
?>
<?php echo Yii::getAlias('#web').'/'.$row; ?>
<?php
}
?>
Images path saved in db:
uploads/room_img/30.jpg;uploads/room_img/300.jpg;uploads/room_img/11928_569674493052762_732198968_n.jpg;
Tried with explode():
<?php
function room_images() {
$query = mysql_query("SELECT images FROM room_types WHERE id = $model->id");
while($row = mysql_fetch_array($query)) {
$e[] = explode(" ", $row[0]);
foreach($e as $r) {
echo $r;
}
}
}
?>
But nothing is showing
Use img method of Html class - reference
In your view file
use yii\helpers\Html;
// ...
<?php foreach ($todo as $key=>$row): ?>
<!-- html code if you need -->
<?php
foreach (explode(';', $row['images']) as $key_img => $value_img)
{
echo Html::img(Yii::getAlias('#web').'/'.$value_img);
}
?>
<!-- html code if you need -->
<?php endforeach; ?>
// ...

CSS sort of DIVs from MySQL

I need help with CSS for sorting MySQL rows to 3 column layout with fixed width and AUTO height. Can anybody can post here some link with solution, I dont know which phrase I need search for.
I created easy example image:
Look into using Isotope or Masonry to do this. They provide exactly what you're looking for.
Try to create 3 divs with class column :
<div class=column >
</div>
<div class=column >
</div>
<div class=column >
</div>
In css :
.column
{
float: left;
width: 30%;
}
Then add divs to each of your columns containing database informations you want to dump
something like this in your php code
$left_column = "<div class="column">";
$center_column = "<div class="column">";
$right_column = "<div class="column">";
$q = mysql_query(/*sql query*/);
while( $row = mysql_fetch_assoc( $q)){
$sqldata[] = $row;
}
count = 0;
foreach($sqldata as $key => $value){
if($count % 3 == 0){
//append $value['content'] to left column
$left_column .= $value['content'];
}
else if ($count % 3 == 1){
//append $value['content'] to center column
$left_column .= $value['content'];
}
else if ($count % 3 == 2){
//append $value['content'] to right column
$left_column .= $value['content'];
}
count .= 1
}
$left_column .= "</div>";
$center_column .= "</div>";
$right_column .= "</div>";
echo $left_column;
echo $center_column;
echo $right_column;
css
.column {
float:left;
width:30%;
}