[Support request] Make images wider than text?

[Lewis]

Hello,

Is there a way to make my images slightly wider than the text in my articles?

Here’s a zoomed out example:

Thanks,
Lewis.

EDIT: Tom, I just found your reply here (https://wordpress.org/support/topic/images-wider-than-the-text/). It’s a little complicated than I would have hoped. Is there an easier way to do it nowadays?

[Leo]

Hi Lewis,

That solution is actually pretty simple already. Just some copying and pasting.

So copy this:

add_action( 'after_setup_theme','tu_move_single_featured_image' );
function tu_move_single_featured_image() {
    remove_action('generate_before_content','generate_featured_page_header_inside_single', 10);
    add_action('generate_after_header','generate_featured_page_header_inside_single', 10);
}

and paste it in Code Snippets and click save and activate: https://docs.generatepress.com/article/adding-php/#code-snippets

Then copy this and edit the px number as you see fit:

.page-header-image-single {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Using one of the first two methods here: https://docs.generatepress.com/article/adding-css/

Let me know if this makes sense.

[Lewis]

Hey Leo,

Thanks for the quick reply.

I tried to activate the snippet but it says:

The snippet has been deactivated due to an error on line 2:
syntax error, unexpected ‘{‘, expecting ‘(‘

I did try changing the syntax as suggested, but it didn’t work. Any ideas?

[Tom]

Hi Lewis,

I just updated Leo’s code – can you try again?

[Lewis]

Thanks Tom,

So it’s now activated but doesn’t seem to be doing anything for me.

To recap:

– I created and activated a snippet using the revised code
– I saved the CSS in the ‘additional CSS’ section under Appearance > Customizer
– I applied the CSS class ‘page-header-image-single’ to an image

Nothing happens. The image size is unaffected by it.

Am I missing something?

I notice in the code, it’s referring to “featured image”. Just to clarify, I’m trying to use this within my articles, not on the featured image or anywhere in the header.

[Leo]

Ahh yeah that’s for featured image indeed.

I guess you could try this CSS for images in content:

.entry-content img {
    max-width: 1600px;
}

[Lewis]

Hi Leo,

I’ve added your CSS. I don’t know what I’m supposed to do beyond that but it’s not working.

[Leo]

Can you provide a link to your site? Thanks!

[Lewis]

Sure, here’s the page I’m experimenting with:

https://www.thefreelanceeffect.com/free-project-management-apps/

Specifically, I’m trying to give the images some overhang, and even the table if possible.

I’ve followed all the steps you’ve outlined so far. Really not sure what I’m doing wrong. I assume I need to apply some kind of class to these elements first?

[Leo]

How are you inserting those images? With a plugin?

[Tom]

It’s not typically possible to make an image stretch outside a container. The fact that the blocks of content you have also have fixed widths (I’m assuming from the shortcode plugin) doesn’t help either. It might be possible without those fixed widths, but I’m not 100% sure.

The best way to do it would be to wrap your text areas in a div and give them a smaller width. This way the image is still inside the container, but the text areas are just smaller.

[Lewis]

I’m using Thrive Content Builder, though I didn’t define any fixed widths (that I know of).

Tom, I can see how that would work but it just doesn’t feel right. Besides, it would apply to ALL my posts which is not ideal. I’m convinced there’s a better way.

Zapier do this to some images in the middle of their content, perhaps this will offer a clue?

https://zapier.com/blog/zapier-guide-facebook-lead-ads/

I realise this is probably outside the scope of your support, so I really do appreciate it.

[Tom]

They basically did this:

@media (min-width: 1040px) {
    .tve_image_caption {
        width: 1000px !important;
        position: relative;
        left: -170px;
        max-width: initial !important;
    }

    img.tve_image {
        width: auto !important;
    }
}

[Lewis]

Awesome.

So, I added this CSS:

.wider-element {
width: 850px !important;
position: relative;
left: -90px;
max-width: initial !important;
}
img.tve_image {
width: auto !important;
}

And I applied the ‘wider-element’ class to several different elements with success. It works great, so thank you.

Is this a good solution in your opinion?

[Tom]

As long as you place it in that same media query it should be fine 🙂

[Author]

Posts