Loading...
 
Features / Usability

Features / Usability


Tiki13 Image Resize To Fit Smaller Screens

posts: 24

Hi,

I'm currently trying out tiki13, it seems that images and youtube (Plugin) videos are not scaled down to fit the screen like texts and modules are. Is there an option to do so in tiki13?

For example, when I'm viewing the site in Iphone5 which seems to have a width of "300px" for wikis. If a picture is more than 300px, instead of scaling the pics, I get scrolling bars, same thing with the youtube plugin. 300px images on forums are too big, they have to be 250x or lower.

If anyone have a fix for this, it would be greatly appreciated.


Thanks!
Nitreb

posts: 1563 Germany

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":

Copy to clipboard
.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:

Copy to clipboard
{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:

Copy to clipboard
{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}

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

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

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

posts: 24

Thanks Torsten, will use your method.

By the way, do you know how to add Modules to the top of pages for mobile devices. I realized all modules added to the left side go to the bottom, I'm not sure where to put them so they show on top.


Thanks!

posts: 1563 Germany

Hi Nitreb,

please mind, that modules in the module zone top (header), which are applied in the usual way, usually have a 100% width (not the content - I refer to the "container", the module itself).

You might be able to see what I mean, when you go to /tiki-admin_modules.php and grab the logo to move it around a tiny little bit.

In pre-responsive days, until I started to hack Bootstrap into Tiki12 and to learn the basic concepts, that wasn't a problem, as I just altered the width in the modules appearance sector - field custom css to position the module - and in the worst case in the css file itself.

You know:

Copy to clipboard
#module { width: Apx; height: Bpx; position: absolute; top: Xpx; right: Ypx; }

and so on

With responsive design that is not working really well.

So I start to use custom modules more and more intense!

You create a custom module, in which you can use pure HTML and smarty.
Using the wiki tag and the literal tag, you even have a way to use wikisyntax and wikiplugins like for example the plugin "module".

As example a part of the code of a Bootstrap fixed-top navbar:

Copy to clipboard
<ul class="nav navbar-nav navbar-right"> {if !$user} <li><a href="tiki-register.php"><span class="glyphicon glyphicon-user"></span> {tr}Create Account{/tr}</a></li>{else} <li><a href="my"><span class="glyphicon glyphicon-user"></span> {tr}My Account{/tr}</a></li> {/if} <li>{if !$user}<a href="login" style="color:#ffffff;"><span class="glyphicon glyphicon-log-in"></span> {tr}Login{/tr}</a>{else}<a href="logout" style="color:#ffffff;">{tr}Logout{/tr} <span class="glyphicon glyphicon-log-out"></span></a>{/if} </li> <li class="input"><div class="slim-fixed-top_navbar">{wiki}{literal}{module module="switch_lang" nobox="y"}{/literal}{/wiki}</div></li> </ul>


{if !$user} is smarty code, actually a part of the heavily used if/else constructions.

$ tells us, that we talk about a variable, actually a value we want to get from the database. Smarty does that together with PHP - please mind that Smarty towards PHP is in a similar relation than CSS towards HTML ... Smarty takes the design out of PHP.
In other words: PHP is for the "calculation" and Smarty shows the results. About so.

$user usually checks for the actual logged in user and displays it. In the above construction, Tiki checks IF there IS a user OR NOT and does something conditional to the result (here something else than displaying the user name ... so here something conditional to the fact if there is a user or not). OUCH! sounds complicated? Wait! Nearly there!

The ! in {if !$user} ... {/if} means simply: NOT, so "if not user", aka "if you (Tiki) do not find a logged in user" do something.

"Translated" example:

{if !$user} ... {else} ... {/if} = {if there is NOT a User logged in} show this HTML {else} do something else {end this if/else construction}

Another example of Smarty in a template / custom module:

{tr}Login{/tr} ... the {tr} ... {/tr} tag makes text strings (and even links) translatable

When you look at this:

{wiki}{literal}{module module="switch_lang" nobox="y"}{/literal}{/wiki}
you see, that you easily can use any wikisyntax and specifically the module plugin, once you use two tags - wiki and literal ... do not forget to close the tags!

Thining a bit forward, you now could combine the example from my previos post and the new info from above and create a new custom module to be applie in the header which will behave all the way you want to:

1.) use the Bootstrap grid classes ... this time not in DIV plugins, but staight in div HTML tags alike and so on.

2.) put the appropriate modules you need into the appropriate Bootstrap divs

3.) apply the custom module to the header

4.) go back to edit your custom module and play around a bit by changing the sort order of the module plugins and the bootstrap classes ... maybe try push and pull classes aswell, depending, on what you want to achieve.

for the Bootstrap classes find ressources here:
http://getbootstrap.com/css/#grid

for smarty tips, espcially variables for conditional content check this one:
http://themes.tiki.org/Template+Tricks

And for display conditional on the viewport, there are classes in Bootstrap, which automattically display:none; (not loading!) ... then you could choose larger elements for larger devices and smaller elements for smaller devices ... example to mind is the load time and data difference between very large and very small images etc.

Responsive design is not just and only changing width and fluidity related to the viewport. This is just the start of the concept and there is a lot of things possible (and to be done) "behind the scenes".

And please consider to take some time to learn about how to provide accessibility (for example for people with handicap) with Tiki and Bootstrap ... responsive design usually does rely a lot on JavaScript (for example navbars!) ... this might cause issues or completely exclude a lot of people, if not considered and tested well under means of accessibilty.

I hope my few lines help a bit,

best regards,
Torsten


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting