Fórumok

aui-viewport and WYSIWYG images

thumbnail
Dave Weitzel, módosítva 11 év-val korábban

aui-viewport and WYSIWYG images

Regular Member Bejegyzések: 208 Csatlakozás dátuma: 2009.11.18. Legújabb bejegyzések
has anyone cracked the incompatibility between the responsive design ideas and how to handle images added into content (talking journal articles not forums/wikis at the moment) ?

When you add an image the WYSIWYG seems to add full set of styles for instance:
style="width: 30px; height: 29px; margin-left: 10px; margin-right: 10px; float: left;"


By setting element level styles you cannot AFAIK change them through styles such as
.aui-view-lt480 img {
max-width: 50%;
}

or even

.aui-view-lt480 img {
width: 15px; height 14.5px;
}

Is there a way to overwrite element styles or switch off this capability of WYSIWYG? (will help with new content not existing stuff)
thumbnail
Juan Gonzalez P, módosítva 11 év-val korábban

RE: aui-viewport and WYSIWYG images

Liferay Legend Bejegyzések: 3089 Csatlakozás dátuma: 2008.10.28. Legújabb bejegyzések
Dave Weitzel:
has anyone cracked the incompatibility between the responsive design ideas and how to handle images added into content (talking journal articles not forums/wikis at the moment) ?

When you add an image the WYSIWYG seems to add full set of styles for instance:
style="width: 30px; height: 29px; margin-left: 10px; margin-right: 10px; float: left;"


By setting element level styles you cannot AFAIK change them through styles such as
.aui-view-lt480 img {
max-width: 50%;
}

or even

.aui-view-lt480 img {
width: 15px; height 14.5px;
}

Is there a way to overwrite element styles or switch off this capability of WYSIWYG? (will help with new content not existing stuff)


What about adding !important to css classes?
thumbnail
Dave Weitzel, módosítva 11 év-val korábban

RE: aui-viewport and WYSIWYG images

Regular Member Bejegyzések: 208 Csatlakozás dátuma: 2009.11.18. Legújabb bejegyzések
Juan Gonzalez P:
Dave Weitzel:
has anyone cracked the incompatibility between the responsive design ideas and how to handle images added into content (talking journal articles not forums/wikis at the moment) ?

When you add an image the WYSIWYG seems to add full set of styles for instance:
style="width: 30px; height: 29px; margin-left: 10px; margin-right: 10px; float: left;"


By setting element level styles you cannot AFAIK change them through styles such as
.aui-view-lt480 img {
max-width: 50%;
}

or even

.aui-view-lt480 img {
width: 15px; height 14.5px;
}

Is there a way to overwrite element styles or switch off this capability of WYSIWYG? (will help with new content not existing stuff)


What about adding !important to css classes?


I've found now found that capability - thanks - but it still leaves a problem in resizing as width styles refer to the containing elements not the initial width of the element you are adjusting. It would also be better to only specify one dimension so scaling will be more automatic.

As you do not know the initial dimanesions of say journal content images I just want them to free form scale by the browser and so turn off the fixed width and height style in the element itself.
I don't think 'width:auto !important;' will work as it will hen fill the width potentially getting larger. and without knowing n advance the images to be used cannot put a max-width in.

Any chance the WYSIWYG can be changed to not put these elements in unless the user sets them?