1

I am using a repeater field from Advanced Custom Fields to create multiple photo galleries. There are 4 pages and each page has multiple image galleries. Because of this, I want to reduce load by using a single external PHP file to generate the content and AJAX to only load one gallery at a time.

I am not quite sure how to accomplish this, because since the ACF fields are being defined in an external file, it doesn't know what page to grab the fields from.

Here is my JavaScript so far:

var passObject = {};

    $.ajax({
        url:"<?php bloginfo('template_directory'); ?>/inc/galleries.php",
        type: 'POST',
        data: passObject,
        success: function(resp) {

            $('#photos').append(resp);

        }
    });

And here is the content of galleries.php:

<div class="photos">
    <h1>Photo Gallery</h1>
    <?php if( have_rows('gallery') ): ?>

        <?php while( have_rows('gallery') ): the_row(); 

        // vars
        $photo = get_sub_field('photos');

        ?>
            <div class="image"><img src="<?php echo $photo['sizes']['gallery-thumb']; ?>" alt="<?php echo $photo['alt']; ?>" /></div>
        <?php endwhile; ?>

    <?php endif; ?>
</div>
|improve this question

closed as off-topic by Pieter Goosen, gmazzap♦, fuxia♦ Jul 29 '14 at 22:56

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    If you are using ajax the wordpress way, you can pass the post ID via ajax and then use it with have_rows('field_name', 'post_id'); – gdaniel Jul 29 '14 at 16:52
  • Thanks for the tip! Got it working based off your recommendation. – APAD1 Jul 29 '14 at 17:21
3

Here is what I ended up doing based on @gdaniel's suggestion:

AJAX call:

$('.btn').click(function() {
    $.ajax({
        url:"<?php bloginfo('template_directory'); ?>/inc/galleries.php",
        type: 'POST',
        data: {postID: '<?=$post->ID;?>', galleryCategory: $(this).attr("data-content")},
        success: function(resp) {
            $('#photos').append(resp);

        }
    });
});

And here is my PHP file:

<?php 
require('../../../../wp-load.php');
$postid = $_POST['postID'];
$galcat = $_POST['galleryCategory'];
?>
<div class="photos" id="$galcat">
    <h1><?php echo $galcat; ?> Photos</h1>
    <?php if( have_rows($galcat,$postid) ): ?>
        <?php while( have_rows($galcat,$postid) ): the_row(); 

        // vars
        $photo = get_sub_field('photos');

        ?>
            <div class="image"><img src="<?php echo $photo['sizes']['gallery-thumb']; ?>" alt="<?php echo $photo['alt']; ?>" /></div>
        <?php endwhile; ?>

    <?php endif; ?>
</div>
|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.