search

impresspages / ImpressPages

ImpressPages is php framework with admin panel. Build functional website in one hour.
http://www.impresspages.org
Other
501 stars 178 forks source link

Image scale to 100% width will force reset to its original size #772

Open chouex opened 8 years ago

chouex commented 8 years ago

noted ajax action when scaling image

aa:Content.updateWidget
securityToken:...
widgetId:...
widgetData[method]:resize
widgetData[width]:1064
widgetData[height]:665

but when i scale to 100% width

aa:Content.updateWidget
securityToken:...
widgetId:...
widgetData[method]:autosize

after refresh the page the image back to original size instead of 100% width

impresspage: v4.6.2 theme: Air

maskas commented 8 years ago

Can't reproduce. You are right regarding the last post being different. That's on purpose. But if you don't forget to press "publish", you should see your image being scaled to full width.

chouex commented 8 years ago

i did Published the changes .

i am still able to reproduce after checkout the offical v4.6.2 (the plugin and code changes was remove)

but not able to reproduce using impresspages cloud http://29461.cloud.impresspages.org/home cloud using impresspages v4.6.0 (the last ajax post is NOT widgetData[method]:autosize)

thus i checkout v4.6.0 but the different to cloud is the last ajax post IS widgetData[method]:autosize and the image not resize to full width after published.

Theme: Air.

i found if the post option is widgetData[method]:autosize the image will not resize (it suppose the CSS to set the width to 100%?)

chouex commented 8 years ago

i found update the image with autosize will just remove the width & height and will not do anything else.

do you know what autosize suppose to do? should it add something like class="autosize" to tell browser scale image to 100% width? Ip/Internal/Content/Widget/Image/skin/default.php

maskas commented 8 years ago

Here is the idea. When you upload an image, it is being shown in natural size, unless it doesn't fit the container. Ten it is being scaled down.

When you scaledown the image manually, ImpressPages sets the width / height you have requested.

When you scale image to the full width, ImpressPages assumes you want it full size again, so removes width / height setting for the image to be natural size.

Apparently there is a bug. That works only if image width is larger than the container width. If image is smaller, tat doesn't work that well. When you scale image to the full width / height, ImpressPages unsets width / height setting and image becomes of natural size, which is smaller than the container.

It is hard to explain properly. Hope you got the idea. All this complexity is needed so that images would scale wen you use mobile devices.

chouex commented 8 years ago

Maybe there should be a new method fullwidth? widgetData[method]:resize|autosize|fullwidth

to specify if the image is scale to full width or do not set its size

i am unable to do that because i can not found where to determine the method in js

maskas commented 8 years ago

I would agree on a new option to scale the image to full width.

Image widget related JS is in Ip/Internal/Content/Widget/Image/assets/Image.js

Changes to this file apply only if you have CoreCompiler plugin enabled, which will be on your hard drive if you checkout from GIT https://github.com/impresspages/ImpressPages

This plugin automatically compiles core js to a single file.

severfire commented 8 years ago

actually incorporating the 100% is good for responsive designs.then height in css would be set to auto.