Custom Loop Image Editing


What would be the best way of editing images that are inside of a custom loop? I already have this filtering over images through index.php, but it's not touching the custom loop:

// Resize post image (filter)
beans_add_smart_action( 'beans_edit_post_image_args', 'index_post_image_args' );
function index_post_image_args($args) {
return array_merge( $args, array(
 'resize' => array( 217, 123, true ),
  'set_quality' => array( 80 )
) );
}

Here's the current custom loop:

// Replace homepage loop
beans_modify_action_callback( 'beans_loop_template', 'homepage_loop');
function homepage_loop(){
    global $post; $articles = new WP_Query( array('posts_per_page' => 8,'category_name' => 'articles') );
    while ($articles -> have_posts()) : $articles -> the_post(); ?>
            <article class="uk-grid">
                <div class="uk-width-large-1-5 uk-margin-small-bottom">
                    <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
                        <?php the_post_thumbnail(); ?>
                    </a>
                </div>
                <figcaption class="uk-width-large-4-5 feat-text">
                    <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><h2 class="uk-margin-bottom-remove"><?php the_title(); ?></h2></a>
                    <a class="excerpt" href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
                        <p class="uk-margin-small-top">
                            <?php the_excerpt(); ?>
                        </p>
                    </a>
                </figcaption>
            </article>
            <?php
    endwhile;
    wp_reset_postdata();?>
                <div class="uk-block">
                    <h2 class="leader">How To's</h2>
                    <?php
    $how_tos = new WP_Query( array('posts_per_page' => 8,'category_name' => 'how-tos') );
    while ($how_tos -> have_posts()) : $how_tos -> the_post(); ?>
                        <article class="uk-grid">
                            <div class="uk-width-large-1-4 uk-margin-small-bottom">
                                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
                                    <?php the_post_thumbnail(); ?>
                                </a>
                            </div>
                            <figcaption class="uk-width-large-3-4 feat-text">
                                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><h2 class="uk-margin-bottom-remove"><?php the_title(); ?></h2></a>
                                <a class="excerpt" href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
                                    <p class="uk-margin-small-top">
                                        <?php the_excerpt(); ?>
                                    </p>
                                </a>
                            </figcaption>
                        </article>
                        <?php
    endwhile;
    wp_reset_postdata(); ?>
                </div>
                <h2 class="leader">Free Downloads</h2>
                <?php
    $free_downloads = new WP_Query( array('posts_per_page' => 8,'category_name' => 'free-downloads') );
    while ($free_downloads -> have_posts()) : $free_downloads -> the_post(); ?>
                    <article class="uk-grid">
                        <div class="uk-width-large-1-3 uk-margin-small-bottom">
                            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail(); ?>
                            </a>
                        </div>
                        <figcaption class="uk-width-large-2-3 feat-text">
                            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><h2 class="uk-margin-bottom-remove"><?php the_title(); ?></h2></a>
                            <a class="excerpt" href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
                                <p class="uk-margin-small-top">
                                    <?php the_excerpt(); ?>
                                </p>
                            </a>
                        </figcaption>
                    </article>
                    <?php
    endwhile;
    wp_reset_postdata();
}

Thanks for making such an incredible theme, Thierry!


Hey Chris,

You may use the Beans Image API with any images as long as you have the url for it. Check this discussion in which we speak about editing an image using the image url.

For post images, Beans as a nice shortcut function beans_edit_post_attachment(). It is similar to beans_edit_image() but instead of passing the image url as the first argument, you pass the post id and it will find and edit the post image for you. Note that beans_edit_post_attachment() returns an array and not only the url 😉

Happy coding,

Write a reply

Login or register to write a reply, it's free!