i'm having problems with the Lightbox Plus plugin. I need to create a bunch of elements in my homepage, and Lightboxes linked to them to show more content. Now, I managed to create all the elements needed, but the Lightboxes generated are all the same, all with contents related to the first of the elements to be specific. If inserted in the loop shouldnt each of them be related to his "starting element"? This is the code i'm using:
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
$id = get_the_ID();
$big_image = get_field( "big_cocktail" );
$thumb_image = get_field( "thumbnail_cocktail" );;
$titolo_box = get_the_title();
$sottotitolo_box = get_field( "sottotitolo_cocktail" );
$h2_css = "margin-bottom: 5px !important;";
$sottotitolo_css = "width:100% !important; text-align:center !important; padding-top: 5px !important; margin: 0 auto !important; margin-top:20px !important;";
?>
<!--element-->
<div class="element <?php echo $category -> slug; ?>" data-category="<?php echo $category -> slug; ?>">
<a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
<img alt="" class="imgwork" src="<?php echo $thumb_image; ?>" heigth="100px"/>
</a>
<!-- THIS IS THE DIV FOR THE LIGHTBOX -->
<div style="display:none">
<div id="lbp-inline-href-1" style="background: #fff; height:100%; background-image:url('<?php echo $big_image; ?>');">
<h2 style=""><?php echo $titolo_box; ?></h2>
</div>
</div>
<!-- END DIV-->
<div class="worksarrow">
<a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
<img alt="" src="<?php echo get_template_directory_uri(); ?>/img/section-works/arrow.png" />
</a>
</div>
<a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
<h2 style=""><?php echo $titolo_box; ?></h2>
</a>
<div class="sottotitolo_portfolio" style="<?php echo $sottotitolo_css; ?>">
<?php echo $sottotitolo_box; ?> </div>
<div class="worksbottom"></div>
</div>
<!--element-->
<?php endwhile;
}
?>
I've finally solved this. He was creating all the right popups but each of them needed a specific class and ID, so it just became:
< div id="lbp-inline-href-< ?php echo $index; ?>" style="background: #fff; height:100%; background-image:url('< ?php echo $big_image; ?>');">
< ?php $index++; ? >
Related
I am trying to include a repeater field in a custom taxonomy template but it keeps returning No Posts to display. I know there are posts to display so I am baffled.
I have tried adding in wp_reset_postdata() but that didn't do anything, I am getting no errors.
Here is the repeater in question:
<?php if( have_rows('feature_repeater') ): ?>
<div class="related-posts">
<h2>You May Also Like...</h2>
<div>
<?php while( have_rows('feature_repeater') ): the_row();
// vars
$image = get_sub_field('collection_image');
$content = get_sub_field('collection_title');
$link = get_sub_field('collection_link');
?>
<div>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php echo $content; ?>
</div>
<?php endwhile; ?>
</div>
</div>
<?php else : ?>
No Posts to Display
<?php endif; ?>
and here is my template:
<?php
/**
* Template used for single posts and other post-types
* that don't have a specific template.
*
* #package Avada
* #subpackage Templates
*/
// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
exit( 'Direct script access denied.' );
}
?>
<?php get_header(); ?>
<section id="content" class="full-width" style="width: 100%;">
<div id="post-15912" class="fusion-archive-description post-15912 avada_portfolio type-avada_portfolio status-publish format-standard has-post-thumbnail hentry portfolio_category-dumfries-and-galloway inn-features-coastal-breaks inn-features-countryside-walks inn-features-cycling-holidays inn-features-dog-friendly-pubs inn-features-fine-dining inn-features-fishing-holidays inn-features-romantic-getaways">
<div class="post-content">
<?php
$portfolio_cat_slug = get_queried_object()->slug;
$portfolio_cat_name = get_queried_object()->name;
?>
<h1><?php echo $portfolio_cat_name; ?></h1>
<?php echo category_description(); ?>
<div class="fusion-aligncenter" style="margin-top: 20px;">Buy <?php echo $portfolio_cat_name; ?> Gift Vouchers</div>
</div>
<div class="fusion-posts-container fusion-blog-layout-grid fusion-blog-layout-grid-3 isotope fusion-blog-pagination " data-pages="2" style="position: relative; height: 1384.4px;">
<?php
$collection_post_args = array(
'post_type' => 'avada_portfolio', // Your Post type Name that You Registered
'posts_per_page' => 999,
'order' => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'inn-features',
'field' => 'slug',
'terms' => $portfolio_cat_slug
)
)
);
$collection_post_qry = new WP_Query($collection_post_args);
if($collection_post_qry->have_posts()) :
while($collection_post_qry->have_posts()) :
$collection_post_qry->the_post();
?>
<article id="post-15912" class="fusion-post-grid post fusion-clearfix post-15912 avada_portfolio type-avada_portfolio status-publish format-standard has-post-thumbnail hentry portfolio_category-dumfries-and-galloway inn-features-coastal-breaks inn-features-countryside-walks inn-features-cycling-holidays inn-features-dog-friendly-pubs inn-features-fine-dining inn-features-fishing-holidays inn-features-romantic-getaways" style="position: absolute; left: 0px; top: 0px; padding: 10px;">
<div class="fusion-post-wrapper">
<div class="fusion-flexslider flexslider fusion-post-slideshow">
<ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<div class="fusion-image-wrapper" aria-haspopup="true">
<a href="<?php the_permalink(); ?>">
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<img width="384" height="173" alt="" data-src="<?php echo $url ?>" class="attachment-full size-full wp-post-image lazyloaded" src="<?php echo $url ?>" draggable="false">
</a>
</div>
</li>
</ul>
</div>
<div class="fusion-post-content-wrapper">
<div class="fusion-post-content post-content">
<h2 class="entry-title" itemprop="headline"><?php the_title(); ?></h2>
</div>
<div class="fusion-meta-info">
<div class="fusion-alignleft">
Read More
</div>
</div>
</div>
</div>
</article>
<?php
endwhile;
endif;
?>
</div>
</div>
<div class="fusion-aligncenter" style="margin-top: 20px;">Buy <?php echo $portfolio_cat_name; ?> Gift Vouchers</div>
<?php if( have_rows('feature_repeater') ): ?>
<div class="related-posts">
<h2>You May Also Like...</h2>
<div>
<?php while( have_rows('feature_repeater') ): the_row();
// vars
$image = get_sub_field('collection_image');
$content = get_sub_field('collection_title');
$link = get_sub_field('collection_link');
?>
<div>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php echo $content; ?>
</div>
<?php endwhile; ?>
</div>
</div>
<?php else : ?>
No Posts to Display
<?php endif; ?>
</section>
<?php do_action( 'avada_after_content' ); ?>
<?php get_footer(); ?>
I have created a gallery field group in ACF as seen in the image below.
To display this on my wordpress page I have added the following code to the php file.
<?php
$images = get_field('employee_testimonial_gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
However the end result is displaying as a list
and I need the images to display as a grid like below
I've read all the documentation on ACF and it seems to be a general issue. TIA.
Add the following css to list it as like grid. Before start just add a class to your output html markup.
<ul class="gal-grid">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
Then after this markup changes apply bellow css,
ul.gal-grid li{
display: inline-block;
float: left;
margin: 0 10px 0 0;
}
ul.gal-grid li:last-child{
margin-right: 0 !important;
}
I am currently working on a WordPress site for the first time and having some issues figuring out how to achieve what I am aiming for. I would like for it to display a banner advertisement after every third post then continue from where it left off in my existing post.
Because I probably worded this poorly I will display an example image below.
Here's the current loop file I am using within my index.php file.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title = htmlentities(get_the_title ());
$str = explode ("–", $title);
$artist = preg_replace('#\[[a-zA-Z].*\]#','',$str[0]);
$song = preg_replace('#\[[a-zA-Z].*\]#','',$str[1]);
?>
<div class="album-meta" style="border-bottom: 1px solid #eee;">
<div class="cover">
<img width="90px" height="90px" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>" alt="<?php the_title(); ?>">
</div>
<div class="metadata">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #757575"><p><i style="font-size: 13.7px;"><?php print $song; ?></i></p>
<p><strong style="font-size: 15px;"><?php print $artist; ?></strong></p>
</a>
<p>Download
</div>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
You can do it like below:-
<?php $i = 0; // create a counter?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title = htmlentities(get_the_title ());
$str = explode ("–", $title);
$artist = preg_replace('#\[[a-zA-Z].*\]#','',$str[0]);
$song = preg_replace('#\[[a-zA-Z].*\]#','',$str[1]);
?>
<div class="album-meta" style="border-bottom: 1px solid #eee;">
<div class="cover">
<img width="90px" height="90px" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>" alt="<?php the_title(); ?>">
</div>
<div class="metadata">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #757575"><p><i style="font-size: 13.7px;"><?php print $song; ?></i></p>
<p><strong style="font-size: 15px;"><?php print $artist; ?></strong></p>
</a>
<p>Download
</div>
</div>
<?php if($i%3 ==0 && $i >0){ // check you reached to third div or not?>
<!-- write the html of advertisement div ------->
<?php $i++;} ?> <!-- increase counter -->
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
Try this...
<?php
$counter = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title = htmlentities(get_the_title ());
$str = explode ("–", $title);
$artist = preg_replace('#\[[a-zA-Z].*\]#','',$str[0]);
$song = preg_replace('#\[[a-zA-Z].*\]#','',$str[1]);
if($counter == 3){ ?>
********** Advertisement code write here ***********
<?php
}
?>
<div class="album-meta" style="border-bottom: 1px solid #eee;">
<div class="cover">
<img width="90px" height="90px" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>" alt="<?php the_title(); ?>">
</div>
<div class="metadata">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #757575"><p><i style="font-size: 13.7px;"><?php print $song; ?></i></p>
<p><strong style="font-size: 15px;"><?php print $artist; ?></strong></p>
</a>
<p>Download
</div>
</div>
<?php
$counter++;
endwhile; else : ?>
I am working on wordpress ACF, with posts and a single gallery of images. Both display perfectly.
But I am trying to load my ACF's image gallery AFTER the posts... I try many different ways, playing around with 'endif' / 'endwhile' nothing works.
Any idea of how to change the order ?
Thanks !
#gallerie {
width: 100%; z-index: 990; position: relative; margin-top: 700px;
}
div.image-home {
text-align: center;
margin-bottom: 40px;
}
.post{width: 30%; float: left;}
That's it for the important css
(the menu on top is fixed)
<?php if(have_posts()) : ?>
<!-- beginning of the gallery -->
<div id="gallerie">
<?php ;?>
<?php $images = get_field('image_gallery');?>
<?php if( $images ): ?>
<div class="image-home">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<!-- end of the gallery -->
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>"><br>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="contenu">
<p><?php the_field('description'); ?></p>
<p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
</div>
</div>
<?php endwhile; ?>
It appears you've posted the gallery prior to where the post loop exists entirely (ie, not even at the start of the loop, but before it.)
If you take that same gallery snippet and place it right AFTER the final endwhile, you'll get more of an acceptable result.
edit: It's really hard to comment without knowing or seeing more of the desired result, ie that same snippet could be posted right BEFORE the final endwhile if it is repeated for each post.
CSS
only changed one line:
#gallerie {
width: 100%; z-index: 990; position: relative; margin-top: 20px;
}
PHP
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>"><br>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="contenu">
<p><?php the_field('description'); ?></p>
<p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
</div>
</div>
<?php endwhile; ?>
<!-- beginning of the gallery -->
<div id="gallerie">
<?php ;?>
<?php $images = get_field('image_gallery');?>
<?php if( $images ): ?>
<div class="image-home">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<!-- end of the gallery -->
Chrome Dev Tools are Awesome
Also, you're using Chrome which is a great development tool within itself, you're on the Mac, so when you're on your page press Command+Option and i. That will open the Dev Tools.
Expand your code and as you hover over each line (on the code side) you will see in the viewport your margin elements. This will allow you to play with your styling and get it perfected
the site is http://www.christopherwaller.com/wordpress/
if you take a look on the above site i'm trying to insert a link to a page on each of the images on a carousel, so if you click anywhere on the image it will navigate to a new page. I have created the link i want on the post title text (ie. Look 1, Look 2 etc . . .) by using
<h2 class="postitle"><?php the_title(); ?></h2>
but i can't for the life of me find the right PHP to create the same links on each of the carousel photos?
I'm still trying to get to grips with PHP if anyone could advise that would be great.thanks
this is the PHP
<div class="edit"><?php edit_post_link(); ?></div>
</div>
<div class="postcontent">
<?php
$content = $post->post_content;
$searchimages = '~<img [^>]* />~';
preg_match_all( $searchimages, $content, $pics );
$iNumberOfPics = count($pics[0]);
if ( $iNumberOfPics > 0 ) { ?>
<?php the_thumb('medium'); ?>
<?php } else { ?>
<div class="imgframe"></div>
<?php } ?>
<div class="post_content">
<h2 class="postitle"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?>
<div class="post_meta">
<div class="author"><?php the_author(); ?></div>
<div class="date_meta"><?php the_date(); ?></div>
<div class="category_meta"><?php the_category(', '); ?></div>
</div>
</div>
</div>
<div class="postbg_bottom"></div>
<div class="social_links">
<a class="read" title="Read the rest of this post" href="<?php the_permalink(); ?>">read more</a>
</div>
</div>
<?php endwhile ?>
<div class="navigation">
<div class="nxt_page"><?php previous_posts_link('New Entries »', 0); ?></div>
<div class="prv_page"><?php next_posts_link('« Old Entries', '0') ?></div>
</div>
<?php endif ?>
</div>
</div>
<!--CONTENT END-->
and the CSS
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px;}
#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:840px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-100px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
You could try using the following instead of "the_thumb();"
add the following to your theme's 'functions.php'
// Add post thumbnail theme support
add_theme_support('post-thumbnails');
Then use the following to replace the 'the_thumb();'
if ( has_post_thumbnail() )
the_post_thumbnail();
I actually use this myself and created a plugin that links the post thumbnail to the post. It seems like you're trying to do the same kind of thing so I hope this works for you.
I understand you are using the PostThumb revisited plugin, correct? And if I read correctly, this plugin outputs a single picture with the_excerpt() . If that is the case, couldn't you just do this? :
<a href="<?php the_permalink();?>">
<?php the_excerpt(); ?>
</a>