I am creating a div structure for displaying data from db.
In my case all are getting written else I was not able to print that data properly.
I have one main div (col-md-12) and in that I have added (col-md-4)
I have fetch images from db like echo $img; in php so the images will come properly but they are not from left to right like they are displayed below on each div rather than inserting left to right, so my question is how to insert that div from left-to- right rather than below of each other
and what i want like this below img
This is my code
Your HTML structure should be like that:
<div class="main">
<div class="col-sm-12">
<div class="col-sm-4">
// image one
</div>
<div class="col-sm-4">
// image two
</div>
<div class="col-sm-4">
// image three
</div>
</div>
</div>
IF you are using HTML inside the loop than you can follow this:
<div class="main">
<div class="col-sm-12">
<?
$i = 1;
foreach ( yourloop ) {
?>
<div class="col-sm-4">
// image one
</div>
<?
// after every third record use clear div
if($i == 3){
?>
<div style="clear:both"></div>
<?
$i = 1; // reassign the value
}
$i++;
}
?>
</div>
</div>
UPDATE 1:
Solution with your provided code:
<div class="main">
<div class="col-sm-12">
<?
while ( yourloop ... ) {
?>
<div class="col-sm-4">
// your stuff
</div>
<?
}
?>
</div>
</div>
What i have changed?
you need to use <div class="col-sm-4"> inside your loop and you can also follow the second example with clear:both; div.
UPDATE 2 (For Future aspects):
For new designers and developers you must need to understand Basic grid layouts:
FROM Bootstrap Examples:
You can also follow this link getting information about the difference between bootstrap classes:
FROM other answer:
.col-xs = *Extra small devices (ie Phones) (<768px)
.col-sm = Small devices (ie Tablets) (≥768px)
.col-md = Medium devices (ie laptops, or small desktops) (≥992px)
.col-lg = Large devices (ie Desktops) (≥1200px)*
Since this is bootstrap you can do this by keeping three images in a row.
Pseudocode
counter = 0
for i in images:
if counter = 0:
print "<div class = 'row'>"
print "<div class='col-md-3'>"+i+"</div>"
counter++;
counter = counter % 3;
if counter == 0:
print "</div>"
You could simply create blocks with the (CSS) style definition float:left; as in the example below:
<?php
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"de-de\" lang=\"de-de\" >
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />
<style type="text/css">
";
echo '.panel { float:left; margin:4px; border:1px solid #999; }'.PHP_EOL;
echo '.clear { clear:both; }'.PHP_EOL;
echo 'H3 { font-size:0.8em; background-color: #666; color:white; margin:0 0 4px 0; font-weight:bold; text-align:center; }'.PHP_EOL;
echo "</style>
</head>
<body>
";
echo '<h2>Block 1</h2>';
for ($xi=1; $xi<=5; $xi++) {
echo '<div class="panel"><h3>Panel 1.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
}
echo '<div class="clear"></div>';
echo '<h2>Block 2</h2>';
for ($xi=1; $xi<=5; $xi++) {
echo '<div class="panel"><h3>Panel 2.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
}
echo '<div class="clear"></div>';
echo "</body>
</html>
";
?>
I'm working on a project in which I want to display randomly any given number of results suppose, I have six <html> tags of image and I only want to display three randomly so that every time we refresh the page it show randomly any three image out of any six
I'm using html code for an example
<html>
<body>
<div class=1>
<a href="http://example1.com">
<div>
<img src="image1.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example2.com">
<div>
<img src="image2.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example3.com">
<div>
<img src="image3.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example4.com">
<div>
<img src="image4.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example5.com">
<div>
<img src="image5.jpg">
</div>
</a>
</div>
<div class=1>
<a href="http://example6.com">
<div>
<img src="image6.jpg">
</div>
</a>
</div>
</body>
</html>
Out of this Six Images I only want to show any three Images Each time through php. Is it possible and how can I do that?
Hope you may find any better solution.
Also i want to display Other tags like link inthe image and some more tags so that i can display images in a better way through css so I think it can be done by switch statement more easily
Let's say you have a array with all the images. From that list, we randomly get the keys for 3 of the images. We then through a loop echo out the img tag:
<html>
<body>
<?php
$images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg',
'image6.jpg'
];
// Selects 3 random array values and returns the key for each value
$randomkeys = array_rand($images, 3);
// Here we loop through the given index keys from the $images array.
// For each key we will then get the value from $images with the index $key
foreach ($randomkeys as $key) {
// I end with PHP_EOL (End of line) so the source code will look a bit prettier.
echo "<div class=\"image\"><img src=\"{$images[$key]}\"></div>".PHP_EOL;
}
?>
</body>
</html>
If something was unclear, let me know
Edit 1: Added more tags
It's not hard to add more tags to the output. If you know how to echo string and variables you should be able to easy add more tags or change them the way you want.
As you can see in the update I have added the class image to the , and made the link to the same path as the image so when you click it it will just open the image in the same window.
<?php
$images=array('image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg');
shuffle($images);
for($i=0;$i<=2;$i++){
echo '<img src="'.$images[$i].'" />';
}
?>
Just expanded Morten's code:
<html>
<body>
<?php
$images = array(
array('img' => 'image1.jpg', 'url' => 'http://example1.com', 'div' => 'class="d1"'),
array('img' => 'image2.jpg', 'url' => 'http://example2.com', 'div' => 'class="d2"'),
array('img' => 'image3.jpg', 'url' => 'http://example3.com', 'div' => 'class="d3"'),
array('img' => 'image4.jpg', 'url' => 'http://example4.com', 'div' => 'class="d4"'),
array('img' => 'image5.jpg', 'url' => 'http://example5.com', 'div' => 'class="d5"'),
array('img' => 'image6.jpg', 'url' => 'http://example6.com', 'div' => 'class="d6"')
);
// Selects 3 random array values and returns the key for each value
$randomkeys = array_rand($images, 3);
// Here we loop through the given index keys from the $images array.
// For each key we will then get the value from $images with the index $key
foreach ($randomkeys as $key) {
// I end with PHP_EOL (End of line) so the source code will look a bit prettier.
echo '<div class="1">' . PHP_EOL . '' . PHP_EOL . '<div ' . $images[$key]['div'] . '>' . PHP_EOL . '<img src="' . $images[$key]['img'] . '">' . PHP_EOL . '</div>' . PHP_EOL . '</div>' . PHP_EOL;
}
?>
</body>
</html>
Result:
https://3v4l.org/OAc6l
Like #AbraCadaver said.
<?php
// vim: set ts=4 sw=4 et:
$myImages = array_map(function($i) { return "/foo$i.jpg"; }, range(1, 6));
foreach (array_map('htmlspecialchars', array_map(function ($i) { global $myImages; return $myImages[$i]; }, array_rand($myImages, 3))) as $image)
echo "<img src=\"$image\"/>\n";
You can keep your src paths in an array. Then you can use array_rand() function to get random array index.
For example:
<?php
$allImages = ["images1.jpg","images2.jpg","images3.jpg","images4.jpg","images5.jpg","images6.jpg"];
//this will return random keys of $allImages array
$randomKeys = array_rand($allImages, 3);
foreach($randomKeys as $key){ ?>
<div><img src="<?php echo $allImages[$key] ?> " ></div>
<?php
}
?>
This is how you can do this using php
In this case, you mean if the page is already prepared ( may be the page is external webpage, or another page which is being already designed) i would use Simple Html Dom. Download and include the folder to the project.
example.html
<html>
<style>
img{
width:100px;
height:100px;
}
</style>
<body>
<div class=1>
<a href="http://example1.com">
<div>
<img src="image (1).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example2.com">
<div>
<img src="image (2).jpg" >
</div>
</a></div> <div class=1>
<a href="http://example3.com">
<div>
<img src="image (3).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example4.com">
<div>
<img src="image (4).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example5.com">
<div>
<img src="image (5).jpg" >
</div>
</a></div>
<div class=1>
<a href="http://example6.com">
<div>
<img src="image (6).jpg" >
</div>
</a></div>
</body>
</html>
myphp.php
/**echo '<style>
img{
width:100px;
height:100px;
}
</style>';**/
//using Simple HTML DOM. This file is in Simple Html Dom folder downloaded
include('simple_html_dom.php');
// get DOM from URL or file
$html = file_get_html('example.html');// you can write your external website file here www.external.com/index.html
// find all link
foreach($html->find('a') as $e)
//echo $e->href . '<br>';
$image_with_link['link'][]=$e->href;
// find all image
foreach($html->find('img') as $e)
//echo $e->src . '<br>';
$image_with_link['image'][]=$e->src;
//for debugging
//echo '<pre>';
//print_r($image_with_link);
//echo '</pre>';
//loop number of times, here i want to display three images
for($i=0;$i<3;$i++){
//get random key from array
$rand=array_rand($image_with_link['image'],1);
//print 3 images with its links
echo '<a href="'.$image_with_link['link'][$i].'" />';
echo '<img src="'.$image_with_link['image'][$i].'" />';
}
Treat the code as one big string. Remove <HTML>, </HTML>, <BODY>, and </BODY> from that string. You can add them back whenever you want. Next, explode the string around "<DIV ". For the array that is created, add "<DIV " to the start of each element. You now have an array containing each div section which has each image and link you want. You can then pick ones at random from that array and insert as needed:
// remove HTML and BODY tags
$remove1 = str_replace("<HTML>", "", $original);
$remove2 = str_replace("<BODY>", "", $remove1);
$remove3 = str_replace("</HTML>", "", $remove2);
$cleaned = str_replace("</BODY>", "", $remove3);
// explode remaining code around "<DIV " so we have each division for each image
$codeArray = explode("<DIV ", $cleaned);
// with our code sectioned in an array, add "<DIV " back to the start
// of each element in the array
for ($x = 0; $x < count($codeArray); $x++){
$codeArray[$x] =. "<DIV ";
}
// the $codeArray now has $x elements of the sections that contain the
// links and images you want.
// You can now randomly grab the div's that you want, by
// Shuffling that array, pick the first X images you want, and then
// echo back out the code you want.
shuffle($codeArray);
echo "<HTML>";
echo "<BODY>";
for ($x = 0; $x < $whateverNumberOfImagesYouWant; $x++){
echo $codeArray[$x];
}
echo "</BODY>";
echo "</HTML>";
I have this code:
<div class="big">
<div class="small">
<img src="images/icons/AC.png" />
AC & Refrigeration
</div>
<div class="small">
<img src="images/icons/AC.png" />
AC & Refrigeration
</div>
</div>
The code is such that the class='big' has to be repeated to show the icons enclosed in the class='small'.
the class-'small' is to display only 2 icons inside the div for class='big' once the two icons in the class='small' has displayed two icons, the div big has to be repeated. the same shall continue for about 80 icons.
please suggest how i can use a counter variable (e.g. one that begins with 1, increments to 2 and then resets to 1). Use the counter value to wrap two folder items (i.e. div class="small" ../div) within the div class="big"../div.
Provided an even number of icons, something like this would work:
<?php
$counter = 0;
foreach( $icons as $icon ) {
if ( $counter % 2 == 0 ) echo '<div class="big">';
?>
<div class="small">
<img src="<?= $icon->src ?>" />
<?= $icon->name ?>
</div>
<?php
if ( $counter % 2 == 1 ) echo '</div>';
$counter++;
}
?>
You'd have to add a little extra code to account for odd cases in necessary. The trick is to keep track of when you are on an even or odd icon with $counter % 2
in ZOO Application/templates/uikit/_categories.php have this code:
<?php
// init vars
$i = 0;
$columns = $this->params->get('template.categories_cols', 2);
reset($this->selected_categories);
// render rows
while ((list($key, $category) = each($this->selected_categories))) {
if ($category && !($category->totalItemCount() || $this->params->get('config.show_empty_categories', false))) continue;
if ($i % $columns == 0) echo ($i > 0 ? '</div><hr class="uk-grid-divider"><div class="uk-grid">' : '<div class="uk-grid">');
echo '<div class="uk-width-1-'.$columns.'">'.$this->partial('category', compact('category')).'</div>';
$i++;
}
if (!empty($this->selected_categories)) {
echo '</div>';
}
?>
Render look like this:
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
<hr class="uk-grid-divider">
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
And I want this (only one div.uk-grid for all div.uk-width* and without hr.uk-grid.divider):
<div class="uk-grid">
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
<div class="uk-width-1-3"></div>
</div>
Can someone help me with this, i am not good in php?
Thanks.
My modified code which not work :(
<?php
$columns = $this->params->get('template.categories_cols', 2); // I dont know why is at end ", 2"
reset($this->selected_categories); // I dont know why is needed reset array
// render rows
while ((list($key, $category) = each($this->selected_categories))) {
if ($category && !($category->totalItemCount() || $this->params->get('config.show_empty_categories', false))) {
echo '<div class="uk-grid">'; // I dont know why is not rendered
}
echo '<div class="uk-width-1-'.$columns.'">'.$this->partial('category', compact('category')).'</div>';
}
if (!empty($this->selected_categories)) {
echo '</div>';
}
?>
You must have set a parameter to add two columns, that's what kicks in the code that adds the separator.
The name of the parameter is template.categories_cols it will be translated though to something in english.
This is a commercially supported extension, you might be able to get some support on their forums
Your best bet would be to set your columns at 1, then use UIKit's CSS to size your divs. This means you'd want your container class to be uk-grid uk-grid-width-1-3, then to remove the uk-width-1-3 from the inner divs. The added benefit here is that you can vary layout depending on your screen size > Grid Component - UIKit.
In your PHP you could remove the columns param all together. Remove the line starting with $columns..., the single spot it's echo'd '.$columns.', and you should be all set.
The PHP was using your "columns" variable to split divs (2 was the default), but if you tailor the container you can avoid the column assignment altogether.
I created a page to display messages that are saved into a database.The messages are displayed with a picture. I have the following DIV layout:
<div id="MessageWrapper">
<div id="MessagePicture"></div>
<div id="MessageText">
<div id="MessageTitle"></div>
<div id="MessageContent"></div>
</div>
</div>
I wanted the div 'MessagePicture' and 'MessageText' to alternate their position (left and right) So The final code I have is:
$i = 0;
while ($Row = mysql_fetch_assoc($Result))
{
$class = (++$i % 2) ? 'even' : 'odd';
echo '
<div id="MessageWrapper">
<div id="MessagePicture" class="'.$class.'">
<style>
#MessagePicture {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
background-repeat: no-repeat;
background-position: center
</style>
</div>
<div id="MessageText" class="'.$class.'">
<div id="MessageTitle">
<h1>'.$Row['NameBox'].'</h1>
</div>
<div id="MessageContent">
<p>'.nl2br($Row['MessageBox']).'</p>
</div>
</div>
</div>
The problem I'm facing: although the parsed source code has different codes ($Row['Code']) in the url of the background image, all the messages display the same image.
It is always the first image of the first ($Row['Code']) that is entered into the database.
Does anyone know how to resolve this problem?
Give each of your divs a unique id. For example:
$i = 0;
while ($Row = mysql_fetch_assoc($Result))
{
$class = (++$i % 2) ? 'even' : 'odd';
echo '
<div id="MessageWrapper'.$i.'">
<div id="MessagePicture'.$i.'" class="'.$class.'">
<style>
#MessagePicture'.$i.' {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
}
</style>
... etc ...
}
You end up with the first div having an id of MessagePicture1 and a corresponding #MessagePicture1 style, the next one MessagePicture2, and so on.