Tweaking sbe_mail_template_the_post_thumbnail

When the template outputs the post featured image using sbe_mail_template_the_post_thumbnail( 'thumbnail' ); I'd like to be able to use a larger image and apply CSS class, as well as standard HTML width and height attributes.

Is this possible?

  • Michael Bissett
    • Recruit

    Hey @itsnotrocketsurgery! :slight_smile:

    Let's break up your question here:

    I'd like to be able to use a larger image...

    You can change the thumbnail size specified to a different one available on your site (e.g. medium).

    ....and apply CSS class, as well as standard HTML width and height attributes.

    Last I poked through this, you'd be looking to apply the CSS styling directly to the code itself, like what's done on line 10 of the post.php template:

    <div <?php echo sbe_show_featured_image() ? 'style="float:left;width: 394px;"' : ''; ?>>

    You'd be wanting to make your adjustments there. :slight_smile:

    Hope this helps!

    Kind Regards,
    Michael

  • Jude
    • DEV MAN

    Howdy @itsnotrocketsurgery

    Just working alongside @Michael Bissett here, The plugin uses the_post_thumbnail function to generate the image tags.

    https://codex.wordpress.org/Function_Reference/the_post_thumbnail

    The function is called in this location

    wp-content/plugins/subscribe-by-email/inc/mail-templates/views/post.php

    So to sum it up while you can alter the img tag directly I'd suggest you stick to changing the container styles like @Michael Bissett pointed out earlier

    Hope that helps

    Jude

  • itsnotrocketsurgery
    • The Incredible Code Injector

    Hmm, simply changing the size of the featured image using (for example):

    <?php sbe_mail_template_the_post_thumbnail( 'large' ); ?>

    doesn't work. It fetches the correct image size, but won't output it correctly because the plugin has hard coded the_post_thumbnail function as follows in abstract-class-sbe-template.php (line 519):

    the_post_thumbnail( $size, $attr = array( 'style' => 'max-width:150px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);float:left;background:#FFFFFF;border:1px solid #DEDEDE;padding:4px;margin:0 10px 10px 0;' )

    So even a large image appears squashed to the left at 150px, but very long with that styling.

    Can this be overridden without editing the template files?

  • Michael Bissett
    • Recruit

    Hey @itsnotrocketsurgery,

    In your case, we're in luck, as we can override that function with a copy of our own. :slight_smile:

    If you were to insert the following as a mu-plugin:

    function sbe_mail_template_the_post_thumbnail( $size = 'thumbnail' ) {
    		global $post;
    
    		if ( isset( $post->is_dummy ) ) {
    			// This is not a real post
    			?><div style="background:#DEDEDE !important;width:150px;height:100px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);float:left;border:1px solid #DEDEDE;padding:4px;margin:0 10px 10px 0;"></div><?php
    		}
    		else {
    			// A real post
    			the_post_thumbnail( $size, $attr = array( 'style' => 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);float:left;background:#FFFFFF;border:1px solid #DEDEDE;padding:4px;margin:0 10px 10px 0;' ) );
    		}
    	}

    The width property would no longer be set, so it wouldn't be forced to be a width of 150px anymore.

    To create a mu-plugin, go to your /wp-content/ folder via FTP, and find the folder called "mu-plugins". If there is no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like (making sure the file as an extension of .php, e.g. example.php) and paste the code in there.

    You don't need to activate that plugin, as it will be always be automatically activated. Please be sure to add a PHP start tag at the beginning of the code if you insert this code as a mu-plugin, like this:

    <?php

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • itsnotrocketsurgery
    • The Incredible Code Injector

    Brilliant Michael, that's starting to work - thanks! I'll continue to fiddle with the code and perhaps swap the style out for a class and maybe add a new media size for featured images which is the correct size for my emails (rather than relying on thumbnail, medium or large).

    Great advice, thanks for the fix! :smiley:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.