I'm trying to create an archive page to show some realisations, which all have a gallery with multiple images. I use ACF to create a gallery and the Simple Lightbox plugin to create the lightbox. I found an example on how to combine both plugins and it's close to what I need, but I can't figure the rest out myself.
Now all images from the gallery are showing, I only need the first image to show and when you click the image I want to open the image in lightbox and have the possibility to go through the gallery this way.
What I have so far:
<?php if ( have_posts() ) {
while ( have_posts() ) { the_post(); ?>
<article id="realisatie-<?php the_ID(); ?>" <?php post_class(); ?> style="background-image: url(<?php echo $images[0] ?>);">
<?php
$images = get_field('realisatie_beelden');
$image_1 = $images[0];
if( $images ) { ?>
<div class="realisatie__gallery" >
<?php foreach( $images as $image ) {
$content = '<a class="gallery_image" href="'. $image .'">';
$content .= '<img src="'. $image .'" alt="'. $image .'" />';
$content .= '</a>';
if ( function_exists('slb_activate') ) {
$content = slb_activate($content);
}
?>
<?php } ?>
</div>
<?php } ?>
</article>
<?php }
} ?>
Thanks to a comment, I found a solution that works for me.
I only display an image for the first element, the other links are left empty.
<?php if ( have_posts() ) {
while ( have_posts() ) { the_post(); ?>
<article id="realisatie-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
$images = get_field('realisatie_beelden');
$image_1 = $images[0];
if( $images ) { ?>
<?php
$i = 0;
foreach( $images as $image ) {
if ($i >= 1) {
$content = '';
} else {
$content = '<a href="'. $image .'">';
$content .= '<img src="'. $image .'" />';
$content .= '</a>';
$i++;
}
if ( function_exists('slb_activate') ) {
$content = slb_activate($content);
}
echo $content;
?>
<?php } ?>
<?php } ?>
</article>
<?php }
} ?>
The below code pulls in all the thumbnails of posts in a category when you are viewing one of the posts in that category. I need to link the title of the post to the image.
<div id="workSlider" class="flexslider">
<ul class="slides">
<?php while (have_posts()) : the_post(); ?>
<?php $workthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'full' );
if( $workthumb && $currentID != $post->ID ) {
echo '<li><img src="'. $workthumb[0].'" ></li>';
}
?>
<?php endwhile; ?>
</ul>
</div>
Try echo '<li><img src="'. get_the_title() .'" ></li>'; I think this will work.
I am using this in my mu-plugins.php file//
function new_default_content($content) {
global $post;
if ($post->post_type == 'textures') {
$content .='<li>
<figure>
<?php the_post_thumbnail('thummy'); ?>
<figcaption>
<h3><?php the_title(); ?></h3>
<span>Cool stuff brah.</span>
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >View Full Image</a>'; }?>
</figcaption>
</figure>
</li>';
}
return $content;
}
add_filter('the_content', 'new_default_content');
and in my page template I used <?php the_content(); ?> to display everything.
UPDATE//
Full Page Template code
<div id="container" class="clearfix">
<div id="left-content">
<?php get_sidebar('two');?>
</div>
<div id="right-content">
<h1><?php wp_title(''); ?></h1>
<ul class="grid cs-style-3">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div><!--right-content-->
</div><!--container-->
<?php get_footer(); ?>
But I am recieving this error//
Parse error: syntax error, unexpected T_STRING in /home/xxx/public_html/domain.com/testing/wp-content/mu-plugins/must-use.php on line 15
I am trying this method of displaying content because I want to use the WP-Members plugin, and I realized that the plugin will only work for content within the_content().
So my question is how can I fix the code I posted above to display the title, thumbnail, links etc the correct way?
function new_default_content($content) {
global $post;
if ($post->post_type == 'textures') {
$content .='<li>';
$content .='<figure>';
$content .= the_post_thumbnail('thummy');
$content .= '<figcaption>';
$content .= '<h3>';
$content .= the_title();
$content .= '</h3>';
$content .= '<span>Cool stuff brah.</span>';
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >View Full Image</a>';
}
$content .= '</figcaption>';
$content .= '</figure>';
$content .= '</li>';
}
return $content;
}
add_filter('the_content', 'new_default_content');
Just try this code. If you still get same error we'll check.
FOUND A SOLUTION
I remembered that you can add content inside of shortcodes.
So I created my own shortcode [textures_content]
Then used the code pasted below to display the content within <?php the_content(); ?> function//
add_shortcode( 'textures_content', 'textures_shortcode' );
function textures_shortcode( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'textures',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'date',
) );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<li>
<figure>
<?php the_post_thumbnail('thummy'); ?>
<figcaption>
<h3><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >View Full Image</a>'; }?>
</figcaption>
</figure>
</li>
<?php endwhile;
wp_reset_postdata(); ?>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
}
Now the Members only plugin works as expected and the blocked content is displayed once logged in :)
I have this code for displaying a shortcode.
<?php
function recent_posts_function() {
$mypost = array( 'post_type' => 'gallery_pictures', );
$loop = new WP_Query( $mypost );
?>
<div id="boxhover">
<?php while ( $loop->have_posts() ) : $loop->the_post();?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<!--Fade-->
<?php $ddd = '<div class="mosaic-block fade">
<a href="'. $image[0] . '" data-fancybox-group="gallery" target="_blank" class="mosaic-overlay preview fancybox" title="' . the_title . '">
<div class="details">
<h4>' . the_title() . '</h4>
<p>' . the_content_rss('', TRUE, '', 30) . '</p>
<br/>
<div class="btt">VIEW</div>
</div>
</a>
<div class="mosaic-backdrop"><img src="' . $image[0] . '" alt="gallery thumbnail" /></div>
</div>';
endwhile; ?>
</div>
<?php
return $ddd;
}
function register_shortcodes(){
add_shortcode('gallery', 'recent_posts_function');
}
add_action( 'init', 'register_shortcodes');
as you can see from the above codes, the 'return $ddd' should return all the output from the loops that the 'while' process done but its display only one.
Im currently looking for a solution and would love to hear any suggestion, recommendations and ideas on how to do it. Thank in advance.
You need to add a [dot] before your = [equal] on the loop while.
This will cause each loop add content current with the previous.
<?php function recent_posts_function() {
$ddd = ''; //First declare the string var ?>
...
<?php while ( $loop->have_posts() ) : $loop->the_post();?>
<?php $ddd .= '<div class="mosaic-block fade">'; // Put a [dot] before sign symbol ?>
<?php endwhile; ?>
...
return $ddd;
...
<? php } ?>
I have written a Wordpress widget that displays a custom amount of posts from a custom tag (feel free to use it). Here is the code:
<?php
$category = get_the_category();
$current_category = $category[0]->term_id;
?>
<?php query_posts("showposts=".$posts_number."&cat=".$current_category."&tag=featured"); // the tag
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="block-post clearfix">
<?php
$thumb = '';
$width = 287;
$height = 162;
$classtext = 'post-image';
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Recent');
$thumb = $thumbnail["thumb"];
?>
<?php if($thumb <> '' && get_option('aggregate_thumbnails_index') == 'on') { ?>
<div class="thumb">
<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
<span class="overlaybig"></span>
</a>
</div> <!-- end .post-thumbnail -->
<?php } ?>
<div class="recenttitle"><h3 class="title"><?php the_title(); ?></h3></div>
</div> <!-- end .block-post -->
<?php endwhile; endif; wp_reset_query(); ?>
My question is, how can I exclude the current post from the output? The problem is that it does not check if the user is currently viewing any of the posts that it outputs. How can I adjust the code so that it skips the current post that the user is on?
I am pretty sure that this is an easy fix, but I am lost at the moment.
UPDATE: Here is the code for the entire widget, including the fix provided by maiorano84:
<?php class ArtificePinned extends WP_Widget
{
function ArtificePinned(){
$widget_ops = array('description' => 'Displays posts filtered by current category and the tag pinned');
$control_ops = array('width' => 400, 'height' => 300);
parent::WP_Widget(false,$name='Artifice Pinned',$widget_ops,$control_ops);
}
/* Displays the Widget in the front-end */
function widget($args, $instance){
extract($args);
$title = apply_filters('widget_title', empty($instance['title']) ? ' ' : $instance['title']);
$posts_number = empty($instance['posts_number']) ? '' : (int) $instance['posts_number'];
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
?>
<?php
$category = get_the_category();
$current_category = $category[0]->term_id;
$qarr = array(
'posts_per_page' => $posts_number,
'cat' => $current_category,
'tag' => 'featured',
'post__not_in' => get_the_ID()
);
$q = new WP_Query($qarr);
if($q->have_posts()) : while ($q->have_posts()) : $q->the_post();
?>
<div class="block-post clearfix">
<?php
$thumb = '';
$width = 287;
$height = 162;
$classtext = 'post-image';
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Recent');
$thumb = $thumbnail["thumb"];
?>
<?php if($thumb <> '' && get_option('aggregate_thumbnails_index') == 'on') { ?>
<div class="thumb">
<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
<span class="overlaybig"></span>
</a>
</div> <!-- end .post-thumbnail -->
<?php } ?>
<div class="recenttitle"><h3 class="title"><?php the_title(); ?></h3></div>
</div> <!-- end .block-post -->
<?php endwhile; endif;?>
<?php
echo $after_widget;
}
/*Saves the settings. */
function update($new_instance, $old_instance){
$instance = $old_instance;
$instance['title'] = stripslashes($new_instance['title']);
$instance['posts_number'] = (int) $new_instance['posts_number'];
return $instance;
}
/*Creates the form for the widget in the back-end. */
function form($instance){
//Defaults
$instance = wp_parse_args( (array) $instance, array('title'=>' ', 'posts_number'=>'7') );
$title = esc_attr($instance['title']);
$posts_number = (int) $instance['posts_number'];
# Title
echo '<p><label for="' . $this->get_field_id('title') . '">' . 'Title:' . '</label><input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></p>';
# Number Of Posts
echo '<p><label for="' . $this->get_field_id('posts_number') . '">' . 'Number of Posts:' . '</label><input class="widefat" id="' . $this->get_field_id('posts_number') . '" name="' . $this->get_field_name('posts_number') . '" type="text" value="' . $posts_number . '" /></p>';
# Category ?>
<?php
}
}// end ArtificePinned class
function ArtificePinnedInit() {
register_widget('ArtificePinned');
}
add_action('widgets_init', 'ArtificePinnedInit');
?>
Don't use query_posts, as its intention is to modify the default Wordpress Loop. Use WP Query instead.
To answer your question, the solution is pretty simple. I've taken the liberty of giving you this example using WP_Query:
<?php
$qarr = array(
'posts_per_page' => $posts_number,
'cat' => $current_category,
'tag' => 'featured',
'post__not_in' => get_the_ID()
);
$q = new WP_Query($qarr);
if($q->have_posts()) : while ($q->have_posts()) : $q->the_post();
?>
Bear in mind, I've also changed 'showposts' to 'posts_per_page', as showposts was deprecated in version 2.1
UPDATE: Your code should now look like this:
<?php
$category = get_the_category();
$current_category = $category[0]->term_id;
$qarr = array(
'posts_per_page' => $posts_number,
'cat' => $current_category,
'tag' => 'featured',
'post__not_in' => get_the_ID()
);
$q = new WP_Query($qarr);
if($q->have_posts()) : while ($q->have_posts()) : $q->the_post();
?>
<div class="block-post clearfix">
<?php
$thumb = '';
$width = 287;
$height = 162;
$classtext = 'post-image';
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Recent');
$thumb = $thumbnail["thumb"];
?>
<?php if($thumb <> '' && get_option('aggregate_thumbnails_index') == 'on') { ?>
<div class="thumb">
<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
<span class="overlaybig"></span>
</a>
</div> <!-- end .post-thumbnail -->
<?php } ?>
<div class="recenttitle"><h3 class="title"><?php the_title(); ?></h3></div>
</div> <!-- end .block-post -->
<?php endwhile; endif;?>
FIX:
The problem is stemming from this:
'post__not_in' => get_the_ID()
The problem is 'post__not_in' expects an array. Not an integer. My apologies, that was my mistake. Please change that line of code to:
'post__not_in' => array(get_the_ID())
and you should be good.