In order to post, you must be logged in and have a membership.

Home Forums Oxygen FAQ Image stretch fix in Oxygen

Viewing 6 reply threads
  • Author
    Posts
    • #934
      Jonathan
      Keymaster

      Sometimes you'll add an image from the WordPress content editor and on the front end of your Oxygen website, it will stretch too tall and become distorted or too wide and extend off the screen.

      This is a simple fix. Inside Oxygen, go to Settings > Stylesheets > and either add a new stylesheet or edit an existing one.

      Simple add:

      img {
          height: auto;
      }

      Save your changes, take a look on the front end, and the problem will be fixed!

    • #1783
      Kyle
      Participant

      Hi Jonathan - is this for when you add an image in guttenburg editor and it changes the size on the front end? I have been looking for a solution to this 🙂

    • #1789
      Jonathan
      Keymaster

      Hey Kyle,

      That specific code will fix when your image fits width wise, the the height is stretched to it's actual size and distorted.

      I'm not sure if it will fix Gutenberg, but if you provide a link I will gladly have a look for you!

    • #1820
      Stefan
      Participant

      Hi Jonathan, Hi Kyle,

      concerning responsiveness of images, srcset, etc... in oxygen.

      I created  a single post template as you show in the course's template video. I face a problem that if the post content is created in Gutenberg or Classic Editor (tried both) and the post contains an image that is wider then the container width - so e.g. Image Size: 2500x800px (e.g high-res @2x-> on purpose) - container width: 1120px, the image doesn't respect the container width and does not "fluid scale down proportionally" as it does for example in a GeneratePress theme post template  - leading to horizontal scrollbars.

      The reason seems to be the fixed width and height attribute set by WP  (correctly -which seems to be regarded as best practice)  for avoiding Cumulative Layout Shifts (CLS), please correct me if I'm wrong.

      I used this article as a guide: https://web.dev/optimize-cls/#images-without-dimensions

      As I said the problem appears with images inside a container that are wider then the container's width which do not scale down fluid as I'd expected.

      Screenshot here: https://i.imgur.com/OLbwqY2.jpg

      So I used the following CSS to fix it - is this the best way? Does it cause other issues?:

      img {
      max-width:100%; //or width: 100%;
      height: auto;
      }

      I read there is a lot of discussion about the responsiveness of images in oxygen going on, so I wonder what is the best practice in this case.

      Maybe there is some hints concerning the handling of img responsiveness, @2x images, etc. in the course as well? I am not through yet;-)

      Thank you very much!

      Greetings,

      Stefan

    • #1824
      Jonathan
      Keymaster

      Hi Stefan, good question.

      That particular line of CSS is very simple and is an easy fix, but may not be ideal all uses cases. In the case of writing blog posts using the WordPress content editor / Gutenberg and having Oxygen pull in the posts dynamically, often you will have issues like you mentioned where the image overflows its container.

      Now that CSS solves it, but does make the image fit to 100% of it's width, or its containers width, whichever comes first.

      If you wanted to adjust that, you'd have to use CSS to write media queries as your screen size shrinks so like:

      
      @media only screen and (max-width:768px) {
      img {
      max-width:100%;
      height: auto;
      }
      }
      

      That would make it so your img stretch fix works only on devices that are 768px or smaller.

      I would not recommend setting the height at all if you can avoid it as that will cause stretching issues that become very difficult to solve without having to manually set the width and height of the image at multiple breakpoints.

      But for the most part, the basic iteration will work just fine 🙂

      • This reply was modified 5 months, 1 week ago by Jonathan.
    • #1826
      Stefan
      Participant

      Hi Jonathan,

      thx for your very fast answer!

      "In the case of writing blog posts using the WordPress content editor / Gutenberg and having Oxygen pull in the posts dynamically, often you will have issues like you mentioned where the image overflows its container."

      -> Ok I see - but as you also use this method in your video, what would be a better solution? Creating the single posts with oxygen?
      I'd like the client to be able to create the post content in Classic Editor or Gutenberg... How do you handle this scenario?

      "If you wanted to adjust that, you'd have to use CSS to write media queries as your screen size shrinks so like"

      <b>-> Hmm, but in this case MQs would not help as the problem already appears above the first breakpoint?  Pls. see screenshot: Viewport 1920 ->  </b>https://i.imgur.com/OLbwqY2.jpg

      "I would not recommend setting the height at all if you can avoid it as that will cause stretching issues that become very difficult to solve without having to manually set the width and height of the image at multiple breakpoints."

      -> I understand - but at least in my install, wordpress 5.6, sets the width and height attributes by default if I add an image via Add media in (Classic and Gutenberg) - not in yours?

      How would you avoid that, if you pull in e.g the posts dynamically?

      Thank you!!

      Stefan

    • #1828
      Jonathan
      Keymaster

      Ahh ok, so that first CSS didn't help?

      It should be as simple as setting the div or text element that contains all your dynamic content in your post template to max-width: 100% or possibly even just width: 100% and then set height to auto. If you send me a link, I can take a peek and see.

      In terms of handling this when working with clients, you definitely want to just build the template in Oxygen and let them work in Gutenberg/classic editor. I pretty much never want clients to get into Oxygen just because it's overwhelming and they might make mistakes.

      What you're experiencing should be fixable quite easily, but not sure where the disconnect lies at the moment. Again, shoot me link and I'll see if I can give you a bit more direction!

Viewing 6 reply threads
  • You must be logged in to reply to this topic.
menu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram