Different Width for Images/Media Versus Text

Hi there,

I believe this is what you are looking to do:
https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-728743

Let me know :)

To answer your reply: https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-735070

I'm not aware of a method that will do this automatically unfortunately. Are you reading somewhere that it's possible?

No, I don't think it is from my reading using CSS to make this change without coding the text itself as you pointed out. Apparently, I would have to get someone to write Javascript.

Hi there,

tricky one if we're talking about only the images that you want wider in the content. Problem is they are wrapped in p tags. All experimental but this may be a steer in a 'right' direction:

First off we need to unwrap the images can be done with a PHP Filter:

// Remove P Tags Around Images 
function filter_ptags_on_images($content){
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

Or with some jQuery:

<script type="text/javascript">
jQuery(document).ready(function($){
    $('p > img').unwrap();
});
</script>

Then you could target the site content and narrow the width on all the elements apart from the img. So for inside just the entry content you could do this:

.entry-content>*:not(img) {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

Its not pretty but neither are the alternatives.

Interesting. Thanks for providing that.

You're welcome

Hey guys! :)

I'm trying to give my blog a complete make-over and I've decided the best solution is GeneratePress :)
I've been working on it for a while now and I love all the customizations offered by GP Premium, so a huge thanks for that! You guys are amazing! :)

I would, however, need some extra help with the Single Post template.
I need my posts to look like this for the desktop version: https://www.dropbox.com/s/j0ygo8jjgffbqkx/Screenshot_35.jpg?dl=0
Meaning any simple text blocks on a 700 px width and any images (image or gallery) on 1100 px width.
How could I go about achieving that for all single posts without having to manually edit all my old posts (because that would just take forever - I have approx. 450 blog posts with loads of images, galleries and text)?

Here is a sample Single Post on my blog: https://alex.bandiwork.dev/2020/08/fagaras-traseu-cabana-capra-podragu-podragel.html

I tried the last piece of code offered by David above, but it modifies all my pages, and I want this only on single posts. Also, that code also changes the width of galleries, and I don't want that.

Also, I would like this look for the mobile version: https://www.dropbox.com/s/7v6recgnif81iq3/Screenshot_20200520-114147_Chrome.jpg?dl=0
meaning any image (image or gallery) to go fullwidth.

Please know that, while I'm quite tech-savvy, I have zero coding skills :(
I really hope you can help me! This is something very important to me.

Thank you so much!
Alexandra

Hi there,

could you raise a new topic ( copy and paste over ) - so we can look at your specific issues.

Of course! Thank you!

Hi Alexandra,

See answer for your question here: https://generatepress.com/forums/topic/different-widths-for-text-versus-images-galleries-in-single-posts/#post-1504088

Thank you.