search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
316 stars 29 forks source link

Responsive images in oxygen css #47

Open demetre19 opened 5 years ago

demetre19 commented 5 years ago

Hi.

I made a post the good old fashion way today, as I want to hand it off to a client and have them make posts easily, with classic editor.

When I inserted a picture into the classic editor and then looked on front end, all pictures added in the editor were distorted (not responsive).

I then added this (as per fb post) below and it works perfectly.

When adding images to posts using the classic editor. The images will not be responsive.

Do this.

Open posts template > click on the div that has the images on it > click style output > right at the bottom you will see the "img" tag > hightlight that > go to advanced > custom css> and past this in

img width: 100%;height: auto;

Please add this to your oxygen css as standard, do all images added in classic editor are responsive by default.

Thank you.

louisreingold commented 5 years ago

The .oxy-stock-content-styles class is supposed to be applied when using Dynamic Data to insert the WP post content, and this class has the necessary CSS to constrain images to 100% width.

demetre19 commented 5 years ago

Brilliant. I just used your blog template from the reusable templates section and it was not responsive. Hence the workaround.

But I will try it your way. :)

⁣Sent from BlueMail ​

On 6 Feb. 2019, 4:56 pm, at 4:56 pm, Louis Reingold notifications@github.com wrote:

The .oxy-stock-content-styles class is supposed to be applied when using Dynamic Data to insert the WP post content, and this class has the necessary CSS to constrain images to 100% width.

-- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: https://github.com/soflyy/oxygen-bugs-and-features/issues/47#issuecomment-460919848

srikat commented 5 years ago

I believe adding this CSS for img element globally will make images responsive everywhere regardless of which element outputs them and is the way to go.

Ex.: Images output by Code Block aren't responsive unless this CSS is added.

sadhonKumar commented 3 years ago

the image must use the secret image option with responsively large, medium, thumbnail image. the image must use the secret image option with responsively large, medium, thumbnail image. hi, there are still need some inprove, the image not responsive , the original is 

<img class="attachment-medium_large size-medium_large initial loaded" alt="alipay" loading="lazy" sizes="(max-width: 768px) 100vw, 768px" data-ct-lazy="https://mysourcify.com/wp-content/uploads/2021/04/alipay-768x512.jpg" data-ct-lazy-set="https://mysourcify.com/wp-content/uploads/2021/04/alipay-768x512.jpg 768w, https://mysourcify.com/wp-content/uploads/2021/04/alipay-300x200.jpg 300w, https://mysourcify.com/wp-content/uploads/2021/04/alipay-1024x683.jpg 1024w, https://mysourcify.com/wp-content/uploads/2021/04/alipay-150x100.jpg 150w, https://mysourcify.com/wp-content/uploads/2021/04/alipay.jpg 1200w" data-object-fit="~" itemprop="image" srcset="https://mysourcify.com/wp-content/uploads/2021/04/alipay-768x512.jpg 768w, https://mysourcify.com/wp-content/uploads/2021/04/alipay-300x200.jpg 300w, https://mysourcify.com/wp-content/uploads/2021/04/alipay-1024x683.jpg 1024w, https://mysourcify.com/wp-content/uploads/2021/04/alipay-150x100.jpg 150w, https://mysourcify.com/wp-content/uploads/2021/04/alipay.jpg 1200w" src="https://mysourcify.com/wp-content/uploads/2021/04/alipay-768x512.jpg" data-was-processed="true" width="768" height="512">