I am using ACF Pro to make a slider carousel with Slick Slider. I can get it to work with a basic gallery field but I am not even getting it to show when I try to display a repeater field with several sub fields. I am not sure exactly what I am doing wrong but I have been playing with this for a while, and I feel like I am kinda' half there.
Working PHP
<!-- Slider 1 -->
<?php
//Fields
//slider_portfolio = Gallery Field
$images = get_field('slider_portfolio');
if( $images ): ?>
<div class="slider-for">
<?php foreach( $images as $image ): ?>
<div class="slick-container">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Non-Working PHP
This is the version I am trying to get to work. It is currently one image sub field inside a repeater field.
Fields:
slider_image = field (repeater field)
portfolio_slider = subfield (image field)
<!-- Slider 2 -->
<?php
//Image Slider
//slider_image = field (repeater field)
//portfolio_slider = subfield (image field)
function agero_slider() {
if( have_rows('slider_image') ):
echo '<div class="slider-for">';
// loop through the rows of data
while ( have_rows('slider_image') ) : the_row();
// display a sub field value
//vars
$image = get_sub_field('portfolio_slider');
?>
<div><img src="<?php echo $image['url']; ?>"/></div>
<?php
endwhile;
echo '</div>
<div class="slider-nav">';
// loop through the rows of data
while ( have_rows('slider_image') ) : the_row();
// display a sub field value
//vars
$image = get_sub_field('portfolio_slider');
?>
<div><img src="<?php echo $image['url']; ?>"/></div>
<?php
endwhile;
echo '</div>';
else :
// no rows found
endif;
}
?>
JS Code
This works, even though I need to build on it.
jQuery(document).ready(function($){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false,
asNavFor: '.slider-for',
focusOnSelect: true,
fade: true,
autoplay: false
});
});
I'm not sure why the first code is working but the second is not.
Relevant links:
ACF - https://www.advancedcustomfields.com/resources/code-examples/
Slick - http://kenwheeler.github.io/slick/
The Tutorial that I am using as a rough guide to get started -
http://wpbeaches.com/coding-a-slider-with-slick-and-acf-pro-in-wordpress/
If anyone can suggest what I am doing wrong or maybe suggest a concrete way to display multiple custom fields within a multi slide carousel where the text fields change with each slide image. Once I get this working I can expand it by making each repeater field a slide that can be updated through the UI.
I think maybe I am going about this wrong. Maybe I need to add everything inside a flexible content field or something? Not sure right now, but the second example seems like it should work.
Fields:
slider_image = field (repeater field)
portfolio_slider = subfield (image field)
ACF repeater image Code:
<?php
if( have_rows('slider_image',get_the_ID()) ) {
if( have_rows('slider_image',get_the_ID()) ):
while ( have_rows('slider_image',get_the_ID()) ) : the_row();
?>
<img src="<?php echo get_sub_field('portfolio_slider', get_the_ID()); ?>"/>
<?php
endwhile;
endif;
}
?>
Ok I figured it out! The setup is a little different but it works great.
PHP / HTML Working Code
<section class="dev-slider-wrppr">
<div class="dev-slider-row">
<div class="slider-for">
<?php if( have_rows('slider_content') ): ?>
<?php while( have_rows('slider_content') ): the_row(); ?>
<?php
$slideimage = get_sub_field('slider_image');
$slidetitle = get_sub_field('slider_title');
$slidebdycpy = get_sub_field('slider_body_copy');
?>
<div class="slick-container">
<h4 class="info-title text-center"><?php echo $slidetitle; ?></h4>
<p class="description"><?php echo $slidebdycpy; ?></p>
<img src="<?php echo $slideimage['url']; ?>" alt="<?php echo $slideimage['alt']; ?>" />
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</section>
JS Working Code
jQuery(document).ready(function($){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false,
asNavFor: '.slider-for',
focusOnSelect: true,
fade: true,
autoplay: false
});
});
My ACF Setup
Now this is just the basic functionality. If anyone wants to use this they will still have to do some extra CSS & JS.
Related
I have this page containing recent posts at the bottom. I have set it to randomly show me three posts from the same category as the current post. Heres the loop:
<!-- Related Posts =========================================== -->
<div class="relared-posts-heading">
<h2>SIMILAR INSIGHTS</h2>
</div>
<div class="container blog-card-container">
<div class="card-columns">
<?php
// the query
$the_query = new WP_Query( array(
'orderby' => 'rand',
'cat' => '-14',
'posts_per_page' => 3,
));
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- Conditional a Link =========================================== -->
<?php
if(get_field('quote') == ''){
$yourTag = "<a href='".get_the_permalink()."'>" ;
} else {
$yourTag = "";
}
?>
<div> <?php echo $yourTag; ?> </div>
<div class="card">
<a href="<?php the_permalink(); ?>">
<div class="blog-thumb-container-2">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
</div>
</a>
<div class="blog-meta-container-2">
<p class="blog-cat-label"><?php the_category(', '); ?></p>
<h2 class="blog-card-title"><?php the_title(); ?></h2>
<p class="card-text"><?php the_excerpt(__('(more…)')); ?></p>
<p><strong><?php the_author(); ?></strong> | <?php echo get_the_date(); ?> </p>
</div>
</div>
</a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>
</div>
</div>
This works fine currently.
The trouble is, when finished, the site will be behind a clients custom cache and he tells me that PHP randomisers wont work as it will just show the cached version. He suggested I do any randomising using Javascript!
So firstly - is this possible? Secondly, How would I go about targeting this is javascript!? Thanks for looking!!
Unfortunately you won't be able to randomize a post in this way for the caching reason.
What you can do instead is use an Ajax call to dynamically fetch and insert a random post...
$.get('/wp-content/themes/SomeTheme/random.php?v=' + Math.floor(Date.now() / 1000))
.done(function(resp) {
$('.random-post').html(resp);
})
.fail(function(xhr) {
// handle error (xhr object contains the response)
});
And then create a separate random.php file in your theme and put the code to randomly return a single post in there. Note, that you don't need to put the whole layout around the post (don't include header.php etc). That's because this exact HTML fragment will be sent to the frontend and inserted dynamically.
The ?v= parameter is required for cache busting so that it fetches a new post each time.
Try wrapping the entire funtionality as a shortcode.
When I click one of the preview images, in order to bring up the fancybox gallery, it just swipes the image to the right and gives me this broken overlay. Not sure what the issue is here...
HTML (Note I'm using WordPress and Advanced Custom fields):
<?php if ( have_rows("inspiration_gallery") ) : ?>
<?php $i = 0; while ( have_rows("inspiration_gallery") ) :
the_row();
$img = get_sub_field("inspiration_image");
$img_id = $img['ID'];
$img_url = $img['url'];
$gallery_id = $gallery_id ? $gallery_id : $img_id;
$related = get_sub_field("inspiration_related");
?>
<?php if ($i == 0): ?>
<!-- Preview Image -->
<a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
<?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
</a>
<?php else: ?>
<!-- Gallery Fancybox Link -->
<a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
I've got the latest versions of Fancybox JS and CSS files enqueued.
I'm doing an slider image by using the plugin OwlCarousel2
I have added the JavaScript and CSS files that they provide on the website.
I'm also setup this on WordPress custom theme. I having a hard time trying to figure out how to setup my own custom Jquery.
Custom animation
jQuery(document).ready(function() {
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
Boolean: false,
Number: 10
});
});
Wordpress Slider Image with Advanced Custom Gallery/Checkbox Fields
<?php $images = get_field('image_carousel'); ?>
<?php $activate_carousel_array = get_field( 'activate_carousel' ); ?>
<?php if( $images ): ?>
<?php if ( $activate_carousel_array ):
foreach ( $activate_carousel_array as $activate_carousel_item ):
echo $activate_carousel_item; ?>
<?php
$images = get_field('image_carousel');
if( $images ): ?>
<div id="hero">
<div class="slider owl-carousel owl-theme">
<?php foreach( $images as $image ): ?>
<div><img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endforeach; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<?php endif; ?>
In your code you use
jQuery(document).ready(function() and
$(document).ready(function()
remove one of them.
I have a custom field 'ExtraCSS' which brings in custom post css using the following code. (It is brought in from a 'have_posts()' loop)
html
<?php $extraCSS = get_post_meta(get_the_ID(),'ExtraCSS',true);?><!-- get specific css for post -->
<article>
<div id="post-<?php the_ID(); ?>" class="img-cell" style="background-image:url('<?php echo $thumbnail_url ?>');" <?php post_class('col-md-12'); ?> >
<a class="linkage" href="<?php the_permalink(); ?>"</a>
</div><!-- /#post -->
<div class="text-cell">
<div class="<?php echo $extraCSS?>" >
<h1><?php the_title(); ?></h1>
<h3><?php the_category(', '); ?></h3>
</div>
</div>
</article>
*EDIT
I want to add 1 more custom field ('BG-align') with either values 'BG-align-L' or 'BG-align-R'. I figured I just add another similar line of code under the current one.
ex.
<?php $extraCSS = get_post_meta(get_the_ID(),'ExtraCSS',true);?>
<?php $BGalign = get_post_meta(get_the_ID(),'BGalign',true);?>
but it doesn't work
According to *edit:
'BGalign' have to be defined in post (by "Add New Custom Field"), otherwise it is just empty.
You could set default value (edit "default-value") if not set in post:
<?php
$BGalign = get_post_meta(get_the_ID(),'BGalign',true);
$BGalign = ( !empty($BGalign) ? $BGalign : "default-value" );
?>
Then remember to echo that new php variable. For example:
<div class="<?php echo $extraCSS . " " . $BGalign; ?>" >
. is dot joining variables into one string
" " is empty space for sure that your both classes names will not be connected
My site, dadgab.com (Wordpress) has a 2 column loop with 4 rows.
Header
X X
X X
X X
Footer
I would like to insert adsense javascript into the spot where the 3rd post would be (middle left). After running in circles all week trying to implement this, hoping someone on here can help me.
Here is my loop in index.php:
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('box'); ?>>
<div class="post-image">
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 300, 150, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img width="300" height="150" src="<?php echo $image ?>" alt="<?php the_title() ?>" />
<?php endif; ?>
</div>
I have tried adding various methods including adding the following text to functions.php and adding a blank post, tagged with 'adsense'. This just yields an empty box, though if I actually click on the post the ad will display.
add_filter('the_content', 'replace_adsense_posts_excerpt');
function replace_adsense_posts_excerpt($excerpt)
{
$post = get_post(get_the_ID());
if (has_tag('adsense ', $post)) {
// Replace the content with our adsense code
$excerpt = my_adsense_code();
}
return $excerpt;
}
function my_adsense_code()
{
$adsense = 'ADSENSE CODE';
return $adsense;
}
Simply add a counter to your loop and output the code if the counter equals 3:
<?php $i=0; while ( have_posts() ) : the_post(); $i++;?>
<?php if($i==3):?>
<div <?php post_class('box'); ?>>ADSENSE CODE</div>
<?php endif;?>
<article id="post-<?php the_ID(); ?>" <?php post_class('box'); ?>>
....
You will need to use css to maker sure adsense is the same dimensions as the articles