Upfront Custom thumbnails size

Using the Upfront Builder in a custom theme, I'm trying to add additional thumb size to the post element's default thumbnail size option.

Is there any way I can achieve this?

  • James Morris

    Hello Mtwo

    I hope you are well today.

    In the following tutorial you will find instructions on how to set this up. https://wpshout.com/wordpress-custom-image-sizes/

    To add to that, I recommend taking the following code and adding it to a Must-Use Plugin (wp-content/mu-plugins/) so that it's theme agnostic... meaning your thumbnail sizes are portable across all themes.

    <?php
    // Make sure featured images are enabled
    add_theme_support( 'post-thumbnails' );
    
    // Add featured image sizes
    add_image_size( 'featured-large', 640, 294, true ); // width, height, crop
    add_image_size( 'featured-small', 320, 147, true );
    
    // Add other useful image sizes for use through Add Media modal
    add_image_size( 'medium-width', 480 );
    add_image_size( 'medium-height', 9999, 480 );
    add_image_size( 'medium-something', 480, 480 );
    
    // Register the three useful image sizes for use in Add Media modal
    add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
    function wpshout_custom_sizes( $sizes ) {
        return array_merge( $sizes, array(
            'medium-width' => __( 'Medium Width' ),
            'medium-height' => __( 'Medium Height' ),
            'medium-something' => __( 'Medium Something' ),
        ) );
    }

    In the following screenshot, you will see this works quite well with Upfront Builder. :slight_smile:

    http://storage5.static.itmages.com/i/18/0407/h_1523090723_6487364_95eeb343b0.png

    Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • Mtwo

    James,
    Thanks for the quick reply. I have tried this, but the thumbnail sizes are not showing up in the Post Part settings of a 'Post' object?

    How to I add one of my already defined Media Settings > Image sizes to the select-able Thumbnail Size available within the General Settings of a Post object? I understand that I can select the Custom option and define a custom width and height, but does not crop to the exact size. So, when I place multiple "Posts", either multiple single posts or a post list, images with different aspect ratios appear taller or shorter than the images next to them.
    You can look to the section beneath the "Featured Article" and "Featured Video" blocks on the home page of the dev site, for the site with active WPMU support access for a visual. You should notice how the image of "Thought Leadership" is different than the rest. Is there a way to define an available Media Image Size for use in the referenced drop-down? I recall adding a line of code to the themes settings.php to add an additional font, Arial, to the select-able font options. Can we do something similar to add a defined image size? In this case, tiw-300-cropped....

  • James Morris

    Hello Mtwo

    Since you're able to define your own custom size in this section, I don't believe this will be possible out of the box.

    See screenshot: http://storage1.static.itmages.com/i/18/0408/h_1523178534_4140804_22320d2ed4.png

    However, I've pinged our Upfront Team to see if there's a bit of code that could make this possible. Thank you for your patience while we look into this.

    Best regards,

    James Morris

  • Mtwo

    Hello, I hope you are doing well.

    I was wondering if there was a simple solution for this and that there is another problem. When I edit the HTML for 'Featured Image' of the 'Post Part Settings' for the 'posts' draggable object, the 'Insert Shortcode' popup never loads. Within this editable HTML area, there is a {{style}} shortcode for {{thumbnail}}. Can this be changed to something else that would reference my already defined image sizes? i.e. {{thumbnail-tiw-300c}}

    Or is there another way to use the following within this area?
    the_post_thumbnail( 'thumbnail-tiw-300c' );

  • James Morris

    When I edit the HTML for 'Featured Image' of the 'Post Part Settings' for the 'posts' draggable

    Are you referring to the Post Content Post Data section...
    http://storage4.static.itmages.com/i/18/0410/h_1523333565_8102454_85ca8f12ea.png

    or the Featured Image Post Data section?
    http://storage5.static.itmages.com/i/18/0410/h_1523333683_1889655_0c93bda4c5.png

    Within this editable HTML area, there is a {{style}} shortcode for {{thumbnail}}. Can this be changed to something else that would reference my already defined image sizes? i.e. {{thumbnail-tiw-300c}}

    Or is there another way to use the following within this area?
    the_post_thumbnail( 'thumbnail-tiw-300c' );

    Unfortunately, no, this is not possible. I also spoke with the Lead Dev on this project and he said that it's not possible to do pre-defined sizes in the Post Part settings of a 'Post' object. Upfront is intended to use its own custom sizes using the resizing feature.

    I'm terribly sorry, but to add this functionality would require significant custom changes to the core plugin files and is not planned for inclusion at this time.

    Best regards,

    James Morris

    • Mtwo

      James,
      Thanks for getting back to me in regards to this issue, I appreciate your assistance. In regards to your first question, I was referring to Featured Image Post Data section. However, for these objects I could use either and simply want to use an image at a specific size. The 'Insert shortcode' option does not work in either section. I even tried it on my local server with all other plugins disabled. So either there is some residual code causing it to break, or configuration or a setting is incorrect. Your advise on this issue may be helpful. When I click the 'Insert shortcode' trigger, I receive the darkened overlay and a single line box with "Please, wait"...

      So, instead of attempting to use pre-defined sizes in the Post Part settings of a 'Post' object, maybe we can further extend the capabilities of the resizing feature. The missing functionality is simply the crop setting. I wouldn't need to use a pre-defined size if I could crop to a specific. In this example, and since we are using 4 of these objects next to each other, each of these images need to be the same size. You can see how the image of "Thought Leadership" is a few pixels taller than the rest, as the original image has a different aspect ratio. Is there a way to incorporate crop settings into the custom resizing feature?

      Otherwise, would you have any suggestion as to how we can accomplish what we are looking for?
      Please let me know, thanks.
      Michael

  • James Morris

    Hello Mtwo

    The 'Insert shortcode' option does not work in either section. I even tried it on my local server with all other plugins disabled. So either there is some residual code causing it to break, or configuration or a setting is incorrect.

    This looks very much like a conflict with revslider. When you click the link to get the shortcode dialog, the following errors are generated in Chrome DevTools JS console.

    Otherwise, would you have any suggestion as to how we can accomplish what we are looking for?

    Actually, adding this tiny bit of CSS to your preset for the element works great for this.

    .uposts-object li .thumbnail {max-height: 186.66px;}

    You may need to tweak this a tiny bit to fit your needs, but my tests show it works well. Would this work for you in this situation?

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.