CodeHQ

Posts Tagged ‘ACF’

|

Responsive WordPress images using SRCSET and ACF

Tuesday, June 26th, 2018

Make sure your image field is set to an array in ACF and then use the below.

‘150px’ is the maximum width your image will ever display.

Click the link to view the code

Tags: , , , ,
Posted in PHP, WordPress | No Comments »

Using media gallery image sizes with ACF | WordPress

Friday, March 25th, 2016

You can use thumbnail, medium, large or full as the sizes variable to serve the size image you require.

<?php $image = get_field('the_image'); ?>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['caption']; ?>" />

Tags: , , , , , , ,
Posted in PHP, WordPress | No Comments »

Hiding empty fields with ACF | WordPress

Tuesday, March 8th, 2016

<?php if( get_field('video_url') ):?>
	Show this if field exists <?php the_field('video_url');?>
<?php else : ?>
    Show this if not
<?php endif;?>

Tags: , , ,
Posted in PHP, WordPress | No Comments »

ACF – Flexible content | WordPress

Wednesday, February 24th, 2016

Useful code for Advanced custom fields (ACF) flexible content – perfect for page builders

<?php
if( have_rows('pagebuilder') ):
    while ( have_rows('pagebuilder') ) : the_row();
        if( get_row_layout() == 'hero' ):
        	
        	get_template_part( 'assets/parts/pagebuilder/hero');
     
		elseif( get_row_layout() == 'call_to_action' ):
		
        	get_template_part( 'assets/parts/pagebuilder/call-to-action');
 
        endif;
    endwhile;
else :
    // no layouts found
endif;
?>

Tags: , , , ,
Posted in PHP, WordPress | No Comments »

WordPress OEmbed – responsive video

Thursday, February 18th, 2016

Adds a container around iframes to allow responsive video when utilising WordPress OEmbed functionality.

jQuery

$("iframe").wrap("<div class='iframe-container'/>");

SCSS

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Original source

Tags: , , , , ,
Posted in CSS, WordPress | No Comments »