[Support request] Make images wider than text?

Home Forums Support Make images wider than text?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #317415
    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?

    #317417
    Leo
    Staff
    Customer Support

    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.

    #317452
    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?

    #317456
    Tom
    Lead Developer
    Lead Developer

    Hi Lewis,

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

    #317471
    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.

    #317558
    Leo
    Staff
    Customer Support

    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;
    }
    #317686
    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.

    #317694
    Leo
    Staff
    Customer Support

    Can you provide a link to your site? Thanks!

    #318708
    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?

    #318864
    Leo
    Staff
    Customer Support

    How are you inserting those images? With a plugin?

    #318894
    Tom
    Lead Developer
    Lead Developer

    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.

    #318982
    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.

    #319046
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #319085
    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?

    #319166
    Tom
    Lead Developer
    Lead Developer

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.