I have a nested repeater field.
The nested part is a modal window, which when open expands on the second repeater field. But when everything is filled out the modal window displays the info from the first item in the loop.
This is how it should be working:
http://pagedev.co.uk/hoppings/product-sector.php#
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row(); ?>
<div class="sector-heading">
<img src="<?php the_sub_field('section_logo'); ?>">
<div><?php the_sub_field('section_intro'); ?></div>
</div>
<?php if( have_rows('products') ): ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row(); ?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php the_sub_field('thumbnail'); ?>">
<a class="js-open-modal" href="#" data-modal-id="popup"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php the_sub_field('product_name'); ?></h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="popup" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php the_sub_field('thumbnail'); ?>">
</div>
<div class="modal-content">
<h2><?php the_sub_field('product_name'); ?></h2>
<p><strong><?php the_sub_field('product_size'); ?></strong></p>
<hr>
<?php the_sub_field('product_description'); ?>
<div class="modal-stockist">Find a Stockist</div>
<div class="modal-literature">Literature</div>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->
Any help would be great!
Lee
I figured it out. Something so simple!
My modal window needed a unique ID for each product!
All solved :)
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'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've followed the guide below in trying to manually install nivo slider into Wordpress: http://www.aoclarkejr.com/author/aj/
I'm trying to get the slider to pick up and display the featured image. I think perhaps there is a problem with the code in step 6, and not just the missing ' (see below). As the slider appears to be loading i.e I get the next/prev tabs and can see the code when viewing the page source, but it's not picking up and displaying the featured image.
<div id="slider-wrap">
<div id="slider">
<?php query_posts(array(
'post_type'=>'slides
));
?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?>
<img src="<?php echo $thumbnail[0]; ?>" width="" height="" />
<?php endwhile; ?>
</div><!--/slider nivoSlider-->
</div><!--/slider-wrap -->
I should add that I'm trying to get this to work on a page, not custom post.
My ultimate goal is the get the same implementation as this: http://pexetothemes.com/demos/story_wp/home-default/
Here is my code now:
<?php get_header(); ?>
<div class="header-wrapper">
<div id="slider-wrap">
<div id="slider">
<?php query_posts(array(
'post_type'=>'page'
));
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?> <img src="<?php echo $thumbnail[0]; ?>" width="" height="" />
<?php // endwhile; ?>
</div><!--/slider nivoSlider-->
</div><!--/slider-wrap -->
</div>
<div class="clear"></div>
<div id="content-container" class="content-boxed layout-full">
<div id="full-width" class="content">
<div class="content-box">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div><!-- page wrapper -->
<?php get_footer(); ?>
For some reason part of the page is repeating itself.
<div class="header-wrapper"></div>
<div id="slider-wrap">
<div id="slider">
<img width="" height="" src="http://localhost:8888/defylife/assets/images/posts/ccm_adventure_450gp_left.jpg"></img>
</div>
<!--
/slider nivoSlider
-->
</div>
<!--
/slider-wrap
-->
<div class="clear"></div>
<div id="content-container" class="content-boxed layout-full">
<div id="full-width" class="content">
<div class="content-box"></div>
</div>
</div>
<img width="" height="" src=""></img>
</div>
<!--
/slider nivoSlider
-->
</div>
<!--
/slider-wrap
-->
What I am trying to achieve is to create a grid with bootstrap inside a wordpress page and display 30 posts as thumbnails. By clicking on the thumbnail a modal box will be displayed with the image in full size.
What am I doing right now is that the modal pops up but displays the same image every time. I am trying to set the href value in the tag that will display the of the post in the modal.
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="clearfix" role="main">
<?php $counter = 0; ?>
<div class="row-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php if ($counter < 4): ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix thumbnail-post span3'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<a href="#myModal" data-toggle="modal" >
<?php the_post_thumbnail( 'graphix-thumbnail' ); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class='modal-body'>
<img src="<?php echo $url; ?>" />
</div>
</div>
<div class="page-header"><h3 itemprop="headline"><?php the_title(); ?></h3></div>
</header> <!-- end article header -->
<section class="post_content clearfix">
<?php the_content(); ?>
</section>
</article> <!-- end article -->
<?php $counter +=1; ?>
<?php else: ?>
</div>
<?php $counter = 0; ?>
<div class="row-fluid">
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
</div>
<?php endif; ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
See this question. Its pretty easy to pass data to a modal with jQuery.
What I did wrong was that the modal's identifier was the same and the id has to be unique. So I changed the id of the modal to "#myModal-" and each one got its own unique id !
The code below should display the content of the page followed by certain page content.
<!-- Section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- Article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- Posts for homepage -->
<?php
if ( is_front_page() ) { ?>
<?php the_content(); ?>
<!-- Show page content according to page ID -->
<div class="title-home clearfix">
<div class="four title-home-text">Services Spotlight</div>
<div class="four title-home-text" style="margin-left: 115px;">Industry Expertise</div>
<div class="four title-home-text" style="margin-left: 125px;">Features & Benefits</div>
</div>
<div class="four-wrapper clearfix">
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=40');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=41');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=42');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-3')) ?>
</div>
</div>
</div>
<?php
}
else {
?>
<h1><?php the_title(); ?> </h1>
<?php the_content(); ?>
<?php } ?>
<!-- end post homepage -->
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /Article -->
<?php endwhile; ?>
<?php else: ?>
<!-- Article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /Article -->
<?php endif; ?>
</section>
<!-- /Section -->
<?php get_footer(); ?>
However, it displays the last query as loop.
Output Code:
<article id="post-6" class="post-6 page type-page status-publish hentry">
<article id="post-42" class="post-42 page type-page status-publish hentry">
post-42 should not be displayed in the article.
Also, I know the code is not simplified for using while loop. I want to fix the article problem and simplify this code.
The codex advises against using query_posts for secondary loops as per Codex Query Posts Page
It looks like you are stomping on the main loop (article) since query_posts alters the main loop. If you want to use query_posts it is recommended that you call wp_reset_query() when done. The preferred method is to use WP_query().