Image-Not-Available option

• stinkykong

• February 3, 2016 at 4:03 am

I don’t know where to look for this but I bet it’s simple.

I have an image field(with user-crop). If no image is added there, I want to show an image in its place that indicates something like “image not available” with the logo, etc.

So I don’t know if I can add another custom field that pulls the alternate image in with HTML and has conditional logic applied, -OR- if there’s an if-else method I could put in my single.php file, -OR- if I should try using a CSS background (problematic).

Can you help this newbie out?

• Jonathan Horowitz

• February 3, 2016 at 4:52 am

Hi stinkykong,

You may do any of the above. I would suggest creating an additional field for the ‘alt image’, so that changing the alt image URL down the road would not require any code changes.

Where you might wish to store this additional field is up to you. You might choose to make it a site-wide option and store it on an ACF Options Page, or make it more flexible by assigning it to a hierarchical taxonomy, such as the Post Category.

Take a look at the acf_add_options_page documentation and How to get values from an options page.

To test a field’s existence, you may do something like this:

<?php

$my_img_url = get_field('image-field-name-or-key');
if ( !$my_img_url ) {
    $my_img_url = get_field('default-image-field-name-or-key', 'option');
    // ProTip: You may want to also check here if the option page default image hasn't been set either!
}

// Use $my_img_url here

?>

HTH 🙂

————————

Help your fellow forum-goers and moderation team; if a response solves your problem, please mark it as the solution. Thank you!

• stinkykong

• February 3, 2016 at 9:35 am

I don’t follow you. It’s a stretch beyond my comfort zone, I suppose.
I have this working (adapted from ACF website snippet):

<?php 

$image = get_field('photo102');

if( !empty($image) ): 

	// vars
	$url = $image['url'];
	$title = $image['title'];
	$alt = $image['alt'];
	$caption = $image['caption'];

	// thumbnail
	$size = 'member-listing';
	$thumb = $image['sizes'][ $size ];
	$width = $image['sizes'][ $size . '-width' ];
	$height = $image['sizes'][ $size . '-height' ];

	if( $caption ): ?>

		<div class="wp-caption">

	<?php endif; ?>

	 <!--  see single-cdtxprofessional.php in this area for code for adding link to picture itself if you want that -->

		<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

	</a>

	<?php if( $caption ): ?>

			<p class="wp-caption-text"><?php echo $caption; ?></p>

		</div>

	<?php endif; ?>

<?php endif; ?>

So, if the user doesn’t add an image here, I would like a default alternate. If I do the global ACF options method, I’m not clear on how I add the function with a priority less than 99. Also don’t know where I put such code, in theme functions or a plugin? Sorry, as I’m a bit green here.

• Jonathan Horowitz

• February 3, 2016 at 2:55 pm

No worries! You may do either a theme or plugin, depending on how you are adding this functionality. Let’s assume you are modifying a theme, in which case you could add the following to functions.php:

if( function_exists('acf_add_options_page') ) {
 
	$option_page = acf_add_options_page(array(
		'page_title' 	=> 'Theme General Settings',
		'menu_title' 	=> 'Theme Settings',
		'menu_slug' 	=> 'theme-general-settings',
		'capability' 	=> 'manage_options',
		'redirect' 	=> false
	));
 
}

Then you can setup a new field group in ACF, and select as a Rule to display the field group: Options Page is equal to <Your Options Page Name>.
In this field group you would add another image field, for the default image.

Finally, you may modify your code above as follows:

<?php 

// First try the image you want
$image = get_field('photo102');
if( empty($image) ): 
    // If that doesn't work, try to get the Option Page setting
    $image = get_field('photo_alternate', 'option');
endif;

// Now check for existence of either option having worked
if( !empty($image) ):
	// vars
	$url = $image['url'];
	$title = $image['title'];
	$alt = $image['alt'];
	$caption = $image['caption'];

	// thumbnail
	$size = 'member-listing';
	$thumb = $image['sizes'][ $size ];
	$width = $image['sizes'][ $size . '-width' ];
	$height = $image['sizes'][ $size . '-height' ];

	if( $caption ): ?>

		<div class="wp-caption">

	<?php endif; ?>

	 <!--  see single-cdtxprofessional.php in this area for code for adding link to picture itself if you want that -->

		<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

	</a>

	<?php if( $caption ): ?>

			<p class="wp-caption-text"><?php echo $caption; ?></p>

		</div>

	<?php endif; ?>

<?php endif; ?>

————————-

Help your fellow forum-goers and moderation team; if a response solves your problem, please mark it as the solution. Thank you!

• stinkykong

• February 3, 2016 at 10:32 pm

This is a big help. I’m on my way so I’ll mark this as solved and hope I can follow through. Many thanks for your patience and kindness.