[PARTIALLY SOLVED] images responsive

Post Reply
mariotv
Posts: 5
Joined: Wed May 02, 2018 3:24 pm

[PARTIALLY SOLVED] images responsive

Post by mariotv »

HI,
WonderCMS 2.5.1 , is it possibile in some way to make images responsive (autosize) on mobile devices? Can someone help me?
Thank you,
mario

User avatar
turboblack
Developer
Posts: 198
Joined: Fri Sep 19, 2014 1:53 pm

Re: images responsive

Post by turboblack »

you have an option "resize full" in image options when you add an image.
click on image and resize full.

for example http://woua.pp.ua/about - its responsive (autosize)
http://old.net.eu.org/ Get ready to hamsterization! 8-) code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates

User avatar
wiz
Admin
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: images responsive

Post by wiz »

Hi Mario.

You can install the Summernote editor plugin: https://wondercms.com/plugins.
When you insert an image, click on it and click "100%". The image will be then responsive.

Let us know if you need any assistance.

mariotv
Posts: 5
Joined: Wed May 02, 2018 3:24 pm

Re: [SOLVED] images responsive

Post by mariotv »

thank you for reply,
hope I'm able to explain better, example: the original image is 400x300, align left, text on right, it is perfect on desktop.
when i resize 100%, it's ok on mobile, the text goes under image, perfect.
but on desktop the image becomes too big, all the screen... not good.
can be the solution is to resize 100% ... but not bigger than original dimensions?
...
thankyou!

User avatar
wiz
Admin
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: [PARTIALLY SOLVED] images responsive

Post by wiz »

No problem Mario.

I think some CSS media queries will do the job for what you want to achieve.

Can you please post a couple of screenshots?
Mobile and desktop screenshots would be fine, so we can see where the problem is and what the desired effect would be?
You can also post a link to the website.

Use the below code and modify it in your style.css.
Make sure your image has some sort of a CSS class, like <img class="yourClass">, if you want it applied only to one image.

Code: Select all

/* 
	CSS for screens LARGER than 768 pixels (desktop)
*/
@media only screen and (min-width: 768px) {
    	img.halfSizeImage {
    		width: 50%;
    	}
}
If you want all of your images to be 50% wide, you can remove the halfSizeImage class and this will be applied to all images (I don't think you want this effect globally though).

Code: Select all

/* 
	CSS for screens LARGER than 768 pixels (desktop)
*/
@media only screen and (min-width: 768px) {
    	img {
    		width: 50%;
    	}
}

User avatar
StephanStanisic
Developer
Posts: 37
Joined: Fri Jul 05, 2019 8:51 pm

Re: [PARTIALLY SOLVED] images responsive

Post by StephanStanisic »

Hoping to add some info for people who find this some time later:

This should be the responsibility of the theme that you are using. If it doesn't handle images well, you could add this code to auto resize the image when the parent container get's smaller than the image itself.

Code: Select all

img {
    max-width: 100%;
}
This method is used by a lot of themes out there. Have used this myself quite regularly.
Hope this helps someone!

Post Reply