ACF Wordpress styling custom fields - php

I have an issue with styling each field of ACF in .php file.
<?php the_field('service_section_title'); ?>
<?php the_field('service_section_description'); ?>
Learn more
<?php if( have_rows('services') ):
while ( have_rows('services') ) : the_row();
$image = get_field('service_icon'); if( !empty($image) ):
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
get_field('service_title');
get_field('service_description');
endwhile; else : endif; ?>
How exactly I should put HTML to wrap my
get_field('service_title');
get_field('service_description');
And Image field;
For example:
<p class="text-faded">?php get_field('service_description');?>
</p>
How to wrap php with html in a correct way (not breaking the php code with php and then interrupting again)

Here is what I suggest you do:
<?php if (have_rows('repeater')): ?>
<?php while (have_rows('repeater')): the_row(); ?>
<?php
$variable = get_sub_field('variable');
?>
<div class="repeater-item">
<div class="variable-item">
<?php echo $variable; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
All you do after this is style everything inside div class="variable-item" and then you can style anything in there.

Related

Get parameter of shortcode in Insert PHP Code Snippet plugin using ACF repeater

Everybody hello! I'm sorry for asking such kind easy question, I'm pretty new at this. I have problem with transfering parameter value and echoing it to itself.
PHP code snippet on page:
[xyz-ips snippet="Generating-content" paramSet="1"]
Inside 'generating content':
<?php if( have_rows('information') ): ?>
<?php while( have_rows('information') ): the_row(); ?>
<?php $sub_value = get_sub_field('number');
if($sub_value == 1): ?>
<div class="d-block d-md-flex d-lg-flex">
<img src="<?php the_sub_field('image'); ?>">
<div>
<?php if( have_rows('repeatable_content') ): ?>
<?php while( have_rows('repeatable_content') ): the_row(); ?>
<p>
<?php the_sub_field('text'); ?>
</p>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
Right now I need to change condition if($sub_value == 1) to if($sub_value == "PARAMETER VALUE")
Please help, guys!
I think that is what you are looking for.Not tested but it should work.
<?php
$paramSet = (!isset($atts['paramSet'])) ? $atts['paramSet'] : 'default';
if (have_rows('information')) : ?>
<?php while (have_rows('information')) : the_row(); ?>
<?php $sub_value = get_sub_field('number');
if ($sub_value == $paramSet) : ?>
<div class="d-block d-md-flex d-lg-flex">
<img src="<?php the_sub_field('image'); ?>">
<div>
<?php if (have_rows('repeatable_content')) : ?>
<?php while (have_rows('repeatable_content')) : the_row(); ?>
<p>
<?php the_sub_field('text'); ?>
</p>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
Read More - https://developer.wordpress.org/reference/functions/shortcode_atts/
Thank you guys for helping! The main issue of this problem is that you have to buy premium version of this plugin, your version is working in another plugins :)
Working plugin's name: Shortcodes Blocks Creator Ultimate

How can I embed a background video into my Wordpress theme using HTML5 and without using a plugin?

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

Wordpress custom field - css in loop

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

Conditional PHP if and else statements within existing accordion

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; ?>

Display custom field if it has content or hide if not

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?

Categories