I have two fields one named ‘header_banner_image’ as an Image and displaying as an Image URL and another duplicate Image field named ‘Secondary_header_banner_image’
And I have this piece of code in a if else conditional statement.
if(get_field('header_banner_image') != '' || get_field('secondary_header_banner_image') != '') {
echo get_field('header_banner_image') || echo get_field('secondary_header_banner_image');
}
My goal is to display either one image or the other on refresh, it doesn’t matter which one – I just want to be able to display one or the other image.
Hi @dailyreup
This will show the first image if it exists, otherwise fallback to the secondary image. If none exists nothing will show.
<?php
$header_image = ( get_field('header_banner_image') ? get_field('header_banner_image') : get_field('secondary_header_banner_image') );
if( $header_image) {
?>
<img src="<?php echo $header_image; ?>" alt="" />
<?php } ?>
Is that what you where after?
What if i want to change the images on refresh..
I am doing the following
<div style="background-image:url(<?php
if(get_field('header_banner_image') != '') {
echo get_field('header_banner_image');
} elseif($default_page_options['banner_image']) {
$url_array = parse_url($default_page_options['banner_image']);
echo get_site_url() . $url_array['path'];
} else {
echo get_site_url() . '/wp-content/themes/neo/images/bg-header.jpg';
}
?>); background-position: <?php
echo get_field('header_banner_position_x'); ?> <?php
echo get_field('header_banner_position_y'); ?>;" class="page-header-ban-img" >
Alright.. Here’s your code with a bit of cleanup/structuring. This code will randomly select either image with each page refresh and use it.
<?php
$images = array();
if( $header_image = get_field('header_banner_image') ){
$images[] = $header_image;
}
if( $sec_header_image = get_field('secondary_header_banner_image') ){
$images[] = $sec_header_image;
}
if( !empty($images) ){
$use_image = array_rand($images, 1);
$x_pos = get_field('header_banner_position_x');
$y_pos = get_field('header_banner_position_y');
}
?>
<?php if( isset( $use_image ) ): ?>
<div style="background-image:url(<?php echo $use_image; ?>); background-position:<?php echo $x_pos . ' ' . $y_pos; ?>;" class="page-header-ban-img" >
<?php else: ?>
<div class="page-header-ban-img" >
<?php endif; ?>
The code is working with the background-position the values are rendering correct but the background-image:url() is rendering as
background-image:url(1) and on refresh background-image:url(0)
No clue why, btw i set the return value in ACF to return Image URL
If i replace background-image:url(<?php echo $use_image; ?> with either background-image:url(<?php echo $header_image; ?> or background-image:url(<?php echo $sec_header_image; ?> it renders the image correctly.
But i want it change it on refresh.
My bad.. change it to this:
<?php if( isset( $use_image ) ): ?>
<div style="background-image:url(<?php echo $images[$use_image]; ?>); background-position:<?php echo $x_pos . ' ' . $y_pos; ?>;" class="page-header-ban-img" >
<?php else: ?>
<div class="page-header-ban-img" >
<?php endif; ?>
Dude you are awesome! Can i buy you a beer?
Haha no worries!
Well I live in Sweden but I appreciate the sentiment 🙂
i can donate $ so you can buy it 🙂 lol
Thanks man!
No need but thanks anyway!
Feel free to post any other issues you have here and we’ll try to help you out best we can.
Have a nice weekend.
