Some random columns collapse while using the foundation zurb grid, why?
<div class="small-centered">
<div class="row small-12 small-centered">
<?php foreach ($videos as $video): ?>
<div class="column small-6 medium-4 large-4">
<div>short text</div>
<img src="https://placehold.it/150x150" />
</div>
<?php endforeach; ?>
</div>
</div>
The blank area is not an empty div.
EDIT: here is the html and css output
Edit:
you need to add an .end to your last element. use a counter and modify your foreach loop like this (you might need to adjust it a little bit:
<?php
$i = 0;
$len = count($videos);
foreach ($videos as $video):
if ($i == $len - 1) {
echo '<div class="column large-4 end">'; //this is the last
} else {
echo '<div class="column large-4">'; // if not last-echo normally...
} ?>
<div>short text</div>
<img src="https://placehold.it/150x150" />
</div>
<?php $i++;
endforeach; ?>
Related
Blog Posts with Grid Layout even number columns doesn't display correctly .The problem occurs with 3 column layout also: for each group of 3 posts
<div class="main" role="main">
<div id="content" class="content full">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();
$title = get_the_title();?>
<div class="row">
<?php if ( has_post_thumbnail() ) { ?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="<?php echo esc_url(get_permalink(get_the_ID())) ?><?php
the_post_thumbnail('imic_600x400'); ?></a>
<?php } ?>
<?php if ( has_post_thumbnail() ) { ?><?php } ?>
<h3><a href=" <?php echo esc_url(get_permalink(get_the_ID())); ?>
<?php
echo esc_attr($title); ?>
</a>
</h3>
</div>
<?php endwhile; ?>
<!-- Pagination -->
<?php if(function_exists('imic_pagination')) { imic_pagination(); }
else { next_posts_link( 'Older Entries');
previous_posts_link( 'Newer Entries' ); } ?>
<?php endif;?>
</div>
<?php if(is_active_sidebar($pageSidebar)) { ?>
<!-- Sidebar -->
<div class="sidebar" id="sidebar-col">
<?php dynamic_sidebar($pageSidebar); ?>
</div>
<?php } ?>
</div>
</div>
</div>
Try changing the created HTML structure as follows (in Inspect Element view to verify it works):
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div>
(note the <!-- --> HTML comments)
If that solves the problem, try adding the HTML comments into your PHP code.
The reason for this behaviour is the resulting new line being interpreted as a "space" and thus the third item won't fit into the same row because of the added horizontal space.
You could also output the HTML-<div class="row">...</div> without line-breaks, eg. by concatenating the markup as one PHP string.
I am trying to get a sidebar to appear correctly in Wordpress framework with some effort here but I am almost their but the sidebar needs to appear to the right of the text of the blog just beside the title to the far right
You can view the page in question here http://kvalixhu.digitalthinkersni.co.uk/blog/
Image for how I want it to display
https://nimbus.everhelper.me/client/notes/share/369625/9zqAVkxFA4iFRBTqA1E5mw20uuWOqgs8/
<?php
/**
* Template Name: BlogPosts
*/
get_header();
?>
<style>
#title_wrapper{
width:488px;
}
h2{
font-size:18px;
font-familly:verdana, arial, sans-serif;
line-height:16px;
display:inline;
padding:2px;
}
#dateinfo{
font-weight:bold;
}
</style>
<div id="main-content" class="main-content">
<?php
if (is_front_page()) {
get_template_part('featured-content');
}
?>
<div class="full-width page-header">
<div class="row">
<div class="column">
<h1>Blog</h1>
</div>
</div>
</div>
<div class="row show-for-medium-up">
<div class="column breadcrumb">
<?php
if (function_exists('yoast_breadcrumb')) {
//echo __('Home',TD) . ' > ';
yoast_breadcrumb('<span id="breadcrumbs">', '</span>');
}
?>
<?php
if (function_exists('bcn_display_list_multidim_children')) {
?><ul class="breadcrumbs">
<?php
bcn_display_list_multidim_children();
?>
</ul><?php
}
?>
</div>
</div>
<div class="row">
<div class="column small-12 product">
<?php
$logo = get_post_meta(get_the_ID(), 'logo', true);
?>
<div class="post-list" style="width:80%;">
<?php
$myposts = get_posts('numberposts=-1&offset=$debut');
foreach ($myposts as $post):
setup_postdata($post);
?>
<div id="dateInfo" style="float:right;">
<?php the_date('Y.m.j'); ?> |
<?php comments_number( '0 hozzászólás', '1 hozzászólás', '% hozzászólás' ); ?>.
</div>
<div id="title_wrapper">
<h2><?php the_title(); ?></h2>
</div>
<div class="thumbnail" style="float: left; margin: 10px">
<?php the_post_thumbnail( array( 395, 195 ) ); ?>
<div class="thumbnail-arrow"></div>
</div>
<!-- Display movie review contents -->
<div class="entry-content"><?php the_content(); ?></div>
<div>
<?php
endforeach;
?>
<div class="column small-6 product " style="float:right;">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar')) : ?>
[ do default stuff if no widgets ]
<?php endif; ?>
</div>
<hr />
</div>
</div> </div>
</div>
<?php
get_footer();
?>
The first thing that you would want to do is move the "sidebar div" outside of the post-list div, and adding "float:left;" to the post-list div.
Also, add a width to the sidebar div with "width: 20%;" to make sure it fits.
The answer is a bit vague but hopefully you understand.
Hopefully this helps
I'm working with Wordpress and Foundation Tabs.
Objective:
To display Wordpress posts from a specific category in vertical Foundation tabs.
I currently have a static version displayed here:
http://www.aos-engineering.com (Under Projects)
Problem:
On the page load, the first tab displayed is empty. However, when you click through the tabs, they display correctly.
Question
How do I display the fist tab item on the page load?
Here is a test page displaying the problem:
http://www.aos-engineering.com/test/
Code
<div class="full-width" id="projects">
<div class="row">
<div class="small-4 medium-3 large-3 columns">
<dl class="tabs vertical profile-tabs" data-tab>
<?php
$displayposts = new WP_Query();
$displayposts->query('category_name=Projects');
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
?>
<dd><?php the_title(); ?></dd>
<?php endwhile; ?>
</dl>
</div>
<div class="small-8 medium-9 large-9 columns">
<div class="tabs-head">Projects</div>
<div class="tabs-content">
<?php
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
?>
<div class="content" id="tab<?php echo $tab_number;?>">
<h2><?php the_title(); ?></h2>
<div class="row">
<div class="medium-9 large-9 columns">
<?php the_post_thumbnail(); ?>
<p><small><?php the_field('img_caption'); ?></small></p>
</div>
<div class="medium-3 large-3 columns">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
Please let me know if I can provide more information. Thank you in advance.
You need to have your code add the class active to the .tabs > dl and the .tabs-content > div you want displayed on page load.
Add this to the two lines after $tab_number = ... to have the first tab be the active tab on load:
$active_class = (1 == $tab_number) ? 'active' : '';
Then in the output:
<dd class="<?php echo $active_class;?>" ><a href=...
<div class="content <?php echo $active_class;?>"...
See the Foundation Tabs documentation for more details.
Hat tip CPILKO for the solution.
Here is how to display Wordpress posts from a specific category in vertical Foundation tabs.
To display your posts, simply add your category name
'category_name=YourCategoryName'
Solution
<div class="full-width" id="projects">
<div class="row">
<div class="small-4 medium-3 large-3 columns">
<dl class="tabs vertical profile-tabs" data-tab>
<?php
$displayposts = new WP_Query();
$displayposts->query('category_name=Projects');
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
$active_class = (1 == $tab_number) ? 'active' : '';
?>
<dd class="<?php echo $active_class;?>"><?php the_title(); ?></dd>
<?php endwhile; ?>
</dl>
</div>
<div class="small-8 medium-9 large-9 columns">
<div class="tabs-head">Projects</div>
<div class="tabs-content">
<?php
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
$active_class = (1 == $tab_number) ? 'active' : '';
?>
<div class="content <?php echo $active_class;?>" id="tab<?php echo $tab_number;?>">
<h2><?php the_title(); ?></h2>
<div class="row">
<div class="medium-9 large-9 columns">
<?php the_post_thumbnail(); ?>
<p><small>Show above: Huiit Zolars</small></p>
</div>
<div class="medium-3 large-3 columns">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
I have a views which rendered html like this
<div class="content">
<div class="row-1">Some Text here</div>
<div class="row-2">Some Text here</div>
<div class="row-3">Some Text here</div>
</div>
Now I want to wrap the rows using a wrapper div like so.
<div class="content">
<div class="wrapper-1">
<div class="row-1">Some Text here</div>
<div class="row-2">Some Text here</div>
<div class="row-3">Some Text here</div>
</div>
</div>
Use the style output template of the views/display. You will find it in "Theming information". To get it from your views/display do:
Advanced > Theme: information
The first template is "views-view-unformatted.tpl.php" but you can use any in the list.
The original code is:
<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
<div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"'; } ?>>
<?php print $row; ?>
</div>
<?php endforeach; ?>
Add your wrapper around the foreach and you are done.
Not sure if it's the best way to do this, but you can try the following for Drupal 7::
function MODULENAME_preprocess_views_view(&$vars) {
if ($vars['view']->name == 'VIEWNAME') {
$vars['rows'] = "<div class='wrapper-class'>" . $vars['rows'] . "</div>";
}
}
This will wrap contents just below the view-content class.
I am working with a WP website and in my template I am running the loop like this:
<!-- START LOOP -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<div class="eight columns">
<h3><?php the_title() ?></h3>
<p><?php the_excerpt() ?></p>
<p><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></p>
</div>
</div>
</div>
<hr />
<?php endwhile; ?>
Because this is a responsive website, I am trying to get a grid column look. The problem I am having is how I can insert a div with a class or "row container" after every third item?
I know I probably just confused the crap out of you because I confuse myself but in short the html would look like this:
<div class="row container">
<!-- item 1 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 2 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 3 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 4 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
</div>
and so on, instead I would like it to display in a grid so the HTML should look more like this:
<div class="row container">
<!-- row 1 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 1 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 2 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 3 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
<!-- row 2 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 4 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 5 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 6 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
</div>
I can do everything else Im just not sure how to implement the below so I get the results I pasted above? I have found this online and feel like it is a step in the right direction:
<?php ($i % 3) == 0 ?>
Your feelings are right.
You can use the $current_post property of the WP_Query class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.
So your loop could look like this:
<div class="row container">
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php while ( have_posts() ) : the_post(); ?>
<!-- item -->
<div class="four columns">IMAGE HERE</div>
<?php if( $wp_query->current_post % 3 == 0 ) : ?>
</div>
</div>
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php endif; ?>
<?php endwhile; ?>
</div>
You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.
What I needed was a counter:
<!-- START LOOP -->
<?php $counter = 1 ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<?php while ( have_posts() ) : the_post(); ?>
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>
<?php $counter++ ;
endwhile; ?>
</div>
</div>
<?php
$currentPage = get_query_var('paged');
// General arguments
$posts = new WP_Query(array(
'post_type' => 'post', // Default or custom post type
'posts_per_page' => 11, // Max number of posts per page
'paged' => $currentPage
));
// Content display
$i = 0;
if ($posts->have_posts()) :
while ($posts->have_posts()) :
$posts->the_post();
if( $i % 3 == 0 )
echo '<section class="columns">';
echo "<div class='column'>";
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php
echo "</div>";
$i++;
if( $i % 3 == 0 )
echo '</section>';
endwhile;
endif;
?>
<?php
// Bottom pagination (pagination arguments)
echo "<div class='page-nav-container'>" . paginate_links(array(
'total' => $posts->max_num_pages,
'prev_text' => __('<'),
'next_text' => __('>')
)) . "</div>";
?>