Keyword

Assign Different Overrides Templates According To Media Query

  • Majdy
  • Majdy's Avatar Topic Author
  • Offline
  • Junior Member
More
2 years 9 months ago #179275 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

Please Log in or Create an account to join the conversation.

More
2 years 9 months ago #179291 by JoomlaWorks
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
  • Majdy's Avatar Topic Author
  • Offline
  • Junior Member
More
2 years 9 months ago - 2 years 9 months ago #179294 by Majdy
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
Last edit: 2 years 9 months ago by Majdy.

Please Log in or Create an account to join the conversation.

More
2 years 9 months ago - 2 years 9 months ago #179297 by JoomlaWorks
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.

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Last edit: 2 years 9 months ago by JoomlaWorks.

Please Log in or Create an account to join the conversation.

  • Majdy
  • Majdy's Avatar Topic Author
  • Offline
  • Junior Member
More
2 years 9 months ago #179302 by Majdy
You should change this forum's template so I can give you a big like!
your code works smoothly
Thanks

Please Log in or Create an account to join the conversation.

More
2 years 9 months ago #179304 by JoomlaWorks
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.


Powered by Kunena Forum