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 }
} ?>
Related
I have an ACF image gallery and have set up a True / False (1/0) custom field to image attachments named "featured_image". Inside the gallery, several images are selected as the featured image while others are not.
What I would like to achieve is to randomly select one of the images which has the "featured_image" custom field as true.
My code thus far is included below, however I cannot get it to work by selecting only images from the gallery marked as "featured_image", or know how to make the selection random. Help is appreciated!
<?php
$images = get_field('project_documentation', 'option');
if( $images ): ?>
<?php
$i = 0;
foreach( $images as $image ):
$featured = get_field('featured_image', $image['id']);
if ($featured == '1' ) { ?>
<div class="gallery-image">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php } $i++; endforeach; ?>
<?php endif; ?>
Assuming your code snippet worked (but lacks the random element), you could do something like the following.
<?php
$images = get_field('project_documentation', 'option');
if( $images ) {
$featured_images = array();
foreach( $images as $image ) {
$featured = get_field('featured_image', $image['id']);
if ($featured == '1' ) {
$featured_images[] = $image;
}
}
if ( !empty( $featured_images ) ) {
$rand = rand(0, count( $featured_images ));
$image = $featured_images[$rand];
?>
<div class="gallery-image">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php
}
}
How I can add php code inside the function add_shortcode in functions.php
For Example:
<?php $images = get_field('img_novinki'); if( $images ) { ?>
<div id="carousel" class="flexslider">
<ul class="slides gallery">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div> <?php } ?>
Shortcode in functions PHP:
function my_novinki( $atts )
{
return '';
}
add_shortcode( 'my_novinki', 'my_novinki');
See Codex: "..the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode."
You need to wrap your code in ob_start() and ob_get_clean():
add_shortcode( 'my_novinki', function my_novinki( $atts ) {
ob_start();
$images = get_field( 'img_novinki' );
if( $images ) { ?>
<div id='carousel' class='flexslider'>
<ul class='slides gallery'> <?php
foreach( $images as $image ) { ?>
<li>
<a href='<?php echo $image['url']; ?>'>
<img src='<?php echo $image['sizes']['thumbnail']; ?>' alt='<?php echo $image['alt']; ?>' />
</a>
</li> <?php
} ?>
</ul>
</div> <?php
}
$out = ob_get_clean();
return $out;
});
From what I see you will need to do the following. In functions.php add:
function my_novinki( $atts )
{
$images = get_field('img_novinki');
if( $images ) {
echo '<div id="carousel" class="flexslider">';
echo '<ul class="slides gallery">';
foreach( $images as $image ):
echo '<li>';
echo '<img src="'.$image["sizes"]["thumbnail"] .'" alt="'. $image["alt"] .'" />';
echo '</li>';
endforeach;
echo '</ul>';
echo '</div>';
}
}
add_shortcode( 'my_novinki', 'my_novinki');
Then this can be called using [my_novinki] or if in a php template using <?php echo do_shortcode['my_novinki'];
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'm working on a wp site and now I want a slider with Aqua-Resizer.
My slider works fine at the moment. But I can't figure out how to add the Aqua-Resizer into the code.
Here is the code of my slider.
<div id="slides">
<div class="slides_container">
<?php
query_posts('post_type=sliders&p=sliderhome'); // this calls our custom post type of 'sliders' and post id
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$attachments = attachments_get_attachments();
$total_attachments = count($attachments);
if( $total_attachments > 0 ) {
for ($i=0; $i < $total_attachments; $i++)
{
echo '<div><img src="' . $attachments[$i]['location'] . '" alt="' . $attachments[$i]['title'] . '" class="imgradius" /></div>';
}
} ?>
<?php endwhile; else: ?>
<?php endif;
wp_reset_query();
?>
</div>
</div>
This is the code of Aqua-Resizer
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 560, 310, true ); //resize & crop the image
?>
<article <?php post_class()?> id="post-<?php the_ID(); ?>">
<?php if($image) : ?>
<img src="<?php echo $image ?>"/>
<?php endif; ?>
....
I hope you can help me.
Try this
Include the below line to functions.php
require_once('aq_resizer.php');
Change code as
for ($i=0; $i < $total_attachments; $i++)
{
echo '<div><img src="' . **aq_resize($attachments[$i]['location'], 560, 310, true )** . '" alt="' . $attachments[$i]['title'] . '" class="imgradius" /></div>';
}
Reference: http://www.wpsquare.com/resize-images-wordpress-using-aqua-resizer/
This is my code (below) I am attempting to pull posts only from category id 4 and It is working however it is not pulling the post content. It is displaying everything else.
Can anyone help me with this?
<?php get_header(); ?>
<div id="content" class="fixed">
<?php
echo '<div class="row fixed">';
echo '<div class="col580 no-print">';
global $post;
$myposts = get_posts('category=4');
foreach($myposts as $post) :
?>
<div class="post-item">
<?php
$src = null;
$count = 0;
$readmorelabel = get_option(EWF_SETUP_THNAME."_blog_read_more", __('— Read More', EWF_SETUP_THEME_DOMAIN));
$count++;
//## Get post classes
//##
$post_class = get_post_class();
$post_class_fin = null;
foreach($post_class as $key=> $ctclass){
$post_class_fin.= ' '.$ctclass;
}
//## Get post categories
//##
get_the_category( $post->ID );
$post_categories = null;
foreach((get_the_category( $post->ID )) as $category) {
if ($post_categories == null){
$post_categories.= '<a href="'.get_category_link( $category->term_id ).'" >'.$category->cat_name.'</a>';
}else{
$post_categories.= ', <a href="'.get_category_link( $category->term_id ).'" >'.$category->cat_name.'</a>';
}
}
//## Get post featured image
//##
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id,'blog-featured-image');
$src .= '<div class="blog-post '.$post_class_fin.'">';
$src .= '<div class="blog-post-date">'.get_the_time('d').' <span>'.get_the_time('M Y').'</span></div>' ;
$src .= '<h3 class="blog-post-title">'.get_the_title($post->ID).'</h3>' ;
$src .= '<ul class="blog-post-info fixed">
<li class="categories">'.$post_categories.'</li>
<li class="comments">'.get_comments_number().' '.__('Comments', EWF_SETUP_THEME_DOMAIN).'</li>
</ul>';
if ($image_id){
$src .= '<div><img class="blog-post-thumb" src="'.$image_url[0].'" width="480" height="200" alt="" /></div>';
}
global $more;
$more = false;
$src .= '<p>'.do_shortcode(get_the_content(' ')).'</p>';
$more = true;
$src .= '<div class="fixed"><p class="blog-post-readmore">'.$readmorelabel.'</p></div>';
if ($wp_query_blog->post_count != $count ){
$src .= '<div class="hr"></div>';
}
$src .= '</div>';
if ($wp_query->found_posts > $wp_query->query_vars['posts_per_page']){
$src .= ewf_sc_blog_navigation_steps($wp_query->query_vars['posts_per_page'], $wp_query);
}
echo $src;
?>
</div>
<?php comments_template(); ?>
<?php endforeach; wp_reset_postdata();
echo '</div>';
echo '<div class="col280 last">';
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-page') );
echo '</div>';
echo '</div>';
?>
</div>
<?php get_footer(); ?>
You are using get_posts() so you can easily get the post content by using post_content.
I see you use are using this
global $post;
$myposts = get_posts('category=4');
foreach($myposts as $post) :
Please avoid using global variables as local variables, by doing so you might change its value and you might face some issue later, rather do something as below
global $post;
$myposts = get_posts('category=4');
foreach($myposts as $mypost) :
and after this you can easily get the details of each post inside the for each loop for example
global $post;
$myposts = get_posts('category=4');
foreach($myposts as $mypost) :
echo $mypost->post_title; // This gives you the post title
echo $mypost->post_content; // This gives you the post content
endforeach;
You can try and take a reference from the above and try with your code.
Base line: if you are using get_posts() you can get the content of the post from $variable->post_content;
Hope it helps!!!