IMPORTANT MESSAGE REGARDING THE FORUM

As you may already know, the JoomlaWorks Forum is powered by Kunena (the only decent forum component for Joomla).

Unfortunately, the latest update for Kunena has seemingly broken all code snippets (old and new) in the forum.

Until this message is removed, please paste any code as regular text - in other words, don't use the [code]...[/code] tags in Kunena's post editor.

Keyword

Assign Different Overrides Templates According To Media Query

  • Majdy
  • Majdy's Avatar Topic Author
  • User
More
1 week 3 days 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
1 week 12 hours ago #179291 by Fotis
Are you looking to have different HTML structure?

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

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

  • Majdy
  • Majdy's Avatar Topic Author
  • User
More
1 week 11 hours ago - 1 week 11 hours 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: 1 week 11 hours ago by Majdy.

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

More
1 week 9 hours ago - 1 week 8 hours ago #179297 by Fotis
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.

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member
Last edit: 1 week 8 hours ago by Fotis.

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

  • Majdy
  • Majdy's Avatar Topic Author
  • User
More
1 week 8 hours 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
1 week 8 hours ago #179304 by Fotis
Great :)

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

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


Powered by Kunena Forum