I am trying to create a news site, where 3 articles (image, date, text) per row are displayed. After that a new should begin.
The code produces the articles as I want them put not the three per row printing. The first row has two articles and the rest just one.
<?php
//get all the pictures and texts
$pictures = glob('uploads/news/pictures/*');
$texts = glob('uploads/news/text/*');
if(!$pictures || !$texts){
$error_msg = 'Es gibt keine News';
echo '<h2 class="mt-2 mb-3 text-white center">'.$error_msg.'</h2>';
return;
}
//sort the pictures and texts by date
array_multisort(array_map('filemtime', $pictures), SORT_NUMERIC, SORT_DESC, $pictures);
array_multisort(array_map('filemtime', $texts), SORT_NUMERIC, SORT_DESC, $texts);
//display one picture with its text and the date within a box, 3 boxes per row
echo '<div class="container">';
$count = 1;
for($i = 0; $i < count($pictures); $i++){
if($count % 3 == 1){
echo '<div class="row">';
}
echo '<div class="col-md-4 col-sm-4 p-3 border rounded shadow-lg mx-3">';
echo '<div class="text-center">';
echo '<img src="'.$pictures[$i].'" class="img-responsive" alt="News Image">';
echo '</div>';
echo '<p class="mt-2 mb-3 form-text text-white">'.date('Y-m-d', filemtime($pictures[$i])).'</p>';
echo '<br>';
echo '<p class="mt-2 mb-3 form-text text-white">'.file_get_contents($texts[$i]).'</p>';
echo '</div>';
if(($count)%3 == 0){
echo '</div>';
}
$count++;
}
echo '</div>';
?>
Related
I am not sure the best way to go about this, on a site i'm building (using bootstrap) i want to have 3 cards per row using the grid system like:
HTML:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Which is no problem normally, but i'm building it (or trying to) dynamically:
PHP:
<main>
<br /><br /><br />
<?php
$pages = array_slice(scandir($_SERVER['DOCUMENT_ROOT']), 2);
$mixed = shuffle($pages);
$count = 0;
echo '<div class="container"><div class="row">';
foreach($pages as $page)
{
$count++;
if (strpos($page, '.php') !== false && $page != 'index.php') {
$html = file_get_contents($page);
$code = explode("|", extractXvideos($html));
?>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="<?= $code[3]; ?>" class="card-img-top" alt="<?= $code[0]; ?>">
<div class="card-body">
<p class="card-text"><?= substr($code[0], 0, 25); ?> ...</p>
</div>
</div>
</div>
<?php
if ($count == 18) {
// The reason only 15 is showing is because we ignore ".", ".." & "index.php".
break;
}
}
}
echo '</div></div>';
?>
</main>
For this project i'm scanning .php pages on the server, then trying to lay them out 3 per row, so after every row of 3 i need to start a new row echo '<div class="container"><div class="row">'; from what i can see, i do not know the best way to go about this, any help would be appreciated.
main
<?php
$pages = array_slice(scandir($_SERVER['DOCUMENT_ROOT']), 2);
$mixed = shuffle($pages);
$count = 0;
$output = '';
foreach($pages as $page) {
$count++;
if (strpos($page, '.php') !== false && $page != 'index.php') {
$html = file_get_contents($page);
$code = explode("|", extractXvideos($html));
$output .= '<div class="container">';
$output .= '<div class="row">';
$output .= '<div class="col">Column</div>';
$output .= '<div class="col">Column</div>';
$output .= '<div class="col">Column</div>';
$output .= '</div>
$output .= '</div>';
}
}
echo $output;
?>
main
try this template and apply your conditions.
I am trying to make something like the image.
I'm using WordPress and woocommerce and would like to display products like this.
This is the normal html that does the work.
I need to be able to put it into a loop:
<div class="container" style="width: 100%">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Span 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div>Span 2</div>
<div>Span 2</div>
<div>Span 2</div>
</div>
</div>
</div>
I am using the bootstrap grid.css
Here is what I have done:
while ($loop->have_posts()) : $loop->the_post();
if ($product_counter < $product_counter_max) {
if ($grid_counter == 0) { ?>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
<?php echo get_the_title();
$product = wc_get_product($loop->post->ID);
/**reviews**/
$average = $product->get_average_rating($loop->post->ID);
$review_count = $product->get_review_count($loop->post->ID);
if ($average != 0) {
for ($x = 0; $x < 5; $x++) {
if ($x < $average) {
echo '<i class="fa fa-star swatchchecked"></i>';
} else {
echo '<i class="fa fa-star"></i>';
}
}//for loop
}//end of if
else {
echo "No Rating Yet";
}//end of reviews
echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
?>
</div>
<?php
} else {
?>
<div style="clear: both">there</div>
<?php
}
}
$grid_counter++;
$product_counter++;
endwhile;
} else {
echo __('No products found');
}
wp_reset_postdata();
I'm not sure how to make the little items stack 3 on top of each other like the image
Please help!
So here's a way to create the grid layout you want. While the minute details aren't included in this answer, what I'm providing for you should give you enough of an idea of how to set up the inner portions to layout how you want those to layout.
If it was me... I'd set it up so that with your incremented grid, you can make different layouts for the columns 1 and 3 vs column 2 and 4. But like I said, this should point you in the right direction.
// Not sure why you are using a counter value when you can
// set the loop to return whatever you want. But you didn't show your loop
$product_counter_max = 8;
// Set grid counter at 1;
$grid_counter = 1;
$product_counter = 0;
echo '<div class="row">';
if ($loop->have_posts()){
while ($loop->have_posts()) : $loop->the_post();
// This next line could be superflous based on earlier comment
if ($product_counter < $product_counter_max) {
if ($grid_counter == 1 || $grid_counter == 5 ) {
echo '<div class="col-3">';
} else {
// Add an extra wrapper div around the second and fourth column
if ($grid_counter == 2 || $grid_counter == 6 ) echo '<div class="col-3">';
// This is an inner column
echo '<div class="col-12">';
}?>
<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
<?php echo get_the_title();
$product = wc_get_product($loop->post->ID);
/**reviews**/
$average = $product->get_average_rating($loop->post->ID);
$review_count = $product->get_review_count($loop->post->ID);
if ($average != 0) {
for ($x = 0; $x < 5; $x++) {
if ($x < $average) {
echo '<i class="fa fa-star swatchchecked"></i>';
} else {
echo '<i class="fa fa-star"></i>';
}
}//for loop
}//end of if
else {
echo "No Rating Yet";
}//end of reviews
echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
?>
</div>
<?php
if ($grid_counter == 4 || $grid_counter == 8 ) echo '</div>';
}
$grid_counter++;
$product_counter++;
endwhile;
} else {
echo __('No products found');
}
wp_reset_postdata();
echo '</div>';
I want to display long notes on bootstrap carousel. the notes will be fetched from mySql database. Since the notes are long, i need to split them using number of words then display them in the carousel slides. the problems is that am not able to display the splitted text in different slides. the following is what i have done:
<div class="col-md-6 ">
<div class="panel panel-primary">
<div class="panel-heading">Lecture</div>
<!-- Slider News by Carousel -->
<div id='myCarousel' class='carousel slide' data-ride='carousel'>
<ol class='carousel-indicators'>
<?php
include "config/koneksi.php";
$query = "select notes from notes where Note_ID = 34";
$res = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($res)) {
$w = $row['notes'];
$arr2 = str_split($w, 500);
}
//var_dump($arr2);
$max = sizeof($arr2);
$slides = '';
$Indicators = '';
$counter = 0;
?>
</ol>
<div class='carousel-inner'>
<?php
for ($x = 0; $x <= $max; $x++) {
if ($x == 0) {
echo "<div class='item active'>";
echo $arr2[$x]++;
echo "</div>";
} else {
echo "<div class='item'>";
if (!isset($arr2[$x])) {
$arr2[$x] = 0;
}
echo $arr2[$x]++;
echo "</div>";
}
}
echo "</div>";
echo "<a class='left carousel-control' href='#myCarousel' data-slide='prev'>‹</a>";
echo "<a class='right carousel-control' href='#myCarousel' data-slide='next'>›</a>";
echo "</div>";
echo "<!-- End Slider Caraousel-->";
?>
</div>
</div>
</div>
</div>
the result:
the result
Im a real beginner when it comes to queries and PDO, i need some assistance in a project i am busy with. What i want to accomplish is to display products from the database. However the template style i am using forces me to show 3 products per row, is there a way to show 3 products per row and loop the code once there is more than 3 (if there is 5 products, the first 3 will display in the first row, and the rest in the second).
Here is the template i am using, note the div class "top-box", this forces that only 3 products can be shown per row.
<div class="top-box">
<?php
$sql = "SELECT * FROM _products WHERE category = '$cat'";
$result = dbConnect()->query($sql);
// If the SQL query is succesfully performed ($result not false)
if($result !== false) {
$cols = $result->columnCount(); // Number of returned columns
// Generate ADS Feed for each ROW
foreach($result as $row) {
echo '<div class="col_1_of_3 span_1_of_3">
<a href="product.php?i=' . $row['model'] . '">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/' . $row['model'] . '.jpg" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">' . $row['name'] . '</p>
</div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
}
} else {
echo "<p>No products available at this moment, contact us for more information!</p>";
}
?>
<div class="clear"></div>
</div>
You can solve it like this:
<?php
if ($counter % 3 == 0 && $counter!=$total_row_fetched) {
echo '<div class="clear"></div>';
echo '</div>';
echo '<div class="top-box">';
}
if($counter==$total_row_fetched){
echo '<div class="clear"></div>';
echo '</div>'; // it will close the last open div
}
++$counter;
?>
You can use a count variable inside your products foreach-loop. Every three products you can close the top-box and open a new one (This is an assumption as I don't know exactly how your styles work).
At the end of the foreach-loop:
if ($count != 0 && $count % 3 == 0) {
echo '<div class="clear"></div>';
echo '</div>'; // close last .top-box
echo '<div class="top-box">';
}
++$count;
I don't see how your question is connected to PDO. Keep in mind that using unescaped variables inside a query is potentially dangerous. Have a look here for some help: https://stackoverflow.com/a/60496/2516377
Add a counter and use % arithmetic operator to calculate column number.
$counter=0;
foreach (...) {
$column_number=$counter % 3;
$counter++;
}
I want to create a row if columns greater than 3 using PHP loop because i am using wordpress
My code is here
<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
</div>
If columns are greater than 3, then it should create a new row like this
<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
</div>
<div class="row">
<div class="column">column1</div>
</div>
Any help will be highly appreciated.
Thanks in advance
Sure - just use modulus:
<?php
$elements = array('foo', 'bar', 'rab', 'oof');
echo '<div class="row">';
foreach ($elements as $i => $element) {
if ($i > 0 && $i % 3 == 0) {
echo '</div><div class="row">';
}
echo '<div class="column">' . $element . '</div>';
}
echo '</div>';
?>
DEMO
Output:
<div class="row">
<div class="column">foo</div>
<div class="column">bar</div>
<div class="column">rab</div>
</div>
<div class="row">
<div class="column">oof</div>
</div>
You need something like this:
<?
echo '<div class="row">';
for ($i=0; $i<15;$i++){
if ($i%3 == 0 && $i != 0){
echo '</div><div class="row">';
}
echo '<div class="column">column '.($i+1).'</div>';
}
echo '</div>';
?>
WORKING CODE
There is alternative solution with function.
<?php
// Managing the Code -- Functions: Handling a Variable Number of Parameters
// building a row of 10 <td> columns with a variable number of items
function preferencesRow()
{
// initialize $output
$output = '';
// use "func_get_args()" to collect all parameters into an array
$params = func_get_args();
// used to make sure 10 columns are filled
$maxCols = 10;
// loop through the parameters
foreach ($params as $item) {
$output .= "<td width='80px' align='center'>$item</td>\n";
$maxCols--;
}
// fill in the rest of the row with empty columns
for ($x = 0; $x < $maxCols; $x++) {
$output .= "<td width='80px'> </td>\n";
}
return $output;
}
// NOTE: you can use "." or "," with echo
echo '<h1>Preferences</h1><hr />' . PHP_EOL;
echo '<table border=1>' . PHP_EOL;
echo '<tr><th>Tarzan</th>';
echo preferencesRow('Africa', 'jungles', 'tantor', 'mangani', 'cabin in the woods',
'hunting', 'swinging in trees', 'Jane');
echo '</tr>';
echo '<tr><th>Jane</th>';
echo preferencesRow('London', 'parties', 'dancing', 'social events', 'lavish estates');
echo '</tr>';
echo '</table>' . PHP_EOL;