In a custom Wordpress blog site designed by our marketing agency, I need to have the home page slider images open their URL links in a new window:
Here's the link variable code from slider.php:
<?php foreach ( $sliders as $slider ) : ?>
<li>
<?php if ( ! empty($slider['slider_url']) ) : ?><a href="<?php echo $slider['slider_url']; ?>"><?php endif; ?>
<img src="<?php echo $slider['slider_image']['url']; ?>" />
<?php if ( ! empty($slider['slider_url']) ) : ?></a><?php endif; ?>
</li>
<?php endforeach;?>
If your link is opening in the same window properly then you need to add target="blank". Make the following changes and enjoy.
replace this <a href="<?php echo $slider['slider_url']; ?>"> with <a href="<?php echo $slider['slider_url']; ?>" target="_blank">
Why are you double checking if not empty slider_url ?
Also, you should put the 'li' tag inside the if statement, because if the data are empty you don't want an empty 'li' tag to exist inside the slider.
Anyway, this should do what you asked for
<?php foreach ( $sliders as $slider ) : ?>
<?php if ( ! empty($slider['slider_url']) ): ?>
<li>
<a href="<?php echo $slider['slider_url']; ?>" target="_blank">
<img src="<?php echo $slider['slider_image']['url']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach;?>
Related
I have created custom fields through the ACF Options page where a user will input their social media profile links. If there is no link, it will not display that icon on the front end. I've done this through creating a group titled 'Social Media' with the various platforms as fields within that group.
I'm pulling my hair out trying to pull those sub-field values into the theme footer. It simply doesn't display anything but when I display a value that isn't nested within a group it shows up.
Footer.php ↴
<?php
if( have_rows('social_media') ):
while( have_rows('social_media') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
ACF Group ↴
ACF Options Page ↴
TIA for any help. Much appreciated.
I assume the fields are on an ACF options page so you have to pass the string options in the have_rows function
have_rows('social_media', 'options')
Check this link for more info https://www.advancedcustomfields.com/resources/options-page/
the code wil look like:
<?php
if( have_rows('social_media', 'option') ):
while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
Note that the sub fields don't need a options string
A clean way to hide the Li when the field is empty:
<?php while ( have_rows('social_media', 'option') ) : the_row(); ?>
<?php if (get_sub_field('instagram')): ?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endif; ?>
<?php endwhile; ?>
If you have created this field in options page then you have to pass option parameter with the field. Check this link https://www.advancedcustomfields.com/resources/options-page/
Like this
<?php the_field('your-field-name', 'option'); ?>
So try with below code.
<?php
if( have_rows('social_media', 'option') ):
while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
When you echo fields from ACF Options Page, just pass 'option' parameter like the_field('acf_field_name', 'option' )
In your case code should be:
<?php
if( have_rows('social_media', 'option') ):
while( have_rows('social_media', 'option') ) : the_row();
?>
<li>
<a href="<?php the_sub_field('instagram'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/icons/instagram.png" width="25px" height="25px" alt="Instagram Profile">
</a>
</li>
<?php endwhile; endif; ?>
I have three separate fields in acf one for each image named slide_one, slide_two and slide_three. Now when I try to get the images to display using the code below nothing is being output. I am doing it this why and not using a loop like you usually as I'm wanting to have a separate text overlay for each image that I will have sliding in separately. This is the first step and it won't work. What an I doing wrong?
<div class="slider">
<ul class="slides">
<?php
$image_one = get_field('slide_one');
if( !empty($image_one ): ?>
<li>
<img src="<?php echo $image_one['url']; ?>" alt="<?php echo $image_one['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_two = get_field('slide_two');
if( !empty($image_two ): ?>
<li>
<img src="<?php echo $image_two['url']; ?>" alt="<?php echo $image_two['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_three = get_field('slide_three');
if( !empty($image_three ): ?>
<li>
<img src="<?php echo $image_three['url']; ?>" alt="<?php echo $image_three['alt']; ?>" />
</li>
<?php endif; ?>
</ul>
</div>
The code to generate a list of most read articles on my Joomla website AND display their intro images is as follows:
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif; ?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
</ul>
Having little to no experience with PHP, what do i need to do to this code to make it display only the first item's image instead of for all of them?
#hek-mat was close, but the OP was trying to stop the image on the other posts from displaying, not the link and title.
<?php
// track if we've seen an image yet or not
$seen_first = false;
foreach ( $list as $item ) :
$images = json_decode( $item->images );
// OP only wants posts with image_intros
if ( $images->image_intro ) :
// OP only wants to see the first item's image
if ( ! $seen_first ) :
?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars( $item->title ); ?>" />
<?php
// don't show another image
$seen_first = true;
// end "if first not seen yet"
endif;
// show the article (for all)
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name"><?php echo $item->title; ?></span>
</a>
</li>
<?php
// end "if image_intro"
endif;
endforeach;
?>
Try like this..
Set a variable $first = true; after displaying first item set it to false.
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php
$first = true;//initially set true
foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
if($first==true){ ?> //checks $first is true if true prints
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif;
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php
}
$first = false;//after printing first item set it false
endforeach; ?>
</ul>
To display only first item image you have do it like below.
<?php
$first = true;//initially set true
foreach ($list as $item) :
$images = json_decode($item->images);
if($first==true):
if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php
endif;
endif;
$first = false;
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
Rather than modifying the PHP, it is probably easier to add some CSS to a custom CSS file like this:
ul.mostread img {display: none;}
ul.mostread img:first-of-type {display: block;}
so that only the first image is displayed.
See https://joomla.stackexchange.com/a/3878/120 for instructions on how to create a custom CSS file in Joomla.
A custom CSS file also has the advantage that it won't be overwitten by any future Joomla or template updates.
I'll try to word this the best I can:
My blog homepage has 4 feeds of "Latest from: (a category)" fed by 4 different categories, each showing 2 posts. I discovered the do_not_duplicate method and used that to prevent any of them from showing up twice (since the authors use multiple categories on each post to populate our blog). This works great, but here is my next issue:
If a post has multiple categories that populate the home page, it will post in just one category and not duplicate (as wanted), but the other category it is in now only shows just 1 post, where I'd like it to show 2. Since the 2nd 'missing' post is the duplicate, not be shown, I'm wondering how I can show the next (3rd) post in that category, if the duplicate is being hidden.
Here is my current code:
<!-- BEGIN WP PHP BLOG INSERT-->
<?php query_posts('category_name=campuses&showposts=2'); //Get 2 most recent posts from category with slug campuses ?>
<h2 class="cat"><?php if (have_posts()) single_cat_title("Latest from: ", true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); $do_not_duplicate[] = $post->ID; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=programs&showposts=2'); //Get 2 most recent posts from category with slug programs?>
<?php if (have_posts()) single_cat_title('<h2 class="cat">Latest from: ', true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=online&showposts=2'); //Get 2 most recent posts from category with slug online?>
<?php if (have_posts()) single_cat_title('<h2 class="cat">Latest from: ', true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=service-applied-learning&showposts=2'); //Get 2 most recent posts from category with slug service-applied-learning ?>
<h2 class="cat"><?php if (have_posts()) single_cat_title("Latest from: ", true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php if( function_exists( 'wp_pagenavi ' ) ) {
wp_pagenavi();
} else {
next_posts_link('Older Posts');
previous_posts_link(' | Newer Posts');
} ?>
</div>
</div>
<div class="sidebar-wrapper">
<?php get_sidebar(); ?>
</div>
<!--END WP PHP BLOG INSERT-->
Not sure if this will help but it looks as though you need to reset your query_posts(); to give it another clean run
After each <?php endwhile;?> you would add
<?php wp_reset_query(); ?>
https://codex.wordpress.org/Function_Reference/wp_reset_query
Quote:
wp_reset_query() restores the $wp_query and global post data to the original main query. This function should be called after query_posts(), if you must use that function. As noted in the examples below, it's heavily encouraged to use the pre_get_posts filter to alter query parameters before the query is made.
Calling wp_reset_query is not necessary after using WP_Query or get_posts as these don't modify the main query object. Instead use wp_reset_postdata.
I try to insert the value of a custom field in a background-image property ( therefore not in img src="..."').
In my category.php; I can display the custom field linked to each post; but when I put the variable in my style ( inline css ), wordpress always displays the same image.
The code :
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<div class="interview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php $photo_interview = get_field('photo_apercu', $post->ID); ?>
<?php echo $photo_interview; ?>
<?php the_title(); ?>
<style type="text/css">
.photo_interview {
background-image: url(<?php echo $photo_interview; ?>);
}
</style>
<div class="photo_interview"></div>
</a>
</div>
<?php endwhile;
else: ?>
<?php endif; ?>
Any idea ? My page here : http://www.overso.me/category/interview/
Your code should be this:
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<div class="interview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php $photo_interview = get_field('photo_apercu', $post->ID); ?>
<?php echo $photo_interview; ?>
<?php the_title(); ?>
<!-- You don't need style tags if you only want to set the background image -->
<div style="background-image: url(<?php echo $photo_interview; ?>)"></div>
</a>
</div>
<?php endwhile;
else: ?>
<?php endif; ?>
For what I can see you haven't set the global $post, so get_field do not know which is needed to display. in this case it will be better to use the_ID() to get the current post ID inside the while loop.
Cheers