[Resolved] is it possible to pin the featured image to the bottom left of the page

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

Can you show us a mockup?

Having a hard time imagining what it would look like.

If you just want to change the position of the featured image, you can disable the featured image for single post at customizer > layout > blog.

Then add a block element using thebefore_footer hook, add a GB image block, enable its dynamic data option, and set it to the featured image.

Hi there,

can i just clarify:

1. The image will be fixed to the viewport – so it will not scroll out of view?
2. The content beside the image, will that be scrollable ? – i assume Yes, if Yes to #1
3. And this would be for ALL pages?
4. And what happens to it on mobile ?

Ok, so simple solution would be to:

1. Create a Block Element – Hook.
2. Set the Hook to before_footer
3. Add a GB Image Block and enable its Dynamic Data and set the source to Current Post and the Content to Featured Image.
4. Set the Display Rules to where you require it.

The block will only output the Image if one exists.

It may require some tweaking but if you want to start there.

let me know.

Like this:

<?php
if ( has_post_thumbnail() ){
	global $post;
	echo get_the_post_thumbnail($post->ID, 'post-thumbnail', array( 'class' => 'footer-featured-image attachment-post-thumbnail size-post-thumbnail' ) );
}
?>

The post-thumbnail will output the standard src-set sizes, you can change that if you want specific attachment.
And i added a custom class to the class array of: footer-featured-image which you can use for styling if needed.

For ref:
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

You’re welcome – let us know if you need assistance with positioning 🙂

Try this CSS:

body > a[title^='Lewiston Auburn Senior College'] {
    z-index: 1;
    position: relative;
}

body > .site {
    z-index: 2;
    position: relative;
}