Question 180785 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress thumbnail size change with a class

I’m inserting images like this for a list of posts in wordpress:

<div>
    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail('medium'); ?>
    </a>
</div>

What I want that if has a class ‘full’ it inserts ‘large’ size post thumbnail instead of ‘medium’, like this:

<div class="full">
    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail('large'); ?>
    </a>
</div>

… and for ‘half’, ‘custom_medium_large’:

<div class="half">
    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail('custom_medium_large'); ?>
    </a>
</div>

Both .half and .large classes are applied via jQuery:

$(".home .grid div:first").addClass("full");
$('.home div:not(:first-child):nth-child(8n+2), .home div:not(:first-child):nth-child(8n+3)').addClass('half');

Any idea how do I make sure that container with .half or .full classes have corresponding image sizes than the default ‘medium’?

Tags:

2

Answers


  1. 0

    Open your theme’s functions.php file and Add the following code snippet to define a new thumbnail size:

    function custom_thumbnail_size() {
    add_image_size( 'custom-thumbnail', 300, 200, true ); 
}
add_action( 'after_setup_theme', 'custom_thumbnail_size' );

    To display the custom thumbnail size in a template, you can use the

     <?php if ( has_post_thumbnail() ) : ?>
        <div class="custom-thumbnail-class">
            <?php the_post_thumbnail( 'custom-thumbnail' ); ?>
        </div>
    <?php endif; ?>

    If you want to apply a CSS class to the thumbnail itself, you can do so in your theme’s CSS file.

    .custom-thumbnail-class img {
    /* CSS styles for the custom thumbnail */
    width: 100%;
    height: auto;
    /* Additional styles... */
}
    Login or Signup to reply.
  2. 0

    You’ll need to include image tags for each size, and toggle the display of the image you want based on the absence/presence of the CSS class. This may require some custom coding of the image tags, so that only the image you need is loaded, and not costing the user bandwidth.

    Untested code, but should get you close:

    $images = get_the_post_thumbnail( ‘medium’ );
$images .= get_the_post_thumbnail( ‘large’ );
$images .= get_the_post_thumbnail( ‘custom_medium_large’ );

printf(
    ‘<div class=“container-image”><a href=“%s$1” alt=“%s$2”>%s$3</a></div>’,
    esc_url( get_permalink() ),
    esc_attr( the_title_attribute( array( ‘echo’ => false ) ) ),
    $images
);

    div.container-image img:not( .size-medium ),
div.container-image.full img:not( .size-large ),
div.container-image.half img:not( .size-custom_medium_large ) {
    display: none;
}

    You could also use jQuery to insert the image, with the URLs provided in a JSON object. That’s probably the better, more semantically correct approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search