On this page http://www.cardiffchristmasmarket.com/visit/ i'm trying to get 4 images to display down the side - only 3 images display and when i upload the 4th to the page in WordPress it just removes it instantly. HELP!
PHP of the page below:
<div class="col span_1_of_4">
<div class="page_image">
<?php if( get_field('image_1') ): ?>
<img src="<?php the_field('image_1'); ?>" />
<?php endif; ?>
</div>
<div class="page_image">
<?php if( get_field('image_2') ): ?>
<img src="<?php the_field('image_2'); ?>" />
<?php endif; ?>
</div>
<div class="page_image">
<?php if( get_field('image_3') ): ?>
<img src="<?php the_field('image_3'); ?>" />
<?php endif; ?>
</div>
<div class="page_image">
<?php if( get_field('image_4') ): ?>
<img src="<?php the_field('image_4'); ?>" />
<?php endif; ?>
</div>
</div>
Please check the name "image_4" is match with the id in the custom field
or check the return type of the image in the custom field
Check your wordpress settings, it might be set to display three images only. It may be page settings or widgets, theme settings.
It Seams that you are using ACF (Advanced Custom Fields)
Check this URL for displaying correctly the Images : https://www.advancedcustomfields.com/resources/image/
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
Thanks for your help guys!
The issue lay in the Custom Fields - the field name for image 4 was missing '_'
THANKS!
Related
I'm attempting to add a background video to a wordpress website in place of the large image that is currently there.
I understand how to set up the video with HTML5 and CSS, but am not very familiar with php and am kind of lost on where to begin when it comes to writing a function to pull the video/s (wmp and mp4) from the media library and display them.
Any guidance on how to go about this would be much appreciated. Thanks!
I know that this is the part of the code that needs to be modified:
<div class="intro-block">
<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<?php
$image = get_field('global_intro_image', 'option');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
<?php endif; ?>
<div class="text-holder">
<div class="container">
<?php if( $title = get_field( 'title' )) : ?>
<h1><?php echo $title; ?></h1>
<?php endif; ?>
<?php if( $find_btn_link = get_field( 'find_btn_link' )) : ?>
<?php echo get_field( 'find_btn_text' ); ?>
<?php endif; ?>
</div>
</div>
</div>
It currently pulls the featured image for the page and displays it.
Any suggestions on where to begin?
Thanks in advance!
First you need to find out which part is calling the image. Looks like this part:
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
Then comment out this part or just remove this part of the code and replace if with video tag and style it so it looks just as you need.
Then if you need to be able to indicate videos from wordpress back end, than you need to create options page / or only add fields if you have theme options page.
https://codex.wordpress.org/Creating_Options_Pages
Even easier is to create options pages with ACF pro
I am using Advanced Custom Fields plugin in Wordpress and have managed (with very limited PHP knowledge) to use their repeater fields to create an accordion.
Everything is working really well except the image field (company_logo). So long as the user selects an image for this custom field it displays fine but if they do not select an image I get some strange text instead.
Using my current code I'm trying to add in an 'if' statement so if they do not select an image it displays a default image instead. I've stride lots of variations but cannot get it to work.
Can anyone help/point me in the right direction please? Also, if theres a way I can clean this up as I seem to use a lot of
<div id="accordion">
<?php if( have_rows('exhibitor') ): ?>
<?php while( have_rows('exhibitor') ): the_row(); ?>
<h4 class="accordion-toggle"><?php the_sub_field('exhibitor_type'); ?></h4>
<div class="accordion-content">
<?php while( have_rows('table') ): the_row(); ?>
<div class="exhibitor-single">
<p class="table-field">Table <?php the_sub_field('table_no'); ?></p>
<p><?php the_sub_field('company_name'); ?></p>
<?php $image = wp_get_attachment_image_src(get_sub_field('company_logo'), 'logo'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('company_logo')) ?>" />
<p><?php the_sub_field('company_website'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
You should be able to just wrap the image 'section' in this:
<?php
if(get_sub_field('company_logo')) :
$image = wp_get_attachment_image_src(get_sub_field('company_logo'), 'logo');
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('company_logo')) ?>" />
<?php
else :
?>
<!-- Your default image here -->
<img src="" alt="" />
<?php
endif; ?>
I'm currently using the advanced custom fields plugin on a wordpress site that I'm developing and it is proving very useful.
I bought the repeater addon which had helped me generate a list of staff members. However I imagine that there won't always be an image available for the staff member so I would like to use a fallback image or use an online placeholder image service like http://placehold.it?
Here is the code:
<?php if(get_field('about_the_practioner')): ?>
<?php while(the_repeater_field('about_the_practioner')): ?>
<article class="colleague_excerpts">
<figure>
<?php if(get_field('image')): ?>
<img src="<?php the_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?>
</figure>
<div class="description">
<header>
<h4><?php the_sub_field('header')?><span><?php the_sub_field('title')?></span></h4>
</header>
<p><?php the_sub_field('text') ?></p>
<?php the_sub_field('page_link_text') ?>
</div>
<hr>
</article>
<?php endwhile; ?>
<?php endif; ?>
I've seen conditional statements used to create fallback images if a featured image is not available. I have tried something similar in this case at the point where the image is called, I'm not good with php however and only the fallback image is brought into the webpage even if the image field is populated. Any help would be appreciated.
Just figured it out! The functions that I was passing into the conditional statement were incorrect! I was using the repeater field feature of advanced custom fields and should have been passing in get_sub_field for all the values above. Its the little things that trip you up!
<?php if(get_sub_field('image')): ?>
<img src="<?php the_sub_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?>
Although I don't know what some of these functions return the function get_field('image') may return something no matter if there is an image or not, so instead of
<?php if(get_field('image')): ?>
<img src="<?php the_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?>
Maybe try
<?php if(!empty(the_field('image'))): ?>
<img src="<?php the_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?>
Which returns the placeholder if the image is empty.
I might be counting wrong, in fact I was. Ignore this answer. I thought the brackets weren't matching up, and that a problem in the generated HTML was causing a problem. Jonny Beech has worked it out.
Try this
<?php
$image = get_field('banner');
if( !empty($image) ):
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/>
<?php else: ?>
<?php
echo "no image";?>
<?php endif; ?>
I'm displaying a custom field like this:
<div class="blog_text">
<img src="<?php the_field('imagen_prensa'); ?>" />
</div>
I would like to make the img appear only if the user has uploaded an image, because right now if there is no image then a broken image symbol appears.
I have tried the following, but it did not work:
<?php if (get_field('imagen_prensa') != ''): ?>
<img src="<?php the_field('imagen_prensa'); ?>" />
<?php endif; ?>
Any can this be achieved?
EDIT:
this is the code now using the answers below but now it gives just a blank page:
<div id="blog_interior">
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<div class="article_date"><?php the_time('d/m/Y'); ?></div>
<h2><?php echo get_the_title(); ?></h2>
<div class="blog_text">
<?php if ( !empty(the_field('imagen_prensa')) ): ?>
<img src="<?php echo the_field('imagen_prensa'); ?>" />
<?php endif; ?>
<div class="video_prensa"><?php the_field('video_prensa'); ?></div>
<?php the_content() ?>
</div>
</article>
<?php endwhile; ?>
<div class="back">
</div>
</div>
empty empty — Determine whether a variable is empty
if (!empty(get_field('imagen_prensa'))) {
// Display image
}
You forgot the echo to actually print the result of the_field('imagen_prensa').
Use this:
<?php if ( !empty(the_field('imagen_prensa')) ): ?>
<img src="<?php echo the_field('imagen_prensa'); ?>" />
<?php endif; ?>
I've edited your code, to something which seems a bit more logical also added echo's where they were missing. I'm not used to these constructions:
<?php while ( have_posts() ) : the_post(); ?>
So I'm not actually sure if it's working properly or not, but you could check what these variables output by surrounding them with a var_dump like var_dump(have_posts());
Your edited code:
<div id="blog_interior">
<?php /* Start the Loop */ ?>
<?php foreach( $posts as $post ): ?>
<div class="article_date"><?php echo the_time('d/m/Y'); ?></div>
<h2><?php echo get_the_title(); ?></h2>
<div class="blog_text">
<?php if ( !empty(the_field('imagen_prensa')) ): ?>
<img src="<?php echo the_field('imagen_prensa'); ?>" />
<?php endif; ?>
<div class="video_prensa"><?php the_field('video_prensa'); ?></div>
<?php echo the_content() ?>
</div>
<?php endforeach; ?>
<div class="back">
</div>
</div>
Try using empty() instead of comparing with an empty string.
<?php if (empty(get_field('imagen_prensa')) === false): ?>
<img src="<?php echo the_field('imagen_prensa'); ?>" />
<?php endif; ?>
empty() also checks for values like null or false which may be returned. You may also trim() the string if the field may contain only whitespaces.
As per your requirement you have set default image as no image in user.
If user have uploaded image then display its own image.
See this link may be help you. PHP: How to display a default Image if the specified one doesn't exists?
I wanted to use the custom field for wordpress to have a different header banner for my site here is my code:
<?php
get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="BodyWrap">
<!--MAIN CONT-->
<div id="mainCont">
<?php get_sidebar(); ?>
<div id="rotateBanner"><?php
// check for image
$image = get_post_meta($post->ID, 'image', $single = true);?>
<img class="mainImg" src="<?php bloginfo(template_url); echo $image; ?>" alt=""/>
</div>
<div id="mainCopy">
<div id="content">
<h2><?php single_post_title(); ?></h2>
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
Now the code renders but for some reason it only renders the img path as:
<img alt="" src="http://www.testground.idghosting.com/philcom/wp-content/themes/phil"/>
here is the demosite
in the custom field I put this: image
For the value I put this: /images/sampleHead.png
tried it using a php code but there is a plugin that does it well it's workth a try http://wordpress.org/extend/plugins/custom-field-images
I think that you are just missing a "/" - If you look at the code below (a normal way in wordpress to do an image):<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="logo" /></div>
Therefore you should have <img class="mainImg" src="<?php bloginfo(template_url); ?>/<?php echo $image; ?>
or something similar to this case since I haven't been haven't been able to test it.
You have to make sure inside your add post page, you are creating the correct
custom field... if you called your custom field "Image", and your using "image", the Capital in Image would through this off..
and inside the custom field i would a stick in the full URL, direct to the image..
this way its less hassle to code, and easier to link to..
<div id="rotateBanner">
<?php $image = get_post_meta($post->ID, 'image', $single = true);?>
<img class="mainImg" src="<?php echo $image; ?>" alt=""/>
</div>
Your image link should be something like this as bvandrun points out
<img class="mainImg" src="<?php bloginfo(template_url); ?>/<?php echo $image; ?>
I would highly recommend using the MagicFields wordpress plugin for custom fields. Once you have it set up with a page.