I recently read a similar help topic here: https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ – I kind of understand it but I cant seem to get my head around how it relates to my situation.
I’m building a grid of client logos, using the ACF repeater function. I have the logos displaying correctly, the fields within the repeater are an image and a page link.
When you click on a logo, instead of a page link, I would like it to open up a modal window. Inside this modal window, I would like the logo again, a title and two text areas.
I just cant figure it out!!
Here’s my initial code for pulling through the logo repeater field:
<div style="background-color:#ffffff;width:100%;">
<div class="container margin-top-20" >
<div class="row">
<?php if( get_field('client_logos') ): ?>
<div style="clear:both;margin-top:20px;"></div>
<h3 class="brand-white" >Our Clients</h3>
<ul class="blocks blog-block logo-block">
<?php if( get_field('client_logos') ): ?>
<?php while( has_sub_field('client_logos') ): ?>
<li>
<div class="block-image">
<div class="logo-image">
<div class="logo-center">
<?php $logoblock = get_sub_field('client_logo'); ?>
<img src="<?php echo $logoblock['sizes']['medium']; ?>">
</div>
</div>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
<?php else: ?>
<?php endif; ?>
</div>
</div>
</div>
and here's my modal window code:
<div class="modal fade col-md-4" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" >
<div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
<div class="modal-header">
<!-- Close x --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Logo --> <?php the_field('client_logo');?>
<!-- Title --> <?php the_field('client_title');?>
</div>
<div class="modal-body">
<!-- Case Study --><?php the_field('text area 1');?>
<!-- Testimonial --><?php the_field('text area 2');?>
</div>
</div>
</div>
</div>
I feel like all the answers are there but I cant figure out how to put them together. If anyone could help me combine the two that would be amazing!!
Related
Here is the code of PHP and file save as an aboutus.php. Now please tell me that I want to add load more button for particular custom post type in WordPress. Post display when clicking on the button
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>News & Announcements</h2>
</div>
<?php
$args = array('post_type' => 'news','showposts'=>6, 'order'=>'ASC');
$query = new wp_query ($args);
while( $query->have_posts() ): $query->the_post() ;
$img = wp_get_attachment_url(get_post_thumbnail_id($result->ID));
?>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 news">
<figure><img src="<?php echo $img; ?>"></figure>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4>
<a id="toggle">Show more</a>
</h4>
</div>
</div>
</div>
You will have to add an event listeren with javascript to listen to the 'click' event on the #toggle button, make an ajax request to fetch the next post(s) and append the post(s) to the post on success.
This helped me in the beginning with making ajax requests: https://premium.wpmudev.org/blog/using-ajax-with-wordpress/
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 :)
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 am looking at this example : https://wordpress.stackexchange.com/questions/95661/open-wordpress-posts-in-bootstrap-modal
but don't seem to understand the principal of this. I have my posts displaying as a masonry grid on the front page with this loop:
<?php query_posts('posts_per_page=25'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php endwhile; endif; ?>
which when clicked is opening the single-content.php:
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class(); ?>>
<?php the_title(); ?>
<?php get_template_part('templates/entry-meta'); ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
I have been trying to get the single-content in a bootstrap modal window when a thumbnail of the masonry grid is being clicked. No luck when experimenting with different content on the web, any guidance would be appreciated.
best of wishes
O.
EDIT:
<?php query_posts('posts_per_page=25'); ?> <!-- posts per page -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<span class="new-wrapper">
<span><h1><?php the_title(); ?></h1></span>
<a href="<?php echo the_permalink(); ?>" class="box col<?php echo rand(2,3); ?>"> <!-- randomize .col2 & .col3, creating the grid portfolio -->
<?php
$post_id = get_the_id();
if ( has_post_thumbnail() ) {
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<img src="<?php echo $feat_image;?>">
<?php
}
?>
</span>
<?php endwhile; endif; ?>
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- Here showing the title of the post -->
<h4 class="modal-title" id="myModalLabel"><?php
the_title();
?></h4>
</div>
<div class="modal-body">
<?php the_content() // the content is adding here ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
Am using your code, but it is only working on the first post and therefor not being dynamic. Clicking on all the other posts doesn't seem to have any effect.
<?php query_posts('posts_per_page=25'); ?>
<?php the_title(); ?>
<?php
$post_id = get_the_id();//make sure this getting the correct post id
//here change the direct thum to custom link like this
if ( has_post_thumbnail())
{
//here we can get the featured image of the post as a link
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); //make sure this will return the correct featured image url
//place the url in our custome html like this:
//in this we change the target as per the post id so each post have its own modal for show the content in the while loop.
?>
<img src="<?php echo $feat_image;?>">
<?php
}
// here the target is set as #post'current post id'
//here we starting the modal part
?>
<!-- Modal -->
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- Here showing the title of the post -->
<h4 class="modal-title" id="myModalLabel"><?php
the_title();
?></h4>
</div>
<div class="modal-body">
<?php the_content() // the content is adding here ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
?>
Here am trying to load the modal inside the while loop and change the name of the modal and the click trigger related to the post id. Suppose the post id is 1 then the trigger and the modal id is like #post1 and post1. Here avoid the permlink to the detail page. I hope that this will solve problem.
<?php
//Get Post ID
echo $id= get_the_ID(); ?>
link to open model
Read More
Bootsrap model
<div class="modal fade project-model" id="myModal<?php echo $id;?>" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h5>
<button type="" class="close project-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
I am using codeigniter and am trying to set up a bootstrap 2 column layout using in my controller:
$data['form'] = $this->load->view('sellers/form7','',TRUE);
$data['data1'] = $this->load->view('sellers/lorem','',TRUE);
$this->load->view('sellers/twocolumnlayout', $data);
my layout view is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<?php echo $form ?>
</div>
<div class="span2">
</div>
<div class="span5">
<?php echo $text1 ?>
</div>
</div>
</div>
Unfortunately my columns are overlapping (Please see attached pic). Can anyone show me how to fix this?