Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 21. April 2015 23:15

jfk80
hat von CMS/ms gehört
Registriert: 21. April 2015
Beiträge: 4

Anderes Template nutzen bei Mobilegeräten

Moin,

ich bin auf der Suche nach einer Möglichkeit bei Mobilegeräten ein anderes Template anzeigen zu lassen? Gibt es diese Möglichkeit? Falls ja wie stelle ich das an?

Desktop = Standardtemplate
Mobile = Mobiletemplate

Gibts ein Modul oder sowas dafür?


Danke für eure Tipps.
Jacek

Offline

#2 21. April 2015 05:54

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.927
Webseite

Re: Anderes Template nutzen bei Mobilegeräten

Dafür kannst du das Modul "ToolBox" nutzen. Dieses kennt die Klasse "Mobile_Detect" http://mobiledetect.net/. Damit kannst du Desktop / Mobile unterscheiden.

Nun musst du direkt im Template eine IF/ELSE Abfrage einbauen und dann jeweils das entsprechende HTML anzeigen.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#3 21. April 2015 07:39

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Anderes Template nutzen bei Mobilegeräten

Hallo Jacek!

Willkommen in unserem Forum.

Alternativ lassen sich auch Media-Queries nutzen, also CSS in Abhängigkeit von der Bildschirmauflösung (a ka Responsive Design).

Offline

#4 21. April 2015 07:42

jfk80
hat von CMS/ms gehört
Registriert: 21. April 2015
Beiträge: 4

Re: Anderes Template nutzen bei Mobilegeräten

Aus dem Template was ich für Mobile nutzen möchte, gibts einen Benutzerdefinierten Tag. Der schaut wie nachfolgend aus. KAnn ich das auch nutzen? Und wenn ja wie muss jetzt dieses if else im Template ausschauen? In welches der beiden Templates muss ich das einbauen?

Sorry habe leider keine Ahnung von PHP ;(


[== php ==]
            function mobile_device_detect(                 $iphone=true,                 $android=true,                 $opera=true,                 $blackberry=true,                 $palm=true,                 $windows=true,                 $mobileredirect=false,                 $ipad=false,                 $desktopredirect=false){                 $mobile_browser = false;                 $user_agent = $_SERVER['HTTP_USER_AGENT'];                 $accept = $_SERVER['HTTP_ACCEPT'];                   switch(true){                     case (@eregi('ipod',$user_agent)||@eregi('iphone',$user_agent));                  $mobile_browser = $iphone;                 if(substr($iphone,0,4)=='http'){                 $mobileredirect = $iphone;}                 break;                     case (@eregi('android',$user_agent));                 $mobile_browser = $android;                 if(substr($android,0,4)=='http'){                 $mobileredirect = $android;}                 break;                  case (@eregi('ipad',$user_agent));                 $mobile_browser = $ipad;if(substr($ipad,0,4)=='http'){                 $mobileredirect = $ipad;       }     break;                     case (@eregi('opera mini',$user_agent));                 $mobile_browser = $opera;if(substr($opera,0,4)=='http'){                 $mobileredirect = $opera;} break;                     case (@eregi('blackberry',$user_agent));                 $mobile_browser = $blackberry; if(substr($blackberry,0,4)=='http'){                 $mobileredirect = $blackberry;} break;                     case (preg_match('/(palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i',$user_agent));                 $mobile_browser = $palm; if(substr($palm,0,4)=='http'){                 $mobileredirect = $palm; } break;                     case (preg_match('/(windows ce; ppc;|windows ce; smartphone;|windows ce; iemobile)/i',$user_agent));                 $mobile_browser = $windows; if(substr($windows,0,4)=='http'){                 $mobileredirect = $windows; } break;                     case (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|pda|psp|treo)/i',$user_agent));                 $mobile_browser = true; break;                     case ((strpos($accept,'text/vnd.wap.wml')>0)||(strpos($accept,'application/vnd.wap.xhtml+xml')>0));                 $mobile_browser = true; break;                     case (isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE']));                 $mobile_browser = true; break;                     case (in_array(strtolower(substr($user_agent,0,4)),array('1207'=>'1207','3gso'=>                 '3gso','4thp'=>'4thp','501i'=>'501i','502i'=>'502i','503i'=>'503i','504i'=>                 '504i','505i'=>'505i','506i'=>'506i','6310'=>'6310','6590'=>'6590','770s'=>                 '770s','802s'=>'802s','a wa'=>'a wa','acer'=>'acer','acs-'=>'acs-','airn'=>                 'airn','alav'=>'alav','asus'=>'asus','attw'=>'attw','au-m'=>'au-m','aur '=>                 'aur ','aus '=>'aus ','abac'=>'abac','acoo'=>'acoo','aiko'=>'aiko','alco'=>                 'alco','alca'=>'alca','amoi'=>'amoi','anex'=>'anex','anny'=>'anny','anyw'=>                 'anyw','aptu'=>'aptu','arch'=>'arch','argo'=>'argo','bell'=>'bell','bird'=>                 'bird','bw-n'=>'bw-n','bw-u'=>'bw-u','beck'=>'beck','benq'=>'benq','bilb'=>                 'bilb','blac'=>'blac','c55/'=>'c55/','cdm-'=>'cdm-','chtm'=>'chtm','capi'=>                 'capi','comp'=>'comp','cond'=>'cond','craw'=>'craw','dall'=>'dall','dbte'=>                 'dbte','dc-s'=>'dc-s','dica'=>'dica','ds-d'=>'ds-d','ds12'=>'ds12','dait'=>                 'dait','devi'=>'devi','dmob'=>'dmob','doco'=>'doco','dopo'=>'dopo','el49'=>                 'el49','erk0'=>'erk0','esl8'=>'esl8','ez40'=>'ez40','ez60'=>'ez60','ez70'=>                 'ez70','ezos'=>'ezos','ezze'=>'ezze','elai'=>'elai','emul'=>'emul','eric'=>                 'eric','ezwa'=>'ezwa','fake'=>'fake','fly-'=>'fly-','fly_'=>'fly_','g-mo'=>                 'g-mo','g1 u'=>'g1 u','g560'=>'g560','gf-5'=>'gf-5','grun'=>'grun','gene'=>                 'gene','go.w'=>'go.w','good'=>'good','grad'=>'grad','hcit'=>'hcit','hd-m'=>                 'hd-m','hd-p'=>'hd-p','hd-t'=>'hd-t','hei-'=>'hei-','hp i'=>'hp i','hpip'=>                 'hpip','hs-c'=>'hs-c','htc '=>'htc ','htc-'=>'htc-','htca'=>'htca','htcg'=>                 'htcg','htcp'=>'htcp','htcs'=>'htcs','htct'=>'htct','htc_'=>'htc_','haie'=>                 'haie','hita'=>'hita','huaw'=>'huaw','hutc'=>'hutc','i-20'=>'i-20','i-go'=>                 'i-go','i-ma'=>'i-ma','i230'=>'i230','iac'=>'iac','iac-'=>'iac-','iac/'=>                 'iac/','ig01'=>'ig01','im1k'=>'im1k','inno'=>'inno','iris'=>'iris','jata'=>                 'jata','java'=>'java','kddi'=>'kddi','kgt'=>'kgt','kgt/'=>'kgt/','kpt '=>                 'kpt ','kwc-'=>'kwc-','klon'=>'klon','lexi'=>'lexi','lg g'=>'lg g','lg-a'=>                 'lg-a','lg-b'=>'lg-b','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-f'=>'lg-f','lg-g'=>                 'lg-g','lg-k'=>'lg-k','lg-l'=>'lg-l','lg-m'=>'lg-m','lg-o'=>'lg-o','lg-p'=>                 'lg-p','lg-s'=>'lg-s','lg-t'=>'lg-t','lg-u'=>'lg-u','lg-w'=>'lg-w','lg/k'=>                 'lg/k','lg/l'=>'lg/l','lg/u'=>'lg/u','lg50'=>'lg50','lg54'=>'lg54','lge-'=>                 'lge-','lge/'=>'lge/','lynx'=>'lynx','leno'=>'leno','m1-w'=>'m1-w','m3ga'=>                 'm3ga','m50/'=>'m50/','maui'=>'maui','mc01'=>'mc01','mc21'=>'mc21','mcca'=>                 'mcca','medi'=>'medi','meri'=>'meri','mio8'=>'mio8','mioa'=>'mioa','mo01'=>                 'mo01','mo02'=>'mo02','mode'=>'mode','modo'=>'modo','mot '=>'mot ','mot-'=>                 'mot-','mt50'=>'mt50','mtp1'=>'mtp1','mtv '=>'mtv ','mate'=>'mate','maxo'=>                 'maxo','merc'=>'merc','mits'=>'mits','mobi'=>'mobi','motv'=>'motv','mozz'=>                 'mozz','n100'=>'n100','n101'=>'n101','n102'=>'n102','n202'=>'n202','n203'=>                 'n203','n300'=>'n300','n302'=>'n302','n500'=>'n500','n502'=>'n502','n505'=>                 'n505','n700'=>'n700','n701'=>'n701','n710'=>'n710','nec-'=>'nec-','nem-'=>                 'nem-','newg'=>'newg','neon'=>'neon','netf'=>'netf','noki'=>'noki','nzph'=>                 'nzph','o2 x'=>'o2 x','o2-x'=>'o2-x','opwv'=>'opwv','owg1'=>'owg1','opti'=>                 'opti','oran'=>'oran','p800'=>'p800','pand'=>'pand','pg-1'=>'pg-1','pg-2'=>                 'pg-2','pg-3'=>'pg-3','pg-6'=>'pg-6','pg-8'=>'pg-8','pg-c'=>'pg-c','pg13'=>                 'pg13','phil'=>'phil','pn-2'=>'pn-2','pt-g'=>'pt-g','palm'=>'palm','pana'=>                 'pana','pire'=>'pire','pock'=>'pock','pose'=>'pose','psio'=>'psio','qa-a'=>                 'qa-a','qc-2'=>'qc-2','qc-3'=>'qc-3','qc-5'=>'qc-5','qc-7'=>'qc-7','qc07'=>                 'qc07','qc12'=>'qc12','qc21'=>'qc21','qc32'=>'qc32','qc60'=>'qc60','qci-'=>                 'qci-','qwap'=>'qwap','qtek'=>'qtek','r380'=>'r380','r600'=>'r600','raks'=>                 'raks','rim9'=>'rim9','rove'=>'rove','s55/'=>'s55/','sage'=>'sage','sams'=>                 'sams','sc01'=>'sc01','sch-'=>'sch-','scp-'=>'scp-','sdk/'=>'sdk/','se47'=>                 'se47','sec-'=>'sec-','sec0'=>'sec0','sec1'=>'sec1','semc'=>'semc','sgh-'=>                 'sgh-','shar'=>'shar','sie-'=>'sie-','sk-0'=>'sk-0','sl45'=>'sl45','slid'=>                 'slid','smb3'=>'smb3','smt5'=>'smt5','sp01'=>'sp01','sph-'=>'sph-','spv '=>                 'spv ','spv-'=>'spv-','sy01'=>'sy01','samm'=>'samm','sany'=>'sany','sava'=>                 'sava','scoo'=>'scoo','send'=>'send','siem'=>'siem','smar'=>'smar','smit'=>                 'smit','soft'=>'soft','sony'=>'sony','t-mo'=>'t-mo','t218'=>'t218','t250'=>                 't250','t600'=>'t600','t610'=>'t610','t618'=>'t618','tcl-'=>'tcl-','tdg-'=>                 'tdg-','telm'=>'telm','tim-'=>'tim-','ts70'=>'ts70','tsm-'=>'tsm-','tsm3'=>                 'tsm3','tsm5'=>'tsm5','tx-9'=>'tx-9','tagt'=>'tagt','talk'=>'talk','teli'=>                 'teli','topl'=>'topl','tosh'=>'tosh','up.b'=>'up.b','upg1'=>'upg1','utst'=>                 'utst','v400'=>'v400','v750'=>'v750','veri'=>'veri','vk-v'=>'vk-v','vk40'=>                 'vk40','vk50'=>'vk50','vk52'=>'vk52','vk53'=>'vk53','vm40'=>'vm40','vx98'=>                 'vx98','virg'=>'virg','vite'=>'vite','voda'=>'voda','vulc'=>'vulc','w3c '=>                 'w3c ','w3c-'=>'w3c-','wapj'=>'wapj','wapp'=>'wapp','wapu'=>'wapu','wapm'=>                 'wapm','wig '=>'wig ','wapi'=>'wapi','wapr'=>'wapr','wapv'=>'wapv','wapy'=>                 'wapy','wapa'=>'wapa','waps'=>'waps','wapt'=>'wapt','winc'=>'winc','winw'=>                 'winw','wonu'=>'wonu','x700'=>'x700','xda2'=>'xda2','xdag'=>'xdag','yas-'=>                 'yas-','your'=>'your','zte-'=>'zte-','zeto'=>'zeto','acs-'=>'acs-','alav'=>                 'alav','alca'=>'alca','amoi'=>'amoi','aste'=>'aste','audi'=>'audi','avan'=>                 'avan','benq'=>'benq','bird'=>'bird','blac'=>'blac','blaz'=>'blaz','brew'=>                 'brew','brvw'=>'brvw','bumb'=>'bumb','ccwa'=>'ccwa','cell'=>'cell','cldc'=>                 'cldc','cmd-'=>'cmd-','dang'=>'dang','doco'=>'doco','eml2'=>'eml2','eric'=>                 'eric','fetc'=>'fetc','hipt'=>'hipt','http'=>'http','ibro'=>'ibro','idea'=>                 'idea','ikom'=>'ikom','inno'=>'inno','ipaq'=>'ipaq','jbro'=>'jbro','jemu'=>                 'jemu','java'=>'java','jigs'=>'jigs','kddi'=>'kddi','keji'=>'keji','kyoc'=>                 'kyoc','kyok'=>'kyok','leno'=>'leno','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-g'=>                 'lg-g','lge-'=>'lge-','libw'=>'libw','m-cr'=>'m-cr','maui'=>'maui','maxo'=>                 'maxo','midp'=>'midp','mits'=>'mits','mmef'=>'mmef','mobi'=>'mobi','mot-'=>                 'mot-','moto'=>'moto','mwbp'=>'mwbp','mywa'=>'mywa','nec-'=>'nec-','newt'=>                 'newt','nok6'=>'nok6','noki'=>'noki','o2im'=>'o2im','opwv'=>'opwv','palm'=>                 'palm','pana'=>'pana','pant'=>'pant','pdxg'=>'pdxg','phil'=>'phil','play'=>                 'play','pluc'=>'pluc','port'=>'port','prox'=>'prox','qtek'=>'qtek','qwap'=>                 'qwap','rozo'=>'rozo','sage'=>'sage','sama'=>'sama','sams'=>'sams','sany'=>                 'sany','sch-'=>'sch-','sec-'=>'sec-','send'=>'send','seri'=>'seri','sgh-'=>                 'sgh-','shar'=>'shar','sie-'=>'sie-','siem'=>'siem','smal'=>'smal','smar'=>                 'smar','sony'=>'sony','sph-'=>'sph-','symb'=>'symb','t-mo'=>'t-mo','teli'=>                 'teli','tim-'=>'tim-','tosh'=>'tosh','treo'=>'treo','tsm-'=>'tsm-','upg1'=>                 'upg1','upsi'=>'upsi','vk-v'=>'vk-v','voda'=>'voda','vx52'=>'vx52','vx53'=>                 'vx53','vx60'=>'vx60','vx61'=>'vx61','vx70'=>'vx70','vx80'=>'vx80','vx81'=>                 'vx81','vx83'=>'vx83','vx85'=>'vx85','wap-'=>'wap-','wapa'=>'wapa','wapi'=>                 'wapi','wapp'=>'wapp','wapr'=>'wapr','webc'=>'webc','whit'=>'whit','winw'=>                 'winw','wmlb'=>'wmlb','xda-'=>'xda-',)));                 // check against a list of trimmed user agents to see if we find a match                 $mobile_browser = true; break;                   }                 header('Cache-Control: no-transform');                 header('Vary: User-Agent, Accept');                     if($redirect = ($mobile_browser==true) ? $mobileredirect : $desktopredirect){                     header('Location: '.$redirect);     exit;  }else{                  return $mobile_browser;    }             }              global $gCms;$smarty = &$gCms->GetSmarty();             $smarty->assign('mobile_detect', false);             if((mobile_device_detect(true,true,true,true,true,true,false,false))==true){                 $smarty->assign('mobile_detect', true); }$smarty->assign('mobile_none', false);             if((mobile_device_detect(true,true,true,true,true,true,false,false))==false){                 $smarty->assign('mobile_none', true); }return '';             

Gruß Jacek

Offline

#5 21. April 2015 08:32

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Anderes Template nutzen bei Mobilegeräten

Es hat leider den Zeilenumbruch nicht mit eingefügt, weshalb es etwas schwierig zu lesen ist wink.

Aber grundsätzlich - du kannst beide Templates in einem vereinigen, also versinnbildlicht

{if $mobile}
   mobile_template
{else}
   desktop_template
{/if}

Offline

#6 21. April 2015 09:31

jfk80
hat von CMS/ms gehört
Registriert: 21. April 2015
Beiträge: 4

Re: Anderes Template nutzen bei Mobilegeräten

Leider hilft mir das nicht weiter;( sorry.
Bin komplett Laie.

Bräuchte leider eine Schritt für Schritt Anleitung wie es genau ausschauen muss, damit der Switch passiert ;(


Gruß Jacek

Beitrag geändert von jfk80 (22. April 2015 10:49)

Offline

#7 22. April 2015 21:00

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.927
Webseite

Re: Anderes Template nutzen bei Mobilegeräten

Ich probiere es dir Schritt für Schritt zu Erklären:

  1. Wir haben nur 1 Template

  2. In diesem Template wird sowohl das Desktop wie auch das Mobile Template eingebaut

  3. Wenn du mehr trennen willst, kannst du die jeweiligen Templates auch in einen globalen Contentblock auslagern.

Voraussetzung

  • ToolBox Modul installiert

Das Template

{process_pagedata}{strip}
{* Vordefinition ob Mobile}

{if $tbmobile->isMobile() and !$tbmobile->isTablet()}
{$isMobile = true} {* nur Handys ohne Tablets *}
{else}
{$isMobile = false} {* der ganze Rest *}
{/if}
{* Inhaltsblock der Variable myContent zuweisen, damit dieser mehrfach im Template eingebaut werden kann *}
{content assign="myContent"}
{/strip}<html>
<head>
...
</head>
<body>
{if $isMobile}
<!-- hier beginnt das Template für die Mobiltelefone -->

{$myContent}

<!-- hier endet Mobile -->
{else}
<!-- hier beginnt das Template für den Desktop und die Tablets-->

{$myContent}

<!-- hier endet Desktop-->
{/if}
</body>
</html>

Ich hoffe du kannst mit diesem Schema nachvollziehen wie du dein Template bauen kannst.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#8 23. April 2015 22:10

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.227
Webseite

Re: Anderes Template nutzen bei Mobilegeräten

Ich habe für Mobil einige eigene Seiten als Zweig im CMS hängen und redirect nach diesen Zweig wo alle Seiten ein Template für Mobil haben.

[== smarty ==]
{if $smarty.get.useDesktop == "1" or $smarty.session.useDesktop == "1"} {*do nothing*}
{elseif ($tbmobile->isMobile())} {redirect_page page="mobil"} 
{/if}

im Template für Mobil dann

[== smarty ==]
{tbSessionSet name="useDesktop" value="1"}

so dass man mit ein Link zum Desktoplayout springen kann.

MfG
Jan


Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.

Offline

#9 23. April 2015 13:13

jfk80
hat von CMS/ms gehört
Registriert: 21. April 2015
Beiträge: 4

Re: Anderes Template nutzen bei Mobilegeräten

Danke für die Tipps, ich schaue wie ich das bewerkstelligen kann.

Offline