[Resolved] Different widths for text & comments versus images/galleries in Single Posts

Home Forums Support Different widths for text & comments versus images/galleries in Single Posts

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1504075
    Alexandra

    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

    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

    #1504088
    Elvin
    Staff
    Customer Support

    Hi there,

    For starters, consider setting the max content width for your page contents.

    You can set the content container width through Appearance > Customize > Layout > Content and set the Content container width to your preference (1100px?).

    Alternatively, you can set the content container width using a Layout Element which can be found on Appearance > Elements when you enable the Elements module on Appearance > Generate Press.

    More on Layout elements found here:
    https://docs.generatepress.com/article/layout-element-overview/

    As for limiting the paragraph width on large screens for your single posts page to 700px, you can try adding this CSS:

    /* Single Post max-width 700px for Paragraphs */
    @media (min-width:769px){
    body.single .entry-content > p{
    max-width: 700px;
    }
    }

    As for making images and image galleries just full viewport width, you can try this CSS code:

    /* Force alignwide for mobile view */
    @media (max-width:768px){
    figure.wp-block-gallery, figure.wp-block-image {
        margin-left: -30px;
        width: calc(100% + 60px);
        max-width: calc(100% + 60px) !important;
    }
    }

    Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

    A wise man once said:
    "Have you cleared your cache?"

    #1505152
    Alexandra

    Elvin, you are amazing! Thank you SO much for this! It really means a lot!

    A only had to add

    margin-left: auto;
    margin-right: auto;

    to make it align center, and… perfection! πŸ™‚

    I know it’s off-topic, but is there also a way to limit the comment section to 700px width and have its container be aligned center? Here is an example of what I mean by this: https://undsgn.com/uncode/trust-your-intuition/

    Thank you!

    #1505279
    Elvin
    Staff
    Customer Support

    margin-left: auto;
    margin-right: auto;

    Ohhh nice catch! πŸ˜€

    My bad, I forgot to include that.

    I know it’s off-topic, but is there also a way to limit the comment section to 700px width and have its container be aligned center? Here is an example of what I mean by this: https://undsgn.com/uncode/trust-your-intuition/

    You can try adding this CSS to the mix:

    .comments-area {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1505611
    Alexandra

    Hi, Elvin!
    Oh, no worries, it’s absolutely no problem! πŸ™‚

    The comments CSS didn’t work when I placed it just like that, but I somehow got it to work by adding the .comments-area to the first piece of code you gave me. Like this :

    @media (min-width:769px){
    .comments-area, body.single .entry-content > p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    }
    }

    This did the trick! πŸ˜€ I’m so happy!
    Thank you so much for your help! πŸ™‚
    Alexandra

    #1507041
    Elvin
    Staff
    Customer Support

    Nice one.

    No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1517549
    Alexandra

    Hi, Elvin!
    Unfortunately, I’m back, because I’ve run into a bit of a mess πŸ™

    The solution you gave me works perfectly for the more recent posts, that were created with the Gutenberg block editor. But I have hundreds of older posts that were created with the Classic Editor, and there is where the mess is.

    Please see 2 examples of such posts:
    https://alex.bandiwork.dev/2015/12/romania-bucegi-brana-aeriana-31-octombrie-2015.html
    https://alex.bandiwork.dev/2013/11/hasmas-cabana-piatra-singuratica-varful-hasmasul-mare.html

    1. Images don’t fill the entire width of the Content container (1200 px).
    2. Some text paragraphs are not limited to the 710 px max-width as they should.

    I can see that some of the images are actually wrapped in div or p tags and that some paragraphs are wrapped in div tags, but I don’t know how to solve this mess.

    Please tell me there is a fix for this :(( It would take forever to edit so many posts one by one….

    Thank you so much!
    Alexandra

    #1518225
    Elvin
    Staff
    Customer Support

    This is pretty tricky to solve as some elements are wrapped in div that as no attributes we can select them from.

    But try this out.

    @media (min-width:769px){
    .entry-content div {
        max-width: 700px;
        text-align: left;
        width: 100%;
    }
    }
    
    @media (max-width:768px){
    .entry-content div[style="clear: both; text-align: center;"] {
        margin-left: -30px;
        width: calc(100% + 60px);
        max-width: calc(100% + 60px) !important;
    }
    }

    I can’t guarantee this’ll work on every single page as I’m not exactly sure what other elements are being used other posts’ contents but if we’re lucky, this should be good enough for the older contents.

    A wise man once said:
    "Have you cleared your cache?"

    #1518548
    Alexandra

    Yes, this indeed is tricky because, for these old Classic editor posts, the div style=”clear: both; text-align: center;” includes images AND text.

    And my goal is to have text limited to 710px width, and images & galleries fill the entire Content Container (1200px width) or at least display full size.

    So the code you gave me does not help with this goal, but it did help me understand things better, so thank you!

    Unless there’s a magical quick fix I’m not aware of, I might have to edit all these old Classic editor posts and convert them to blocks. Unfortunately for me, as I have a couple of hundreds πŸ™

    #1518752
    David
    Staff
    Customer Support

    Hi there,

    i took a look and unfortunately theres no magical fix. The major pain is the old classic editor wrapping images in side a paragraph, compounded by some markup being different. So no easy way to contain some elements and not others.

    #1518928
    Alexandra

    Hey, David!
    Thanks so much for looking into it!

    I have 2 questions:

    1. As far as I can see in this post, for example: https://alex.bandiwork.dev/2015/12/romania-bucegi-brana-aeriana-31-octombrie-2015.html

    I have images wrapped in 3 different types of P pags:

    A. Simple p tag
    B. p style= “text align: justify;”
    C. p.image-grid-item-2

    I found a PHP solution that you gave in an older thread:

    // 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');

    and I applied it and it worked for the simple p tags (case A) but not B and C.
    (I have deleted the PHP for now.)
    My question is: is there a way to unwrap the other p tags (B and C) too? And, if yes, is there a way to afterwards wrap the images in div?

    2. I have an issue with galleries with multiple rows. Example: https://alex.bandiwork.dev/2020/08/fagaras-traseu-cabana-capra-podragu-podragel.html

    http://prntscr.com/ve1tts

    So the first row (the row with 2 images) is displayed correctly, but the second row (that only has 1 image) gets limited to the 710 px width that I have set just for paragraphs. How can I fix this?
    I want any type of media (simple images or galleries) to fill the entire Content Container (1200px) and paragraphs to be limited to the 710 px width.

    Thank you so much!

    #1520052
    Alexandra

    Have you received a notification for the above?
    Thank you so much!

    #1520299
    David
    Staff
    Customer Support

    Sorry for not responding sooner – i have asked Tom to take a look to see if he has any smart ideas on this. I’ll give him a nudge today – but he’s 7hrs behind GMT.

    #1520391
    Alexandra

    Oh, wow! Thank you so much, David!
    I highly appreciate this!
    I’ll be waiting patiently πŸ™‚

    #1520775
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. This would be tough – it needs some specific regex (what your function above is using) to match those conditions, but I’m not great with regex, unfortunately. One option is to ask over on stackoverflow.com – someone might be able to provide the correct regex for you.

    2. Right now you have this:

    .comments-area, body.single .entry-content > p, hr, li {
        max-width: 710px;
        margin-left: auto;
        margin-right: auto;
    }

    Try replacing it with this:

    .comments-area, body.single .entry-content > p, body.single .entry-content > hr, body.single .entry-content > li {
        max-width: 710px;
        margin-left: auto;
        margin-right: auto;
    }

    Let me know πŸ™‚

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