Fill image as “contain”, not “cover”

Hi vatlouum, I see 3 questions here, hopefully I understand them all correctly;

1. Fill the image as contain and not cover
2. Align logo without the offset from the image edge
3. Add additional overlays.

As for the first; this would introduce the problem the image might not be the correct size, or at least miss pixels where they are needed. You could do this with some GD coding, but you can also create an image in something like photoshop that has transparent pixels around your image to make it fit in 1200×630 while looking as if contained.

If you choose the GD route, you can add it as an additional layer with some coding, read on;

You can completely bypass the logo set-up (by not setting a logo) and instead add a custom layer you would need to create yourself with external means.

Then you can add them as custom layers.

For all your questions at once;

• set the image to a transparent one 1200×630
• add a custom layer for the image you prepare yourself using GD that is the image you want, contained instead of cover. (or use a prepared image instead, as indicated above)
• add a custom layer for your logo using the same technique
• add a second logo (or third, or …) as an additional layer

Here’s how I have done so in the past (it was 2 years ago, but it should still work);

<?php
/**
 * @file mu-plugin bsi-layer.php
 */

/**
 * Add layer to the rendered image
 */
add_action('bsi_image_gd', function(&$gd, $action) {
	if ($action == 'after_adding_background') {
		$overlay = imagecreatefromstring(file_get_contents(__DIR__ .'/extralayer.png'));
		imagecopyresampled($gd, $overlay, 0, 0, 0, 0, imagesx($gd), imagesy($gd), imagesx($overlay), imagesy($overlay));
	}
}, 11, 2);

/**
 * Add layer to the editor so the admin can see what to expect
 */
add_action('bsi_image_editor', function($action) {
	if ($action == 'after_adding_background') {
		$image = plugins_url( 'extralayer.png', __FILE__ );
		?>
		<div class="area--extra-layer">
			<div class="background" style="background-image:url('<?php print esc_attr($image); ?>')"></div>
		</div>
		<?php
	}
}, 11, 2);

Remon, hi again! so I set transparent thumbnail, created mu-plugin and paste your code, not sure how it suppose to work, sorry, I’m a frontender…

Let me explain my case specifically — it’s woocommerce store, almost all images square 400×400 with white background.

So I wonder if I can place that 400×400 image as it is on the right side of 1200×630 og image with text.

If you please be kind to explain me more detailed where should I place your code I’d be greatfull.