Question re recent posts standard row thumbs

[NiO]

Hi Swiftideas,

Is there a way to change the thumbnails used in the recent post standard row option from the current 4×3 cropped thumb to something else?

The masonry blog respects the original image aspects ratio, however the recent posts element does not. Should I edit functions.php in a child theme for this?

Ideally I would like justified thumbs, where the height is fixed and width is adapted depending on the underlying image ratio.

Thanks,
Johan

[Kyle – SUPPORT]

Hi

Go to wp-content/plugins/swift-framework/includes/page-builder/shortcodes/recent-posts.php and from line 94 you will see the image sizes used for the columns. You can edit the values there

– Kyle

[NiO]

Hi Kyle,

I had a look. I am using the standard row, which gives me thumbs of 360 wide by 270 high regardless of the orientation of the original image. Looking at the code, I would expect that this applies:

$image_width = 270;
$image_height = 270;

right? Now the question is where the 360 comes from 🙂

It is strange to see by the way that the recent-posts element is not serving a retina image. Please see screenshot. I am on a retina screen …

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

It comes from this part:

else if ( $item_columns == "3" ) {
                $image_width  = 360;
                $image_height = 360;
                $item_class   = 'col-sm-4';
            }

– Kyle

[NiO]

Hmmm, are we looking at the right thing?

The thumb size I see on my retina screen are 375 by 281. The underlying natural images used are:

720 by 540 if the underlying image is portrait oriented
360 by 270 if the underlying image is landscape oriented

This doesn’t seem very logical, does it? In addition, the latter one obviously looks crap on retina since it is being stretched by the element!

Thanks,
Johan

[Kyle – SUPPORT]

You are referring to the recent posts asset, correct?

– Kyle

[NiO]

Yes, you can see how it looks at the bottom of nio.photography …

[Kyle – SUPPORT]

Ok for this you will need to be using a child theme. In the child theme’s functions.php file add this code:

/* POST THUMBNAIL
    ================================================== */
    if ( ! function_exists( 'sf_post_thumbnail' ) ) {
        function sf_post_thumbnail( $blog_type = "", $fullwidth = "no" ) {

            global $post, $sf_sidebar_config;

            $thumb_width = $thumb_height = $video_height = $gallery_size = $item_figure = '';

            if ( $blog_type == "mini" ) {
                if ( $sf_sidebar_config == "no-sidebars" ) {
                    $thumb_width  = 446;
                    $thumb_height = null;
                    $video_height = 335;
                } else {
                    $thumb_width  = 370;
                    $thumb_height = null;
                    $video_height = 260;
                }
                $gallery_size = 'thumb-image';
            } else if ( $blog_type == "masonry" ) {
                if ( $sf_sidebar_config == "both-sidebars" || $fullwidth == "yes" ) {
                    $item_class = "col-sm-3";
                } else {
                    $item_class = "col-sm-4";
                }
                $thumb_width  = 480;
                $thumb_height = null;
                $video_height = 360;
                $gallery_size = 'thumb-image';
            } else {
                $thumb_width  = 970;
                $thumb_height = null;
                $video_height = 728;
                $gallery_size = 'blog-image';
            }

            $thumb_type               = sf_get_post_meta( $post->ID, 'sf_thumbnail_type', true );
            $thumb_image              = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=full' );
            $thumb_video              = sf_get_post_meta( $post->ID, 'sf_thumbnail_video_url', true );
            $thumb_gallery            = rwmb_meta( 'sf_thumbnail_gallery', 'type=image&size=' . $gallery_size );
            $thumb_link_type          = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_type', true );
            $thumb_link_url           = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_url', true );
            $thumb_lightbox_thumb     = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=large' );
            $thumb_lightbox_image     = rwmb_meta( 'sf_thumbnail_link_image', 'type=image&size=large' );
            $thumb_lightbox_video_url = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_video_url', true );
            $thumb_lightbox_video_url = sf_get_embed_src( $thumb_lightbox_video_url );
            $image_id                 = 0;
            $item_link                = sf_post_item_link();

            foreach ( $thumb_image as $detail_image ) {
                $image_id      = $detail_image['ID'];
                $thumb_img_url = $detail_image['url'];
                break;
            }

            if ( ! $thumb_image ) {
                $thumb_image   = get_post_thumbnail_id();
                $image_id      = $thumb_image;
                $thumb_img_url = wp_get_attachment_url( $thumb_image, 'full' );
            }

            if ( $thumb_type == "" ) {
            	$thumb_type = "none";
            }

            $item_figure .= '<figure class="animated-overlay overlay-style thumb-media-' . $thumb_type . '">';

            if ( $thumb_type == "video" ) {

                $video = sf_video_embed( $thumb_video, $thumb_width, $video_height );

                $item_figure .= $video;

            } else if ( $thumb_type == "audio" ) {

                $image        = sf_aq_resize( $thumb_img_url, $thumb_width, $thumb_height, true, false );
                $thumbnail_id = get_post_thumbnail_id( $post->ID );
                $image_alt    = sf_get_post_meta( $image_id, '_wp_attachment_image_alt', true );

                if ( $image ) {
                    $item_figure .= '<img itemprop="image" src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $image_alt . '" />';
                }

                $item_figure .= sf_audio_post( $post->ID, true );

            } else if ( $thumb_type == "sh-video" ) {

                $item_figure .= sf_sh_video_post( $post->ID, $thumb_width, $video_height, true );

            } else if ( $thumb_type == "slider" ) {

                $item_figure .= '<div class="flexslider thumb-slider"><ul class="slides">';

                foreach ( $thumb_gallery as $image ) {
                    $item_figure .= "<li><a " . $item_link['config'] . "><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$image['alt']}' /></a></li>";
                }

                $item_figure .= '</ul></div>';

            } else {

                $thumb_img_url = apply_filters( 'sf_post_thumb_image_url', $thumb_img_url );

                if ( $thumb_type == "image" && $thumb_img_url == "" ) {
                    $thumb_img_url = "default";
                }

                $image        = sf_aq_resize( $thumb_img_url, $thumb_width, $thumb_height, true, false );
                $thumbnail_id = get_post_thumbnail_id( $post->ID );
                $image_alt    = sf_get_post_meta( $image_id, '_wp_attachment_image_alt', true );

                if ( $thumb_img_url != "" ) {
                    if ( $image ) {
                        $item_figure .= '<img itemprop="image" src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $image_alt . '" />';
                    } else {
                        //$item_figure .= '<img itemprop="image" src="'.$thumb_img_url.'" alt="'.$image_alt.'" />';
                    }
                    $item_figure .= '<a ' . $item_link['config'] . '></a>';
                    $item_figure .= '<div class="figcaption-wrap"></div>';
                    $item_figure .= '<figcaption><div class="thumb-info thumb-info-alt">';
                    $item_figure .= '<i class="' . $item_link['icon'] . '"></i>';
                    $item_figure .= '</div></figcaption>';
                }
            }

            $item_figure .= '</figure>';

            return $item_figure;
        }
    }

As you can see the image sizes are set here, you can edit those values

– Kyle

[NiO]

Hi Kyle,

You are a fast programmer 😉

So what does this allow me to do? And does it solve the issue that the natural image the asset uses is too small?

Thanks,
Johan

[Kyle – SUPPORT]

That’s the code that is currently being used, you need to edit the values at the top to change the width and height of your images to suit your needs

– Kyle

[NiO]

Hi Kyle,

I am getting the feeling that you are missing my point, so let me try to explain (hopefully) more clearly … 🙂

What I am trying to say is that the cropping mechanism of the asset is wrong/wonky!

Do you agree that the base image used to create the thumb should always be double the size? If so, why is it using a 360 by 270 base image to create a 375 by 281 thumb?

Thanks, Johan

[Kyle – SUPPORT]

Sorry again, wrong code

Remove the previous code and use this:

/* GET RECENT POST ITEM
    ================================================== */
    if ( ! function_exists( 'sf_get_recent_post_item' ) ) {
        function sf_get_recent_post_item( $post, $display_type = "bold", $excerpt_length = 20, $item_class = "" ) {

            $recent_post   = $recent_post_figure = $link_config = $item_icon = "";
            $thumb_type    = sf_get_post_meta( $post->ID, 'sf_thumbnail_type', true );
            $thumb_image   = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=full' );
            $thumb_video   = sf_get_post_meta( $post->ID, 'sf_thumbnail_video_url', true );
            $thumb_gallery = rwmb_meta( 'sf_thumbnail_gallery', 'type=image&size=thumb-image' );

            foreach ( $thumb_image as $detail_image ) {
                $thumb_img_url = $detail_image['url'];
                break;
            }

            if ( ! $thumb_image ) {
                $thumb_image   = get_post_thumbnail_id();
                $thumb_img_url = wp_get_attachment_url( $thumb_image, 'full' );
            }

            // POST META
            global $sf_options;
            $single_author = $sf_options['single_author'];
            $remove_dates  = $sf_options['remove_dates'];
            $post_links_match_thumb = false;
            if ( isset( $sf_options['post_links_match_thumb'] ) ) {
            	$post_links_match_thumb = $sf_options['post_links_match_thumb'];	
            }

            $post_author    = get_the_author_link();
            $post_date      = get_the_date();
            $post_date_str  = get_the_date('Y-m-d');
            $item_title     = get_the_title();
            $post_permalink = get_permalink();
            $post_comments  = get_comments_number();
            $custom_excerpt = sf_get_post_meta( $post->ID, 'sf_custom_excerpt', true );
            $post_excerpt   = '';
            if ( $custom_excerpt != '' ) {
                $post_excerpt = sf_custom_excerpt( $custom_excerpt, $excerpt_length );
            } else {
                $post_excerpt = sf_excerpt( $excerpt_length );
            }
            $post_permalink_config = 'href="' . $post_permalink . '" class="link-to-post"';
            if ( $post_links_match_thumb ) {
            	$link_config = sf_post_item_link();
            	$post_permalink_config = $link_config['config'];
            }

            $thumb_width = 360;
            $thumb_height = apply_filters('sf_recent_post_item_thumb_height', 270);

            // MEDIA CONFIG
            $thumb_link_type          = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_type', true );
            $thumb_link_url           = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_url', true );
            $thumb_lightbox_thumb     = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=large' );
            $thumb_lightbox_image     = rwmb_meta( 'sf_thumbnail_link_image', 'type=image&size=large' );
            $thumb_lightbox_video_url = sf_get_post_meta( $post->ID, 'sf_thumbnail_link_video_url', true );
            $thumb_lightbox_video_url = sf_get_embed_src( $thumb_lightbox_video_url );
            $thumb_lightbox_img_url   = wp_get_attachment_url( $thumb_lightbox_image, 'full' );

            // LINK CONFIG
            if ( $thumb_link_type == "link_to_url" ) {
                $link_config = 'href="' . $thumb_link_url . '" class="link-to-url"';
                $item_icon   = apply_filters( 'sf_post_link_icon', "ss-link" );
            } else if ( $thumb_link_type == "link_to_url_nw" ) {
                $link_config = 'href="' . $thumb_link_url . '" class="link-to-url" target="_blank"';
                $item_icon   = apply_filters( 'sf_post_link_icon', "ss-link" );
            } else if ( $thumb_link_type == "lightbox_thumb" ) {
            	$lightbox_id = rand();
                $link_config = 'href="' . $thumb_img_url . '" class="lightbox" data-rel="ilightbox['.$lightbox_id.']"';
                $item_icon   = apply_filters( 'sf_post_lightbox_icon', "ss-view" );
            } else if ( $thumb_link_type == "lightbox_image" ) {
                $lightbox_image_url = '';
                foreach ( $thumb_lightbox_image as $image ) {
                    $lightbox_image_url = $image['full_url'];
                }
                $lightbox_id = rand();
                $link_config = 'href="' . $lightbox_image_url . '" class="lightbox" data-rel="ilightbox['.$lightbox_id.']"';
                $item_icon   = apply_filters( 'sf_post_lightbox_icon', "ss-view" );
            } else if ( $thumb_link_type == "lightbox_video" ) {
                $link_config = 'data-video="' . $thumb_lightbox_video_url . '" href="#" class="fw-video-link"';
                $item_icon   = apply_filters( 'sf_post_video_icon', "ss-video" );
            } else {
                $link_config = 'href="' . $post_permalink . '" class="link-to-post"';
                $item_icon   = apply_filters( 'sf_post_standard_icon', "ss-navigateright" );
            }

            if ( $thumb_type == "none" ) {
                $recent_post .= '<div itemscope class="recent-post no-thumb ' . $item_class . ' clearfix">';
            } else {
                $recent_post .= '<div itemscope class="recent-post has-thumb ' . $item_class . ' clearfix">';
            }

			$recent_post_figure .= '<div class="figure-wrap">';

            $recent_post_figure .= apply_filters( 'sf_before_recent_post_thumb' , '');

            $recent_post_figure .= '<figure class="animated-overlay overlay-alt">';

            if ( $thumb_type == "video" ) {

                $video = sf_video_embed( $thumb_video, 400, 225 );
                $recent_post_figure .= '<div class="video-thumb">' . $video . '</div>';

            } else if ( $thumb_type == "slider" ) {

                $recent_post_figure .= '<div class="flexslider thumb-slider"><ul class="slides">';

                foreach ( $thumb_gallery as $image ) {
                    $alt = $image['alt'];
                    if ( ! $alt ) {
                        $alt = $image['title'];
                    }
                    $recent_post_figure .= "<li><a " . $link_config . "><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$alt}' /></a></li>";
                }

                $recent_post_figure .= '</ul></div>';

            } else {

                if ( $thumb_img_url == "" && $thumb_type != "none" ) {
                    $thumb_img_url = "default";
                }

                $image = sf_aq_resize( $thumb_img_url, $thumb_width, $thumb_height, true, false );

                if ( $image ) {
                    $recent_post_figure .= '<img itemprop="image" src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $item_title . '" />';
                    $recent_post_figure .= '<a ' . $link_config . '></a>';
                    $recent_post_figure .= '<div class="figcaption-wrap"></div>';
                    $recent_post_figure .= '<figcaption><div class="thumb-info thumb-info-alt">';
                    $recent_post_figure .= '<i class="' . $item_icon . '"></i>';
                    $recent_post_figure .= '</div></figcaption>';
                }
            }

            $recent_post_figure .= '</figure>';

            $recent_post_figure .= '</div>';

            if ( $display_type == "bold" ) {

                $recent_post .= $recent_post_figure;
                $recent_post .= '<div class="details-wrap">';
                if ( $thumb_type == "none" ) {
                    $recent_post .= '<h2><a ' . $post_permalink_config . '>' . $item_title . '</a></h2>';
                } else {
                    $recent_post .= '<h3><a ' . $post_permalink_config . '>' . $item_title . '</a></h3>';
                }
                $recent_post .= sf_get_post_details($post->ID, true);
                $recent_post .= '</div>';

            } else if ( $display_type == "list" ) {

                $recent_post .= '<a class="list-post-link" href="' . $post_permalink . '"></a>';
                if ( $image ) {
                    $recent_post_figure .= '<figure class="animated-overlay">';
                    $recent_post_figure .= '<img itemprop="image" src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $item_title . '" />';
                    $recent_post_figure .= '<a ' . $link_config . '></a>';
                    $recent_post_figure .= '<div class="figcaption-wrap"></div>';
                    $recent_post_figure .= '<figcaption><div class="thumb-info thumb-info-alt">';
                    $recent_post_figure .= '<i class="' . $item_icon . '"></i>';
                    $recent_post_figure .= '</div></figcaption>';
                    $recent_post_figure .= '</figure>';
                }
                $recent_post .= '<div class="details-wrap">';
                $recent_post .= '<h4>' . $item_title . '</h4>';
                $recent_post .= '<div class="post-item-details">';
                $recent_post .= '<span class="post-date">' . $post_date . '</span>';
                $recent_post .= '</div>';
                $recent_post .= '</div>';

            } else if ( $display_type == "bright" ) {

                $recent_post .= '<div class="details-wrap">';
                $recent_post .= '<div class="author-avatar">' . get_avatar( get_the_author_meta( 'ID' ), '140' ) . '</div>';
                $recent_post .= '<h6 class="post-item-author"><span class="author">' . sprintf( '<a href="%2$s" rel="author" itemprop="author">%1$s</a>', $post_author, get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '</span></h6>';
                $recent_post .= '<h2><a ' . $post_permalink_config . '>' . $item_title . '</a></h2>';
                $recent_post .= '<div class="post-item-details">';
                $recent_post .= '<span class="post-date">' . $post_date . '</span>';
                $recent_post .= '</div>';
                $recent_post .= '</div>';

			} else if ( $display_type == "bold" ) {

                $recent_post .= $recent_post_figure;
                $recent_post .= '<div class="details-wrap">';
                if ( $thumb_type == "none" ) {
                    $recent_post .= '<h2><a ' . $post_permalink_config . '>' . $item_title . '</a></h2>';
                } else {
                    $recent_post .= '<h3><a ' . $post_permalink_config . '>' . $item_title . '</a></h3>';
                }
                $recent_post = sf_get_post_details($post->ID, true);
                $recent_post .= '</div>';

            } else {

                $recent_post .= $recent_post_figure;
                $recent_post .= '<div class="details-wrap">';
                $recent_post .= '<h5><a ' . $post_permalink_config . '>' . $item_title . '</a></h5>';
                $recent_post .= sf_get_post_details($post->ID, true);
                if ( $excerpt_length != "0" && $excerpt_length != "" ) {
                    $recent_post .= '<div class="excerpt">' . $post_excerpt . '</div>';
                }

                if ( sf_theme_opts_name() == "sf_atelier_options" && $display_type == "standard-row" ) {
                	$recent_post .= '<a class="read-more-button" href="' . get_permalink() . '">' . __( "Read more", "swiftframework" ) . '</a>';
                }

                $recent_post .= '</div>';

            }

            $recent_post .= '</div>';

            return $recent_post;
        }
    }

The part you’ll need to change is this:

            $thumb_width = 360;
            $thumb_height = apply_filters('sf_recent_post_item_thumb_height', 270);

If you want to use 2 times bigger images that’s fine, we used 360×270 to reduce load time

– Kyle

[NiO]

Hi Kyle,

“If you want to use 2 times bigger images that’s fine, we used 360×270 to reduce load time” => not correct! For image 1, 2 and 3 you use 720 by 540 to create a 375 by 281 thumb and only for image 4 you use 360 by 270 to create the same size (inferior) thumb. And that is why I think the cropping mechanism is not working as it should!

Cheers,
Johan

[Kyle – SUPPORT]

Where did we use 720 x 540 for recent posts?

– Kyle

[NiO]

Hi Kyle,

In that same recent post slider I pointed you to earlier. It displays all images at 375 by 281, however if you then use inspector you will find that the natural size of the base image used for the first three is 720 x 540 (as expected on retina) and for the 4th one the natural size of the base image used 360 by 270 (not good on retina).

Sorry for being a pain in the ass 🙂 … but I really think this is not logical. It should use a base image size of 720 by 540 for all four on retina screens (as per your own documentation).

Cheers,
johan