I have a list of blocks to print in my web page. Data of these blocks are stored in a database like this:
Priority column corresponds to the priority id to print blocks order by ascendant priority id. Size column corresponds to the size of the block (0 or 1), 0 for half width of the page and 1 for full width of the page.
The blocks can be added dynamically, currently the first half width block positions on the left (float: left) and the next block on the right, any problem for the full width blocks.
My problem is when I have 4 half width blocks successive, I have this display:
Here my code:
<?php
$i = 1;
foreach (Block::getAll($diagnostic) as $block)
{
if ($block['size'] == 0)
{
$size = 6;
if (Block::get($diagnostic, $block['priority'] + 1, 'size') == 0 && Block::get($diagnostic, $block['priority'] + 1, 'size') != null)
{
?>
<div class="row">
<div class="cols-<?php echo $size; ?> blocks">
<div class="header"><h3>Titre <?php echo Block::get($diagnostic, $block['priority'], 'priority'); ?></h3></div>
<div class="body">
<p>Texte <?php echo Block::get($diagnostic, $block['priority'], 'priority'); ?></p>
</div>
</div>
<div class="cols-<?php echo $size; ?> blocks">
<div class="header"><h3>Titre <?php echo Block::get($diagnostic, $block['priority'] + 1, 'priority'); ?></h3></div>
<div class="body">
<p>Texte <?php echo Block::get($diagnostic, $block['priority'] + 1, 'priority'); ?></p>
</div>
</div>
</div>
<?php
}
else if (Block::get($diagnostic, $block['priority'] + 1, 'size') != 0 && Block::get($diagnostic, $block['priority'] - 1, 'size') != 0)
{
?>
<div class="row">
<div class="cols-<?php echo $size; ?> blocks">
<div class="header"><h3>Titre <?php echo $block['priority']; ?></h3></div>
<div class="body">
<p>Texte <?php echo $block['priority']; ?></p>
</div>
</div>
</div>
<?php
}
}
else
{
$size = 12;
?>
<div class="row">
<div class="cols-<?php echo $size; ?> blocks">
<div class="header"><h3>Titre <?php echo $block['priority']; ?></h3></div>
<div class="body">
<p>Texte <?php echo $block['priority']; ?></p>
</div>
</div>
</div>
<?php
}
++$i;
}
In pleasure to read you.
Problem solved.
I deleted the container and I added display-block attribute to my blocks with 50% width for half blocks and 100% width for full blocks.
PHP side, I get the size value from the database and I push the half class or full class according this data.
Related
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row text-center">
<?php
if($_GET[id] == 0)
{
$querysb = mysql_query("SELECT * FROM services WHERE parentid !=0 order by parentid, cid ");
}
else
{
$querysb = mysql_query("SELECT * FROM services WHERE parentid='".$_GET[id]."'");
}
while($rowsb = mysql_fetch_assoc($querysb))
{
if($val == '6' || $val =='10'){
$classname = 'whitebg';
} else {
$classname = 'bg-blue co-white';
}
?>
<div class="col-md-4 mrgnBtm15">
<div class="<?php echo $classname;?> padding30" style="min-height: 250px">
<h3 class="service-heading">
<?php echo $rowsb['cname'];?>
</h3>
<h4>
RS <?php echo $rowsb['price'];?><br>
</h4>
<div class="mrgnTop15 clearfix"></div>
<a class="btn bg-orange co-white" href="<?php echo MYWEBSITE;?>servicedetail/<?php echo to_prety_url($rowsb['cname']).'-'.$rowsb['cid'];?>.html">
<font style="size:14px; color:#000; font-weight:bolder;font-family: "Open Sans";">Register</font></a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
I am working on a dynamic website. here is the code of a particular page. In this page there is a div section with class="col md-4". If the number of content panel in that division appears to 5 or 7 in that case I want only the last panel (i.e 5th and 7th) to be in full column (col-12). What should I do?
Since you are using col-md-4, 3 divs will be shown each row. So I think what you are looking for is a way to make the last div full width if its going to be alone in its row. In that case, you will need to make it col-md-12 on 4th (not 5th) and 7th and 10th records and so on. This is exactly what the following code does,
I think what you want to do is show the
<?php
if($_GET[id] == 0)
{
$querysb=mysql_query("SELECT * FROM services WHERE parentid !=0 order by parentid, cid ");
}
else
{
$querysb=mysql_query("SELECT * FROM services WHERE parentid='".$_GET[id]."'");
}
$number_of_records = mysql_num_rows($querysb);
$counter = 1;
while($rowsb=mysql_fetch_assoc($querysb))
{
if($val == '6' || $val =='10'){
$classname= 'whitebg';
}else{
$classname= 'bg-blue co-white';
}
//if($number_of_records %3 ==1 && $counter == $number_of_records)
if(($number_of_records == 5 || $number_of_records == 7) && $counter == $number_of_records)
$col_class = "col-md-12";
else
$col_class = "col-md-4";
?>
<div class="<?php echo $col_class;?> mrgnBtm15">
<div class="<?php echo $classname;?> padding30" style="min-height: 250px">
<h3 class="service-heading">
<?php echo $rowsb['cname'];?>
</h3>
<h4>
RS <?php echo $rowsb['price'];?><br>
</h4>
<div class="mrgnTop15 clearfix"></div>
<a class="btn bg-orange co-white" href="<?php echo MYWEBSITE;?>servicedetail/<?php echo to_prety_url($rowsb['cname']).'-'.$rowsb['cid'];?>.html">
<font style="size:14px; color:#000; font-weight:bolder;font-family: "Open Sans";">Register</font></a>
</div>
</div>
<?php
$counter++;
} ?>
</div>
</div>
</div>
I have a 5 point rating system I am trying to change up how it displays the rating.
So before it would be 5 dots all white if not rated, then color in the ratings blue.. I would display these dots via fontawesome glyphs. So it would output 5 of them.
But now i'm trying to change it where the 5 point rating would display a progress bar and the 5 points be used as percentages for the length of progress.
Sorry if i am vague, I can explain more if needed. It currently displays all the bars and rating values, but just once. So it's not functioning the way I want it to.
<?php if(count($languages) > 0) { ?>
<div class="col-md-6">
<ul class="no-bullets">
<?php foreach($languages as $index => $language) { ?>
<li>
<span class="skillset-title"><?= $language->title; ?> (<?= $language->endorsement; ?>)</span>
<span class="skillset-rating">
<?php
$levelpercentage = 0;
for($stars == 1; $stars <= 5; $stars++) {
if ($stars == 5):
echo $levelpercentage = 100;
elseif ($stars == 4):
echo $levelpercentage = 80;
elseif ($stars == 3):
echo $levelpercentage = 60;
elseif ($stars == 2):
echo $levelpercentage = 40;
elseif ($stars == 1):
echo $levelpercentage = 20;
endif;
?>
<div class="progress-bar blue stripes">
<span style="width: <?= ($language->level >= $stars) ? $levelpercentage : '0'; ?>%;"></span>
</div>
<?php } ?>
</span>
</li>
<?php if(ceil(count($languages) / 2) == $index + 1) { ?>
</ul>
</div>
<div class="col-md-6">
<ul class="no-bullets">
<?php } ?>
<?php } ?>
</ul>
</div>
<?php } else { ?>
<div class="alert alert-warning">
No languages were found!
</div>
<?php } ?>
It currently displays all the bars and rating values
That's because you assign and echo your bars and rating values in a for loop.
Your $stars variable is assigned every value from 1 to 5, displaying the bar at each step. Simply remove your for loop and it should work fine (provided you use an already defined $stars variable)
Bonus : Because I'm in a good mood, I have to tell you there's a simpler way to build your $levelpercentage variable than using an if...else for each value from 1 to 5, just use :
$levelpercentage = $stars * 20;
Thank you! That really helped me out. Was trying to simplify what I was trying to do. This is what I did and it seems to be working.
<?php if(count($languages) > 0) { ?>
<div class="col-md-6">
<ul class="no-bullets">
<?php foreach($languages as $index => $language) { $stars = 0; $stars <= 5; $stars++; ?>
<li>
<span class="skillset-title"><?= $language->title; ?> (<?= $language->endorsement; ?>)</span>
<span class="skillset-rating">
<div class="progress-bar blue stripes">
<span style="width: <?= ($language->level >= $stars) ? $language->level * 20 : 0; ?>%;"></span>
</div>
</span>
</li>
<?php if(ceil(count($languages) / 2) == $index + 1) { ?>
</ul>
</div>
<div class="col-md-6">
<ul class="no-bullets">
<?php } ?>
<?php } ?>
</ul>
</div>
<?php } else { ?>
<div class="alert alert-warning">
No languages were found!
</div>
<?php } ?>
So I'm working on a HTML carousel using Twitter Bootstrap, Wordpress and ACF Fields.
This carousel shows 2 items per row. Each of these items has a class of "col-md-6". So by showing 2 items per row, the total is 2 columns of "col-md-6" (which is perfect since this completes the 12 columns required by Bootstrap):
Here is my code:
<?php if (have_rows('columns_carousel_slide')) {
$count = 0; ?>
<div class="item active"><div class="row">
<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>
</div> <!--.item -->
</div> <!--.row -->
<div class="item">
<div class="row">
<?php } ?>
<div class="col-md-6">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
<?php $count++; } ?>
</div> <!--.item -->
</div> <!--.row -->
<?php } ?>
However, I would like to know if there's a way to detect if there's 1 item per row and if so, then show a "col-md-12" instead of a "col-md-6" in order to fill in the remaining space of not having 2 items.
Any ideas are welcome.
Thanks!
--
Edit: As suggested by Jakub, I've updated my code to the following:
<?php if (have_rows('columns_carousel_slide')) {
$count = 0; ?>
<div class="item active"><div class="row">
<?php
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 &&
$count === count(get_field('columns_carousel_slide'))-1) {
$multiplier = 2;
} ?>
<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>
</div> <!--.item -->
</div> <!--.row -->
<div class="item">
<div class="row">
<?php } ?>
<div class="col-md-<?php echo (6*$multiplier);?>">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
<?php $count++; } ?>
</div> <!--.item -->
</div> <!--.row -->
<?php } ?>
However, I think I've must have missed something because I am getting total of "col-md-12" for all the rows.
Assuming that "get_field" returns the array with all rows, then you would need to change the following:
<div class="col-md-6">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
with this:
<?php
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 &&
$count === count(get_field('columns_carousel_slide'))-1) {
$multiplier = 2;
} ?>
<div class="col-md-<?php echo (6*$multiplier);?>">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-12 -->
A short explanation:
initially we set the multiplier to 1 (so that 6*1 = 6 for paired
columns).
we do a condition to check if number of items is even
and we are currently processing the last item. If so - we set the
multiplier to 2 (so that 6*2 = 12 for single column)
we set the class to be "col-md-" and the result of our calculation (either 6 or 12)
I have an array of icons. Right now, we only display them in buckets of 4. So if you have 7 icons, the 4th icon on the first slide will repeat as the 8th on the second slide. That's because the 3rd index of the array is stored in that same spot. To fix this, I want to loop through the array instead of explicitly iterating icon by icon.
<?php if (!empty($icons)) { // if we have icons attributes
// NOTE: we've changed it to show as many sets as we can
// (sets of 4)
$number_of_sets = ceil(count($icons) / 4);
$k=0; // for inner iteration
for ($j=0;$j < $number_of_sets; $j++) {
$slide_total ++;
?>
<div class="cf slide icon-slide">
<?php
// up to 4 icons
if (is_array($icons) && !empty($icons[$k])) {
$icon1 = $icons[$k];
$k++;
}
?>
<div class="col left">
<div class="cf icon">
<div class="col thumb">
<img src="<?=$icon1['thumb']?>" alt="<?=htmlentities($icon1['post_title'])?>" />
</div>
<div class="colR details">
<h4><?=$icon1['post_title']?></h4>
<p><?=$icon1['post_content']?></p>
</div>
</div>
<?php
// up to 4 icons
if (is_array($icons) && !empty($icons[$k])) {
$icon2 = $icons[$k];
$k++;
}
?>
<div class="cf icon">
<div class="col thumb">
<img src="<?=$icon2['thumb']?>" alt="<?=htmlentities($icon2['post_title'])?>" />
</div>
<div class="colR details">
<h4><?=$icon2['post_title']?></h4>
<p><?=$icon2['post_content']?></p>
</div>
</div>
</div>
<?php
// up to 4 icons
if (is_array($icons) && !empty($icons[$k])) {
$icon3 = $icons[$k];
$k++;
}
?>
<div class="colR right">
<div class="cf icon">
<div class="col thumb">
<img src="<?=$icon3['thumb']?>" alt="<?=htmlentities($icon3['post_title'])?>" />
</div>
<div class="colR details">
<h4><?=$icon3['post_title']?></h4>
<p><?=$icon3['post_content']?></p>
</div>
</div>
<?php
// up to 4 icons
if (is_array($icons) && !empty($icons[$k])) {
$icon4 = $icons[$k];
$k++;
}
?>
<div class="cf icon">
<div class="col thumb">
<img src="<?=$icon4['thumb']?>" alt="<?=htmlentities($icon4['post_title'])?>" />
</div>
<div class="colR details">
<h4><?=$icon4['post_title']?></h4>
<p><?=$icon4['post_content']?></p>
</div>
</div>
</div>
</div> <!-- // end icon slide -->
<?php
} // end for $j (number of sets of 4 icons
?>
My proposed solution:
<?php if (!empty($icons)) {
$num_cols = 2;
$i = 0;
$slide_items = 4;
?>
<div class="cf slide icon-slide">
<?php foreach ( $icons as $icon ) {
echo $i++%$num_cols==0 ? '</div><div class="col" style="width: 250px;">' : '';
?>
<div class="cf icon">
<div class="col thumb">
<img src="<?=$icon['thumb']?>" alt="<?=htmlentities($icon['post_title'])?>" />
</div>
<div class="colR details">
<h4><?=$icon['post_title']?></h4>
<p><?=$icon['post_content']?></p>
</div>
</div>
<?php } } // end if we have icons attributes ?>
I'm having trouble figuring out how to make another slide after I hit 4 icons. Adding the following line before the end of the foreach loop hasn't worked.
echo $i++%$slide_items==0 ? '</div><div class="cf slide icon-slide">' : '';
Here's some logic for the loop:
$i = count( $icons );
if ( $i % 4 != 0 )
$i = $i + ( $i % 4 );
for( $n = 0; $n < $i; $n++ )
{
if ( $n % 4 == 0 )
{
// code to open a row here
}
// code to open a column here
// echo your icon here, use isset() or !empty().
// code to close a column here
if ( $n > 0 && $n % 3 == 0 )
{
// code to close a row here
}
}
The IFs at the top is for keeping the column number consistent. Otherwise there'll be some weirdness at the end of the loop.
so I am trying to add a new row after every 4th gallery and continue on until I am out of galleries to add. So if there is 17 galleries there will be 4 rows of 4 galleries and 1 row of the remaining gallery. here is an example of how it looks: http://www.csulb.edu/centers/latinohealth/media/galleries/
here is my code:
<?php $this->start_element('nextgen_gallery.gallery_container', 'container', $displayed_gallery); ?>
<div class="row-fluid secondone">
<div class="ngg-albumoverview span12">
<div class="row-fluid">
<?php $count = 0;?>
<?php foreach ($galleries as $gallery) {
$count++;
?>
<div class="ngg-album span3">
<div class="ngg-albumtitle">
<?php echo_safe_html($gallery->title); ?>
</div>
<div class="ngg-albumcontent">
<div class="ngg-thumbnail">
<a class="gallery_link" href="<?php echo nextgen_esc_url($gallery->pagelink); ?>"><img class="Thumb" alt="<?php echo esc_attr($gallery->title); ?>" src="<?php echo nextgen_esc_url($gallery->previewurl); ?>"/></a>
</div>
<div class="ngg-description">
<p><?php echo_safe_html($gallery->galdesc); ?></p>
<?php if (isset($gallery->counter) && $gallery->counter > 0) { ?>
<p><strong><?php echo $gallery->counter; ?></strong> <?php _e('Photos', 'nggallery'); ?></p>
<?php } ?>
</div>
</div>
</div>
<?php if ($count % 4 == 0 ) ?>
</div>
<div class="row-fluid">
<?php } ?>
</div>
</div>
</div>
<?php $this->end_element(); ?>
Found the problem:
the row:
<?php if ($count % 4 == 0 ) ?>
should be:
<?php if ($count % 4 == 0 ) { ?>
You need to do what you want with css styles, not with the php.
Create a container block with fixed width that can contain exacly 4 galleries and use the float property on the boxes of the galleries.