Re: Tiki13 Image Resize To Fit Smaller Screens
Hi Nitreb,
imho there should be implemended an option for responsive images into the {img} wikiplugin.
Right now in Tiki13 I resolve this issue with the following trick:
1.) adding a class to my custom css, for example named "responsiveimg":
.responsiveimg img { width: 100%; height: auto; } /* mind to take care about the edit icon, which should not have the same large size: */ .responsiveimg a img.icon { width:16px; height: auto; }
2.) on a wikipage, article etc. adding a {DIV()} wikiplugin, surrounding the {img} wikiplugin, whilst the {DIV()} wikiplugin gets the class created above:
{DIV(class="responsiveimg")} {img fileId="XYZ" link="url"} {DIV}
The {DIV(class="responsiveimg")} then could be reused whereever I want.
By the way, if the Bootstrap Grid shall be used for wikipages, for example for creating a landing page or so, the bootstrap grid classes can be used in the div plugin about this way:
{DIV(class="row")} {DIV(class="col-md-3")} ::__left__:: some content in a narrow left floating box (3 of 12 grid width) text text text text text text text text text text text text text text text text text text text text text text {DIV} {DIV(class="col-md-6")} ::__center__:: more content in a wider centered box (6 of 12 grid wide) mind, that Bootstrap is a 12 grid thingi text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text {DIV} {DIV(class="col-md-3")} ::__right__:: even more content in a narrow right floating box (3 of 12 grid wide) text text text text text text text text text text text text text text text text text text text text text text {DIV} {DIV}
some content in a narrow left floating box (3 of 12 grid width)
text text text text text text text text text text text
text text text text text text text text text text text
more content in a wider centered box (6 of 12 grid wide)
mind, that Bootstrap is a 12 grid thingi
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
even more content in a narrow right floating box (3 of 12 grid wide)
text text text text text text text text text text text
text text text text text text text text text text text