[change thumbnail cropping size] Multi-Size Masonry 4/3 full-width

[Spred]

Hi,

I’m using the “Multi-Size Masonry 4/3 full-width” for my portfolio and would like to display the portfolio thumbnails as square images. Currently, it’s cropping my square images as the 4/3 full-width displays the thumbnails in a rectangular format

Is there a way to solve this?

Thanks,
Justin

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your child theme’s functions.php file:

/* 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 = 480;
                $gallery_size = 'thumb-image';
            } else {
                $thumb_width  = 970;
                $thumb_height = null;
                $video_height = 970;
                $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;
        }
    }

– Kyle

[Spred]

Hey Kyle,

I’ve tried adding this to the functions.php, however, the appearance remains unchanged. link

Attachments:

You must be logged in to view attached files.

[Spred]

let me know if there’s a way I can change it 🙂

[Kyle – SUPPORT]

Sorry that function is not needed.

If you want to use square thumbnails then use Multi Masonry 1/1 instead of 4/3

– Kyle