I'm trying to implement a simple pagination using PHP and Twitter Bootstrap but got stuck.
Everything seems to work fine the only problem is my div's are floating all around leaving some empty spaces in the page like in this picture:
Below is my code:
<?php foreach($tester as $data): ?>
<div class="col-sm-2">
<img src="" width="150" height="150"/>
<br>
<span><?php echo $data['Description'];?></span><br>
<span><?php echo $data['Unit_Price'];?></span><br>
<span>In Stock:<?php echo $data['Qty'];?></span><br>
<span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br>
<span>Show All Products In:<?php echo $data['P_Class_Name'];?></span>
</div>
<?php endforeach;?>
Put class="clearfix" div after each 6 elements to create non float sensitive line break
<?php $i=0; foreach($tester as $data): $i++; ?>
<div class="col-sm-2">
<img src="" width="150" height="150"/>
<br>
<span><?php echo $data['Description'];?></span><br>
<span><?php echo $data['Unit_Price'];?></span><br>
<span>In Stock:<?php echo $data['Qty'];?></span><br>
<span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br>
<span>Show All Products In:<?php echo $data['P_Class_Name'];?></span>
</div>
<?php if ($i % 6 == 0) { ?><div class="clearfix"><?php } ?>
<?php endforeach;?>
However, this solution shouldn't be used if you need a different number of elements to displayed per row for a different viewpoint size.
Related
Trying to display the custom posts on my archive page within a bootstrap row containing 3 columns then starting a new row, got the code but new to PHP and dont know where to put the content.
<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 3;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
<div class="row">
<?php
foreach ($rows as $row){
?>
<div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
<div class="thumbnail">
<img src="user_file/<?php echo $row->foto; ?>">
</div>
</div>
<?php
$rowCount++;
if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
}
?>
</div>
<div class="embed-container">
<?php the_field('podcast_embed_link'); ?>
</div>
<h3><?php the_title(); ?></h3>
<p><b><?php echo $date->format( $format_out );?></b></p>
<p><?php the_field('description'); ?></p>
<?php if( get_field('thumbnail') ): ?>
<img src="<?php the_field('thumbnail'); ?>" />
<?php endif; ?>
<?php endwhile; // end of the loop. ?>
</div>
</div>
</div><!-- #content -->
Here is the code for the page archive.podcasts.php, where would i add the custom fields within the row loop?
First of all, you don't need to close and open row tag each 3 items. If you leave the code like this:
<div class="row">
<?php
foreach ($rows as $row){
?>
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
<div class="thumbnail">
<img src="user_file/<?php echo $row->foto; ?>">
</div>
</div>
<?php
}
?>
</div>
you will get the same effect, but without the separation that a row tag involves. Notice that the line involving "col-md-4" has already changes in order to not create wrong col size usage.
In this part of code:
<div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
You must get wrong bootstrap class like col-md-41, col-md-412.
Correct you code by this way:
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
I need to display 1 (first) image which path is saved in database like Img1.jpg;img2.jpg;, I tried to seperate each path by using explode, getting all the images as array but not able to pick single path-
<div class="col-sm-6 masonry-item">
<a href="<?php echo Url::to(['site/roompage']); ?>" class="product_item text-center">
<span class="product_photo bordered_wht_border">
<?php
foreach (explode(';',rtrim($row['images'],';'),1) as $key_img => $value_img)
{
?>
<?php echo Html::img('#backend/web'.'/'.$value_img);?>
<?php
}
?>
</span>
<span class="product_title"><?php echo $row['room_type']; ?></span>
<span class="product_price">Rs.<?php echo $row['rate']; ?></span>
</a>
</div>
<?php endforeach; ?>
<?php
// if you want only the first image is better
$my_image = explode(';',rtrim($row['images'],';'),1);
echo Html::img('#backend/web'.'/'.$my_image[0]);
}
?>
otherwise
<?php
// if you want all the image
foreach (explode(';',rtrim($row['images'],';')) as $key_img => $value_img)
{
echo Html::img('#backend/web'.'/'.$value_img);
}
?>
this because (explode(';',rtrim($row['images'],';'),1) return an array of two element (the first and the rest)
The src parameter, containing the backend alias, will be processed by Url::to()
Check the docs for details on Html::img()
Firstly, I am a total php newby.
Secondly, below is the php header plus corresponding recursive commands for 2 photo lightboxes that are in the same html page.
Without the lines
getRecords() as $Title_row){ ?>
The page shows shows the first picture that is held in the external db table in the lightbox correctly.
Yet when I add the line below to add all the other entries in each table
getRecords() as $Title_row){ ?>
the page goes white and the browser html return is empty.
As I do not really understand what I am doing, I am stuck. Any suggestions would be very welcome.
<?php
$Title_find = $Lowdenphotoweb->newFindCommand('MASTER_photo');
$Title_findCriterions = array('Order_web'=>'*',);
foreach($Title_findCriterions as $key=>$value) {
$Title_find->AddFindCriterion($key,$value);
}
fmsSetPage($Title_find,'Title',50);
$Title_find->addSortRule('Order_web',1,FILEMAKER_SORT_ASCEND);
$Title_result = $Title_find->execute();
if(FileMaker::isError($Title_result)) fmsTrapError($Title_result,"error.php");
fmsSetLastPage($Title_result,'Title',50);
$Title_row = current($Title_result->getRecords());
?>
<?php
$Title1_find = $Lowdenphotoweb->newFindCommand('MASTER_photo');
$Title1_findCriterions = array('Order_web'=>'*',);
foreach($Title1_findCriterions as $key=>$value) {
$Title1_find->AddFindCriterion($key,$value);
}
fmsSetPage($Title1_find,'Title',50);
$Title1_find->addSortRule('Order_web',1,FILEMAKER_SORT_ASCEND);
$Title1_result = $Title1_find->execute();
if(FileMaker::isError($Title1_result)) fmsTrapError($Title1_result,"error.php");
fmsSetLastPage($Title1_result,'Title',50);
$Title1_row = current($Title1_result->getRecords());
?>
<!DOCTYPE html>
<!-- Lightbox Gallery -->
<?php foreach($Title_result->getRecords() as $Title_row){ ?>
<div class="hide">
<a data-group="gallery-1" data-caption="<?php echo $Title_row->getField('Title'); ?>" href="<?php echo $Title_row->getField('Pic_location'); ?>"></a>
</div>
<?php foreach($Title2_result->getRecords() as $Title2_row){ ?>
<div class="hide">
<a data-group="gallery-2" data-caption="<?php echo $Title2_row->getField('Title'); ?>" href="<?php echo $Title2_row->getField('Pic_location'); ?>"></a>
</div>
<!-- Lightbox Gallery End-->
You just missed out the closing brackets :
<?php foreach($Title_result->getRecords() as $Title_row){ ?>
<div class="hide">
<a data-group="gallery-1" data-caption="<?php echo $Title_row->getField('Title'); ?>" href="<?php echo $Title_row->getField('Pic_location'); ?>"></a>
</div>
<?php }?>
<?php foreach($Title2_result->getRecords() as $Title2_row){ ?>
<div class="hide">
<a data-group="gallery-2" data-caption="<?php echo $Title2_row->getField('Title'); ?>" href="<?php echo $Title2_row->getField('Pic_location'); ?>"></a>
</div>
<?php }?>
I am looking to offset a group of PHP array results to create multiple rows of data.
For example, the first row will contain the first four array results, with the second row displaying results 5-8 and the third row containing results 9-12.
Currently, I am printing out all 12 in one list, however I'd like a bit more display control (i.e. ordering the results into columns which I can style independent of each), hence why I'd like to offset the results.
My current PHP is below:
<?php
if (empty($tmdb_cast['cast'])) {
} else {?>
<section class="cast">
<p class="title">Cast</p>
<ul class="section_body"><?php
foreach($tmdb_cast['cast'] as $key => $castMember){
if ($key < 12) {?>
<li class="actor_instance clearfix"><?php
if ($castMember['profile_path'] != '') {?>
<img src="http://cf2.imgobject.com/t/p/w45<?php echo $castMember['profile_path']; ?>" class="actor_image pull-left" alt="<?php echo $castMember['name']; ?>" title="<?php echo $castMember['name']; ?>" /><?php
} else {?>
<img src="assets/images/castpic_unavailable.png" class="actor_image pull-left" alt="No image available" title="No image available" /><?php
}?>
<p class="actor"><?php echo $castMember['character']; ?> - <?php echo $castMember['name']; ?></p>
</li><?php
}
}?>
<div class="morecast pull-right">[...view all cast]</div>
</ul>
</section><?php
}?>
P.S. Apologies for how I've formatted the code in the above block - I'm still not 100% sure how to make it look "nice" on StackOverflow.
Use array_chunk to break a single dimension array into a 2D array. Then you can loop through each chunk, and then each result, to get that "offset" effect between them.
$chunks = array_chunk($tmdb_cast['cast'], 4); // 4 here, is the number you want each group to have
foreach($chunks as $key => $chunk)
{
foreach($chunk as $castMember)
{
//display castMember here
}
// add code between groups of 4 cast members here
}
First: mixing php and html this way is a very bad habbit... one day you will have to maintain your code and that day you will vomit all over your desk because you mixed different languages in one file...
That being said..
and without creating a new array:
foreach($tmdb_cast['cast'] as $key => $castMember)
{
if ($key < 12)
{
// your code goes here
// if key is 3, or 7 the code below will close the listcontainer and open a new one...
if( ($key+1)%4 == 0 AND $key <11)
echo '</ul> <ul class="section_body">';
}
}
Also replace this:
if (empty($tmdb_cast['cast']))
{
}
else {
with this:
if (!empty($tmdb_cast['cast']))
{
I'm not entirely sure what you're looking for but here's how I would format your code. Alternative syntax for 'if' is a little more readable, and the use of for loops instead of a foreach will give you the control over row numbers you say you're looking for.
<?php if( ! empty($tmdb_cast['cast'])): ?>
<section class="cast">
<p class="title">Cast</p>
<ul class="section_body">
<?php
for($i = 0; $i < 12; $i++):
$castMember = $tmdb_cast['cast'][$i];
?>
<li class="actor_instance clearfix">
<?php if($castMember['profile_path'] != ''): ?>
<img src="http://cf2.imgobject.com/t/p/w45<?php echo $castMember['profile_path']; ?>" class="actor_image pull-left" alt="<?php echo $castMember['name']; ?>" title="<?php echo $castMember['name']; ?>" />
<?php else: ?>
<img src="assets/images/castpic_unavailable.png" class="actor_image pull-left" alt="No image available" title="No image available" />
<?php endif; ?>
<p class="actor"><?php echo $castMember['character']; ?> - <?php echo $castMember['name']; ?></p>
</li>
<?php endfor; ?>
<div class="morecast pull-right">[...view all cast]</div>
</ul>
</section>
<?php endif; ?>
I am trying to implement the jQuery live thumbnails with my PHP page. On the page I am retrieving event information along with a comma separated list of thumbnail values. The plugin works a bit differently that that and I am having difficulty adapting my script to work. The plugin is located here http://tutorialzine.com/2012/12/album-photo-previews-jquery/. In their example they use an array while I have a comma separated list of thumbnails. The code I have so far is here...
<?php foreach ($events as $event) { ?>
<div class="left13 section_home" style="margin-bottom:25px;">
<h2><?php echo $event['event_title']; ?></h2>
<div align="center">
<?php foreach ($event['thumbnails'] as $thumbnail) { ?>
<a href="#" data-images="<?php echo str_replace(',', '|', $event['thumbnails']); ?>" class="album">
<img src="<?php echo ($event['thumbnails'] != '') ? base_url() . 'media/photos/thumbnail/' . $event['thumbnails'] : base_url() . 'images/no_photo_thumbnail.png'; ?>" alt="" title="" /><span class="preloader"></span></a>
<p><?php echo ($event['event_description'] != '') ? substr($event['event_description'], 0, 200) : 'No description yet...'; ?></p>
<span class="swirl_left"><span class="swirl_right">View This Event</span></span>
<?php } ?>
</div>
</div>
<?php } ?>
How would I be able to make this script work by using a comma separated list of thumbnail values instead of the array used in the tutorial? Thanks!
I figured it out and the answer is quite simple. First, my data coming from the database included a comma separated list of thumbnails. I just used the proper functions to insert that data into the script. The only problem I have now is that I need to add the path to the beginning of each value in the comma separated list. Is there a PHP function to do that? Below is my almost finished code.
<div class="content">
<?php foreach ($events as $event) {
// Create an array out of the comma separated list of thumbnails
$thumbnails = explode(',', $event['thumbnails']); ?>
<div class="left13 section_home" style="margin-bottom:25px;">
<h2><?php echo $event['event_title']; ?></h2>
<div align="center">
<img src="<?php echo base_url() . 'media/photos/thumbnail/' . $thumbnails[0]; ?>" alt="" title="" /><span class="preloader"></span>
<p><?php echo ($event['event_description'] != '') ? substr($event['event_description'], 0, 200) : 'No description yet...'; ?></p>
<span class="swirl_left"><span class="swirl_right">View This Event</span></span>
</div>
</div>
<?php } ?>
</div>
To finish this up I need to add the following to the beginning of each item in $event['thumbnails']...
<?php echo base_url(); ?>media/photos/thumbnail/
Then it should work perfectly.