Mobile page template

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
User avatar
map_1961
Power Poster
Power Poster
Posts: 406
Joined: Fri Apr 20, 2007 7:26 pm

Mobile page template

Post by map_1961 »

It seems that cmcms has no solution yet for a simple implementation of a mobile version of a website. Maybe i am wrong but i didn't find anything yet.

Wordpress should offer a plugin or module 4 thia issue. But who liks Wordpress?

We tried once 2 set up a mobile template but as a page can be linked 2 one template only this didn't work.

Maybe someone has an idea how 2 solve. Thx 4 this.

map_1961
chandra

Re: Mobile page template

Post by chandra »

Not sure what you mean.

Toolbox module has some commands like is_mobile and is_tablet to check mobile devices.
uniqu3

Re: Mobile page template

Post by uniqu3 »

And there is mobiledetect plugin as well if one doesn't need a module with bunch of other stuff when only mobile detection might be needed.

Besides one can come fairly far with RWD and should not only concentrate on any kind of device detection, as detection may fail and a phone is not always "same" phone, is it 4" or 4.2" or 4.7" or 5" or maybe 6" and so on...
I really really hate WP websites that simply use that "one click wonder Mobile template plugin because i do not know better" as user experience is simply bad when you get to a site that was optimized for "iPhone" only with a 10" Android tablet.
User avatar
map_1961
Power Poster
Power Poster
Posts: 406
Joined: Fri Apr 20, 2007 7:26 pm

Re: Mobile page template

Post by map_1961 »

Hi all.

Thankx so far. Who can help implementing into a site (pay 4 it)?
Can give access 2 dev page for implementing.

Thx

map_1961
User avatar
map_1961
Power Poster
Power Poster
Posts: 406
Joined: Fri Apr 20, 2007 7:26 pm

Re: Mobile page template

Post by map_1961 »

Goran. As i saw on a fresh install u wrote simlex template. This looks great and seems 2 be a good start for a new design of our pages.

You wrote :
Note: {cms_jquery} tag is included at the bottom of the Template. You should be carefull with it when you are using Modules that include jQuery in <head> section.
Can u pls give hint how 2 implement
- showtime module in the head - i guess this uses jquery

Whats about using gallery module in the content section and avplayer (video module 4 managing mp4 video using java script.
Avpla, er needs this code in the head section of the template:

Code: Select all

<__script__ src="/modules/avplayer/player/video.js" type="text/javascript" charset="utf-8" ></__script>
    
<link rel="stylesheet" href="/modules/avplayer/player/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8" />
Thankx for a reply on this issues.

yours
map_1961
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Mobile page template

Post by velden »

I think it's just a warning that you should take care you don't include jQuery more than once. Typically if you do all jQuery stuff fails, so you will notice right away.

My personal preference is to include the needed libraries myself (in page template, or in metadata or in page options) and don't let the modules do it for me.

I never used Showtime module (use ListItExtended/LI2 if I need such a thing) so I don't know if it forces the jQuery in your page.
User avatar
map_1961
Power Poster
Power Poster
Posts: 406
Joined: Fri Apr 20, 2007 7:26 pm

Re: Mobile page template

Post by map_1961 »

Hi velden.

Thx. If so what 2 do if another module uses jquery as well?

Txh

MAP
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Mobile page template

Post by velden »

Just make sure they don't include the jQuery library. Most of the times you can control that somehow. Maybe it's an option in the module, or an extra parameter, or somewhere in the module's template.

Then you can add the include yourself in the <head> section of your page template for example.

Then you will have to find a jQuery version that is compatible with both/all modules that need it.
User avatar
map_1961
Power Poster
Power Poster
Posts: 406
Joined: Fri Apr 20, 2007 7:26 pm

Re: Mobile page template

Post by map_1961 »

Ok - all. I transfered the genios simplex template + stylesheets + file folder of this genios guy called uniqu3 to my page backend.

Meanwhile i get most of the modules and item working and understood a bit of this grid structure and how 2 put thins from left 2 right side and so on - hard stuff for content people :-).

The tip inside the template is not top use slideshow modules but to code my own slideshow by using:
http://www.php.net/manual/en/function.glob.php)
Nice page but who likes to code like this?

So i am now looking 4 a solution to mount showtime slideshow module. The part of the simplex template that is creating the php codes slides in simplex template is:

Code: Select all

...
        <!-- .banner (banner area for a slider or teaser image) -->
       <section class='banner row noprint' role='banner'>
            <div class='banner-text'> 
          <ul>
                    <li>Flexible</li>
                    <li>Powerful</li>
                    <li>Secure</li>
                    <li>Robust</li>
                </ul>
{content block="Slideshow" label="Slideshow" oneline="true" size="80"}
            </div>
            <div class='banner-image cf'>
            {strip}
                {* you do not need a module for every simple site functionality. For example you can build a simple slideshow
                with php glob function (http://www.php.net/manual/en/function.glob.php) without wasting your system resources 
                by using modules or plugins.
                Below would search for files matching .jpg in folder named teaser in simplex theme folder *}
                {assign var='teaser' value='uploads/simplex/teaser/*.jpg'|glob}
                    {foreach from=$teaser item='one'}
                        <div><img src='{root_url}/{$one}' width='852' height='275' alt='' /></div>
                    {/foreach}
            {/strip}
            </div>
        </section>
        <!-- .banner //-->
...
I tried to argue the code given above and to place the showtime module tag ...
2 problems:
1. the slideshow did'nt apear
2. just the frame and this is not scaling with the grid.

Maybe someone has an idea how 2 solve.

Thx map_1961
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Mobile page template

Post by velden »

Well, if you don't like the given example with glob (why don't you like about it?) Just upload the pre-sized images to a directory and you're done. I suppose you are the editor of the site yourself so you know what to do.

I would make it with ListItExtended but it needs a lot of modules:

- ListItExtended (LI2)
- ListItXdefs
- GBFilePicker
- CGSmartImage which depends on CGExtensions
User avatar
map_1961
Power Poster
Power Poster
Posts: 406
Joined: Fri Apr 20, 2007 7:26 pm

Re: Mobile page template

Post by map_1961 »

Thx. I'll try this out. Showtime comes with some comfortable features taht make it easy to handle content - even mobile:
- Headline and Text comments to the slide
- Link on slide.

I realy don't se an option to do this with the features proposed in teh template.

THx

map_1961
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Mobile page template

Post by velden »

Just to be sure:

It's all about the modules template capabilities, isn't it. It should just spit out the code you need. I don't know the showtime module but if you're able to

- make it NOT automatically include the jQuery library AND
- make it output the html you need

you can use it I'd assume.

With the modules I mentioned above I would make it so, with some extra features:

LI2 to store the 'items' (image, title, extra text, whatever you like) and to output the html.
GBFilePicker to create a user friendly way to select an image, with preview etc.
CGSmartImage to make sure the images are exactly sized as needed.
Locked

Return to “Layout and Design (CSS & HTML)”