The gallery which including dynamic pills I've developed using advance custom field needs to add a lightbox. I can't figure out where to add the code of lightbox since all my attempts were failed.
All the relevant stylesheets and script files links has been added to header.php and I'm not gonna post the header file code in here.
Here is my code.
<div class="gallery pull-left width-wide">
<!-- Menu -->
<div class="cat-menu pull-right padding-right-20">
<!--Categories : -->
<!-- Show All
<a href="#Category1" title="Category 1 " >Category 1 </a>
<a href="#Category2" title="Category 2" >Category 2</a>
<a href="#Category3" title="Category 3" >Category 3</a> -->
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
<li><a data-toggle="pill" href="#Category1">Category 1</a></li>
<li><a data-toggle="pill" href="#Category2">Category 2</a></li>
<li><a data-toggle="pill" href="#Category3">Category 3</a></li>
</ul>
</div><!-- // Menu -->
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<div class="tab-content">
<div id="showall" class="tab-pane fade in active">
<?php
if( have_rows('show_all_images') ):
while ( have_rows('show_all_images') ) : the_row();
//vars
$image = get_sub_field('sa_image');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" style="cursor:pointer"/>
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category1" class="tab-pane">
<?php
if( have_rows('catagory_one_image') ):
while ( have_rows('catagory_one_image') ) : the_row();
//vars
$image = get_sub_field('cat_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215"/>
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category2" class="tab-pane">
<?php
if( have_rows('catagory_two_image') ):
while ( have_rows('catagory_two_image') ) : the_row();
//vars
$image = get_sub_field('cat_two_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category3" class="tab-pane">
<?php
if( have_rows('catagory_three_image') ):
while ( have_rows('catagory_three_image') ) : the_row();
//vars
$image = get_sub_field('cat_three_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
</div>
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
Kindly help me to add a lightbox to this gallery
Thank You
you can use fancybox easily.Please review http://fancyapps.com/fancybox/3/
Here is example using:
<?php if(get_field('gallery')):
echo '<div class="gallery__images">';
$i == 0;
while(has_sub_field('gallery')):
$i++;
$parent_image = get_sub_field('parent_image');
echo '<div class="gallery_inner_image">';
echo '<div class="holder">';
echo '<a class="fancybox" rel="group'.$i.'" href="'.$parent_image['url'].'">';
echo '<img src="' . $parent_image['sizes']['gallery-thumb'] . '" alt="' . $parent_image['alt'] . '" />';
echo '</a>';
echo '</div>';
echo '<div class="gallery__caption">'.get_sub_field('caption').'</div>';
if(get_sub_field('gallery_images')):
while(has_sub_field('gallery_images')):
echo '<a class="fancybox" rel="group'.$i.'" href="';
echo get_sub_field('gallery_image')['sizes']['large'];
echo '" /></a>';
endwhile;
endif;
echo '</div>';
endwhile;
echo '</div>'; endif; ?>
Related
Currently, the store is made to display products in certain tabs. This is the code I have in loop-start.php
<?php
/**
* Product Loop Start
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce\Templates
* #version 3.3.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<section class="deals-wrapper product-list">
<div class="container">
<ul class="nav nav-tabs row justify-content-between" id="dealsTab" role="tablist">
<?php
$i = 0;
$categories = get_terms( array(
'taxonomy' => 'product_cat'
) );
foreach ( $categories as $key => $category ) {
$catname = $category->name;
$metaterms = get_term_meta($category->term_id);
$thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
//$terms = get_the_terms( $category->ID, 'product_cat' )
$display_category_on_shop_page = get_field('display_category_on_shop_page',$category);
if($display_category_on_shop_page == "Yes"){
?>
<li class="nav-item col-lg-2 col" role="presentation">
<a class="nav-link <?php if($i == 0){ $i++; ?> active <?php } ?>" id="<?php echo $category->slug ?>-tab" data-toggle="tab" href="#<?php echo $category->slug ?>" role="tab" aria-controls="<?php echo $category->slug ?>" aria-selected="true">
<img src="<?php echo $image; ?>" alt="apple" />
<span><?php echo $catname; ?></span>
</a>
</li>
<?php } } wp_reset_postdata(); ?>
</ul>
<div class="tab-content" id="dealsTabContent">
<?php
$i = 0;
foreach($categories as $key => $category) {
?>
<div class="tab-pane fade <?php if($i == 0){ $i++; ?> show active <?php } ?>" id="<?php echo $category->slug ?>" role="tabpanel" aria-labelledby="<?php echo $category->slug ?>-tab">
<div class="deal-tiles" id="accordionExample<?php echo $category->slug ?>">
<?php
$c = 1;
$count = 1;
$args = array(
'post_type' => 'product',
'posts_per_page' => 20,
'product_cat' => $category->slug,
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_key' => '_price',
'post_status' => 'publish'
);
$loop = new WP_Query( $args );
if( $loop->have_posts()) :
while ( $loop->have_posts()) :
$loop->the_post();
$p_id = wc_get_product()->get_id();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'single-post-thumbnail' );
$currency = get_woocommerce_currency_symbol();
$name = get_the_title();
$link = get_the_permalink();
$product = wc_get_product(get_the_ID());
$thePrice = $product->get_price();
?>
<div class="deal-wrapper">
<div class="deal-tile">
<div class="text-center deal-head">
<h5>
<?php echo get_the_title(); ?>
</h5>
</div>
<div class="deal-body">
<div class="deal-img row">
<div class="deal-phone-img">
<a href="<?php echo $link; ?>" class="product-items">
<img src="<?php echo $image[0]; ?>" class="img-fluid" alt="phone" />
</a>
</div>
<div class="deal-phone-details">
<div class="deal-part1">
<h3>
<?php echo get_field('phone_detail_gb_data',$p_id); ?>
</h3>
<?php
while(have_rows('phone_detail_unlimited_data',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<p>
<?php echo $text; ?>
</p>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class="deal-part2 d-flex justify-content-between">
<div class="deal-part2-details">
<?php
if($product->get_type() == "simple"){
?>
<h5>
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $product->regular_price; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $product->sale_price; ?>pm</h5>
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}else{
$product_variations = $product->get_available_variations();
$variation_product_id = $product_variations [0]['variation_id'];
$variation_product = new WC_Product_Variation( $variation_product_id );
$variation_min_price = $product->get_variation_price();
$price_regular_min = $product->get_variation_regular_price();
$price_sale_min = $product->get_variation_sale_price();
?>
<h5 class="network-price">
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $price_regular_min; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $price_sale_min; ?>pm</h5>
<!-- <?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo $price_html; ?></span>
<?php endif; ?> -->
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}
?>
</div>
<div class="deal-part2-img">
<img src="<?php echo get_field('ee_image',$p_id)[" url "]; ?>" alt="">
</div>
</div>
</div>
</div>
<div class="deal-footer">
<div class="row deal-img justify-content-around">
buy now
view detail
<!-- <div id="heading<?php echo $count; ?>">
<h5 class="mb-0 lern-more-btn collapsed" data-toggle="collapse" data-target="#collapse<?php echo $count; ?>" aria-expanded="false" aria-controls="collapse<?php echo $count; ?>">
<span><?php echo get_field('learn_more_text',$p_id); ?></span>
<span><?php echo get_field('minimise_text',$p_id); ?></span>
</h5>
</div> -->
</div>
<div id="collapse<?php echo $count; ?>" class="collapse multi-collapse deal-desc">
<ul class="card-body">
<?php
while(have_rows('product_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<p>
<?php echo $text; ?>
</p>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
<div class="features-wrapper">
<?php $product_other_detail = get_field('product_other_detail',$p_id); ?>
<span class="features-ttl"><?php echo $product_other_detail["heading"]; ?></span>
<ul class="features-desc">
<?php
while(have_rows('product_other_detail',$p_id)) : the_row();
while(have_rows('other_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<?php echo $text; ?>
</li>
<?php endwhile; endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
</div>
<div class="compare-btn">
<input type="checkbox" id="compare<?php echo $count; ?>" class="chkbox" data-name="<?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>" data-price="<?php echo $currency; echo $thePrice; ?>pm" data-image="<?php echo $image[0]; ?>" />
<label class="mb-0 ml-1" for="compare<?php echo $count; ?>">Compare</label>
</div>
</div>
</div>
</div>
<?php $count++; endwhile; endif; ?>
</div>
</div>
<?php } wp_reset_postdata(); ?>
</div>
Each time the store is opened from the link, the first tab is active and the content of the first product category is displayed. My goal is to rework the code so that I can activate each category (tab) with a direct link. I want to use the direct link to this category to activate the tab for the respective category and show the products. At the moment I have to click on the tab to get this effect, otherwise the first tab is always active.
I ask for your help.
Š¢hanks.
I've got a page which has a Bootstrap tabsection. Every tab contains a machine (custom post type), which has a unique PDF download link attached to it by an ACF field. When pressed on the button, a modal opens with a form which has ID 1350. When the form has been filled in and sent has been hit, the relevant PDF file is automatically downloaded in a new tab.
The problem here is that when there's multiple machines, both the PDF files start downloaden. When the button on the second machine is pressed, the first machine pdf gets downloaded, then the second one.
I've tried outputting event.detail.containrePostId but it only returns the post id of the first machine in the query, twice. What i can't seem to achieve is that when a button is pressed on the form, only that relevant pdf gets downloaded. Below is the flexible content part that handles the tabsection.
<?php elseif( get_row_layout() == 'tabsectie'): ?>
<div class="section wow padding-0 margt-0 margb-0 animated">
<div class="tabsection-slider-wrapper">
<div class="pseudo-bg pseudo-right pseudo-lightblue"></div>
<?php if( have_rows('tabs_repeater') ): $i = 1; // Set the increment variable ?>
<div class="container">
<div class="row justify-content-center tabsection-row">
<div class="col-xl-8">
<div class="tab-wrapper">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<li class="nav-item<?php if($i == 1) echo ' active';?>">
<a class="nav-link<?php if($i == 1) echo ' active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tab" aria-controls="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" aria-selected="true"><?php echo the_title(); ?></a>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content" id="myTabContent">
<?php $i = 1; /* Set the increment variablew */ while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<?php
$pdf_machine = get_field('pdf_machine');
?>
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab">
<div class="image-slider-content-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-2 slider-content-left">
<h1 class="mb-5"><?php the_title(); ?></h1>
<span class="machine-content"><?php get_template_part('blocks/main-fields'); ?></span>
<?php $pdf_machine = get_field('pdf_machine'); ?>
<?php if(!empty($pdf_machine)): ?>
<?php var_dump($pdf_machine); ?>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#downloadModalMachine-<?php echo $i; ?>">Download brochure</button>
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
alert( event.detail.containerPostId );
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
</div>
</div>
</div>
<div class="image-slider wow animate__animated animate__fadeInRight" data-wow-offset="100">
<div class="carousel">
<?php $slider = get_sub_field('slider'); ?>
<?php if(have_rows('media')): ?>
<?php while(have_rows('media')): the_row(); ?>
<?php $slider_type = get_sub_field('media_type'); ?>
<div class="slider-item">
<?php if($slider_type == 'image'): ?>
<?php $image = get_sub_field('image'); ?>
<?php if( !empty($image) ): ?>
<img class=" lider-image" src="<?php echo $image['sizes']['gallery']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php elseif($slider_type == 'video'): ?>
<?php $video = get_sub_field('video'); ?>
<?php if (!empty($video) ): ?>
<div class="embed-container">
<?php echo $video; ?>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="slider-arrow-wrapper">
<div class="slider-nav">
<div class="nav-button nav-btn-left">
</div>
<div class="nav-button nav-btn-right">
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</div>
</div>
</div>
<?php endif; ?>
Here is the javascript that generates the download link
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
window.open('%s');
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
I'm having trouble on the wordpress page that I'm currently working..
I used this code >>https://github.com/alexcavender/wordpress-ajax-load-more
with some adjustment (complete code below) but the "load more button doesn't hide whenever it reach the last post.
<div id="primary" class="content-area container">
<main id="main" class="site-main" role="main">
<?php if (have_posts()) : ?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:', 'thinkbit'),
'after' => '</div>',
));
?>
</div><!-- .entry-content -->
<div id="all-post" class="all-post wrapper">
<?php
$args = array(
'post_type' => array('post', 'project', 'communities'),
'posts_per_page' => 10
);
$the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : ?>
<div class="row masonry">
<?php while ($the_query->have_posts()) : $the_query->the_post();
/*$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item*/
$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ($termsArray as $term) { // for each term
$termsString .= $term->slug . ' '; //create a string that has all the slugs
}
?>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
<div id="things-go-here"></div>
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<div id="load-more-posts" class="text-center">
<h4>Load More</h4>
</div>
<?php else : ?>
<?php get_template_part('template-parts/content', 'none'); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
function load_more_posts() {
$nonce_check = check_ajax_referer('extra-special', 'security');
if ($nonce_check) {
$offset = $_POST['offset'];
$args = array(
'post_type' => array('post', 'project', 'communities'),
'post_status' => 'publish',
'posts_per_page' => '10',
'orderby' => 'date',
'order' => 'DESC',
'offset' => $offset,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
while ($loop->have_posts()) {
$loop->the_post();
?>
<article>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
</article>
<?php
}
wp_reset_postdata();
}
wp_die();
} else {
exit();
}
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
Where is your js, did you catch ajax response yet?
you can detect the last post and display none or hide the button by using this.
This is just an example
<?php if (($loop->current_post +1) == ($loop->post_count)) {
echo 'This is the last post'; ?>
<style>
#load-more-posts{display:none !important;}
</style>
<?php
} ?>
I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!
HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
I have a PHP While statement on my page. I would like to hide DIV with the class name "coupon" for each record that has empty field $rows['deal'];. This is what my code currently looks like. How can I alter to accomplish this. Thank You much!!!
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>
You can do this on this way:
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
Full code
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>
Try below code:
<?php while ($rows = mysql_fetch_array($query)) { ?>
<!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>
You do not need javascript for this, add this line:
<?php echo ($rows['deal']==""?"style='display:none;'":"") ?>
Complete code:
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" <?php echo ($rows['deal']==""?"style='display:none;'":"") ?> id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>
with PHP:
You can just count if row has a data so echo it:
this is row with data:
<?php
$row = 'you can add get rows from database';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
this is row with out data
<?php
$row = '';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
If the field is empty, it will have a length of 0. So you can use that logic in order to hide the 'coupon' class
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<!-- My code -->
<?php
if(strlen($rows['deal'] > 0)
{
?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php
}
?>
<!-- End of my code -->
</div>
<?php } ?>
We can use something like this .
<?php if($fildvalue != ''){ ?>
<div><?php echo $fildvalue; ?> </div>
<?php } ?>
so div will be created only when their is an value
Check the data row and put all the HTML tags which you want to hide in case if it is empty or not set.
<?php if(isset($rows['deal']) && !empty($rows['deal'])){ ?>
<span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
In PHP, empty() function is able to check NULL value, empty string and zero in return.