- Posts: 25
COMMUNITY FORUM
- Forum
- K2 Community Forum
- English K2 Community
- Assign Different Overrides Templates According To Media Query
Assign Different Overrides Templates According To Media Query
- Majdy
- Topic Author
- Offline
- Junior Member
Less
More
3 years 4 months ago #179275
by Majdy
Assign Different Overrides Templates According To Media Query was created by Majdy
Hi
How can assign different overrides k2 templates by media query condition? Assume I have two differents overrides k2 templates, one for Desktop And the second for Mobile Phones, How can load the appropriate K2 override "DesktopTemplate" for desktop and "MobileTemplate" for smarts Phones?!!
Or is there any code that I can add to the same template override that can check the media first and then load the right code in the same template?!
If media query = desktop?
then{code template for desktop}
else if the media query <600?
then{code template for Phones}
Thanks
How can assign different overrides k2 templates by media query condition? Assume I have two differents overrides k2 templates, one for Desktop And the second for Mobile Phones, How can load the appropriate K2 override "DesktopTemplate" for desktop and "MobileTemplate" for smarts Phones?!!
Or is there any code that I can add to the same template override that can check the media first and then load the right code in the same template?!
If media query = desktop?
then{code template for desktop}
else if the media query <600?
then{code template for Phones}
Thanks
Please Log in or Create an account to join the conversation.
- JoomlaWorks
- Offline
- Admin
Less
More
- Posts: 6218
3 years 4 months ago #179291
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Assign Different Overrides Templates According To Media Query
Are you looking to have different HTML structure?
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Majdy
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 25
3 years 4 months ago - 3 years 4 months ago #179294
by Majdy
Replied by Majdy on topic Assign Different Overrides Templates According To Media Query
Hi
Yes
I found the solution with PHP code!
in the category, I chose the overridden template, in this template I create two different codes one for desktop and the other for mobiles, in the ITEM.PHP code is:
<?php
$useragent=$_SERVER;
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{
include 'mobi.php';
} else{
include 'desk.php';
}
?>
so the item.php rendered the right PHP file according to the media query!
Thank you
Yes
I found the solution with PHP code!
in the category, I chose the overridden template, in this template I create two different codes one for desktop and the other for mobiles, in the ITEM.PHP code is:
<?php
$useragent=$_SERVER;
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{
include 'mobi.php';
} else{
include 'desk.php';
}
?>
so the item.php rendered the right PHP file according to the media query!
Thank you
Last edit: 3 years 4 months ago by Majdy.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
- Offline
- Admin
Less
More
- Posts: 6218
3 years 4 months ago - 3 years 4 months ago #179297
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Assign Different Overrides Templates According To Media Query
Your code won't work with caching enabled though...
Joomla already gives you the API to resolve this.
You can use something like:
<?php
jimport('joomla.application.web.client');
$webclient = new JApplicationWebClient();
if ($webclient->mobile) {
echo 'Content for mobile';
} else {
echo 'Content for desktop';
}
Make sure that caching in Joomla's Global Configuration is set to Platform Specific.
Joomla already gives you the API to resolve this.
You can use something like:
<?php
jimport('joomla.application.web.client');
$webclient = new JApplicationWebClient();
if ($webclient->mobile) {
echo 'Content for mobile';
} else {
echo 'Content for desktop';
}
Make sure that caching in Joomla's Global Configuration is set to Platform Specific.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Last edit: 3 years 4 months ago by JoomlaWorks.
Please Log in or Create an account to join the conversation.
- Majdy
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 25
3 years 4 months ago #179302
by Majdy
Replied by Majdy on topic Assign Different Overrides Templates According To Media Query
You should change this forum's template so I can give you a big like!
your code works smoothly
Thanks
your code works smoothly
Thanks
Please Log in or Create an account to join the conversation.
- JoomlaWorks
- Offline
- Admin
Less
More
- Posts: 6218
3 years 4 months ago #179304
by JoomlaWorks
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by JoomlaWorks on topic Assign Different Overrides Templates According To Media Query
Great :)
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Forum
- K2 Community Forum
- English K2 Community
- Assign Different Overrides Templates According To Media Query