Using Orchard 1.8.1 I have written a simple image gallery that displays thumbnails and a lightbox. It is just a template that is driven by an Orchard Projection, using a Shape Layout. Works just fine. However, for phone users there is no point displaying thumbnails and it's better to just display the lightbox (with touch support). So I have also implemented that in a separate template. But how can I get Orchard to switch templates depending on the UserAgent string?
I have tried implementing Theme switching (http://weblogs.asp.net/bleroy/dynamically-switching-the-theme-in-orchard), but it's a really ugly solution when I really want to just replace one view, and still enable implementers to switch themes. This is NOT an issue of styling; it's an issue of changing the content based on the device.
I tried implementing DisplayModeProvider as described here: http://www.campusmvp.net/blog/displaymodes-in-mvc-4. But although the filter was called, it had no effect on view names.
Are Projections problematic here because the shape name is set? Is there a better way to go about this?
Create an alternate when you see a mobile browser, preferably from a shape table provider.
Related
I have developed a website based on Joomla 2.5 and I wish to make it mobile friendly, without changing (or changing as less as possible) the desktop version of my website.
So I have installed Joomla Mobile component. This component allows activating dynamically a different template (w.r.t the one that is used on desktop), when detecting a mobile device.
By default, the template that is activated when detecting a mobile is "Mobile_basic". This is a simple and really nice template, but the problem is that it doesn't support some menu positions, which are used by the desktop template. So the result is that some menu items are not displayed on mobile device.
I give an example for better clarification: my website uses a menu that is placed in "right" position. But the "Mobile_basic" template doesn't have this position. It has instead other positions called "mj_top", "mj_top2"...
The possible solutions could be:
1) Find a way to instruct Joomla to show a menu item in a different position, depending on the template which is used at that moment
2) Create new positions which are valid both desktop and mobile templates
Has anybody some better idea to solve my task?
Best regards
Alberto
Maybe best solution will be use the same position in both templates [desktop and mobile] ?
at first i suggest to make a copy of mobile template - when you update your Joomla Mobile component it can overwrite your changes.
here you can find easy way to do that
https://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template
then edit index.php file in your mobile template
templates/My_mobile_basic/index.php
and insert this code in place you want to display menu
<?php if ($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="none" />
<?php endif; ?>
Code above check is there are any modules with 'right' position, and display them
Also you need to change default template at Joomla Mobile configuration - so it will use your version
thank you for the smart hint.
I have tested it an it allowed me to achieve my goal, but I had to abandon it because I found a bit difficult to control the order and the visualization of the objects in the mobile version.
Finally I opted for a solution that I would recommend to others who have my same need. With the menu manager I have created "clones" of the menus that are visible only in the desktop template, using positions that are valid only for the mobile template. Then I have populated these cloned menus with a copy of the items that are in the desktop menus.
In this way I can control the order and the visualization of the menu items in the mobile version, easily and independently from the desktop version.
I'm using the following code to create a custom SoundCloud player:
https://github.com/soundcloud/soundcloud-custom-player
What I have done is:
http://epopengate.org/wp-content/themes/epopengate/test/examples/sc-player-standard.html
What I would like to do is have the track listing appear when the user clicks on the info button...I would like to save space and I don't really need to display what's being shown in that window anyway. What would I need to change in order to do that? I assume something in the JS file, but I'm not sure what to move around to make it work.
I know there is a widget that works similar here: https://soundcloud.com/pages/widgets - but it's flash based so Apple devices would not be able to use it and by creating a track listing that appears when the Info button is clicked, increases mobile compatibility by allowing the user to click because you can't hover with mobile devices.
Thanks,
Josh
You can use HTML5 widget, which is the default option for embeds from SoundCloud now – https://blog.soundcloud.com/2011/11/03/html5/
These will work fine on iOS and Android.
This might not be possible but I thought I'd check with everyone.
Is it possible to load a WebBrowserTask on WP7 but to have the url entry box collapsed? I'd also like to set IsHitVisble to false?
The reason I want to do this is to load a url (through databinding) but ensure that the user can't browse to other links on the page. I also need to keep the phones share control in the tool bar so I can't just use a webbrowser control and set the source to the url.
Does anyone have any ideas?
Not possible. You can use a WebBrowserControl inside your own app, but it's not recommended.
Basically such odd/weird limitations as this, don't belong in any modern day craftsmanship. And thus why it isn't a possibility (thanks Microsoft!)
Any idea, how can we create already running website to Mobile Website?
Are there, ready made plug-ins / components available ?
I've found some like wapple.net however it is paid one, which is not feasible for client's budget.
I have found, XML creations is pretty easy in CakePHP, though your ideas would be appreciated.
Kindly share more details on the same !
Regards,
i dont think that you'll find a plugin that will transform your website for mobile. because there are too many decisions to make when creating a mobile web, for me it's like creating a completly different website with only the necessary information that your website has..
But maybe there are components that might help you with the small taks (like detecting the user agent and stuff).. here you can read two good articles about creating a mobile website:
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
There's also a few JS frameworks that will help you with the interaction with the user, i've only used Sencha touch..
But my guess is that you'll have to adapt/create "manually" the css, html and js for mobile, and I don't think that there's a magical tool to do that, you'll have to do it yourself (or pay someone to do it =D)
Hope this helps, Good Luck!
You may be interested in my answer over here:
CakePHP v2.2.1 Solution (+ Cookies to persist mobile/desktop/other layout)
In a nutshell:
Lets you setup mobile layouts /Views/Layouts/mobile/default.ctp
Mobile views /Views/Pages/mobile/home.ctp
Sets a template variable $is_mobile
Lets you force a specific layout ?forcedLayout=desktop, and remembers this in a COOKIE
If no layout is forced it uses CakePHP's User-Agent detection to make the decision $this->request->is('mobile')
If no ../mobile/ layout or view file exists then it falls back to the default layout or view.
Typically with cakephp you want to create a separate view layout for mobile viewing. The app controller should change the default view layout to the mobile one when detecting a mobile browser.
Your mobile view layout should be made by you, only you know what data on your site is important and what is not (aka, what should be removed /kept for mobile viewing) Also your mobile layout can use alternate CSS and only load the elements you want.
To learn more about creating views in cakephp see the cookbook:
I'm looking for something similar to the VB6 / .Net Winforms "Browser Control", that let's you show a browser inside your application.
I don't want to just render a page, I want it to be a fully-functional browser, in which people can click links, will run Javascript, etc.
In essence, what I want is an IFrame, only that it runs inside a Flash app, or a Silverlight app.
The ultimate reason for this is that I want to defeat IFrame busters. I'm making a web app that lets you see other sites inside of it, and I'm running into a bunch of sites that have this code:
var t=top.location,w=window.location;if(t!=w) t.replace(w);
(that's from eBay BTW)
which essentially pops the user out of my site and into theirs.
My hope is that by using a "browser control" of some sort, inside a plugin sandbox, "top", will be top for that browser control, and not for my site.
Of course, if you have any other ideas to achieve the same, they'll be more than welcome.
Edit: I've tried the Component One control suggested by Bill, but it didn't work for these purposes, because it's creating an IFrame outside of the SilverLight control, so it executes in the same context as the page hosting Silverlight, which is what I'm trying to avoid.
Northcode SWF Studio allows you to add browser window on the stage in Flash. I personally use SWF Studio as a third party SWF2EXE tool to extend the power of Flash projectors. It's quite stable and powerful. As far as browser control is concerned here is the example you can download and test if it serves your purpose. Check the Browser APT here.
We've not built a component to enable folks to do this but we're open to suggestions here. That being said, easiest solution is an iFrame, but word of caution in that when you overlay an iFrame over the the top of Silverlight we've seen customers experience perf issues as a result (mostly due to alpha transparency of the iframe etc).
This isn't isolated to Silverlight, Flash suffers the same issue as it has to do with browsers and rendering within the given operating system.
HTH.
Scott Barnes / Rich Platforms Product Manager / Microsoft.
I use the HTML control created by Component One. It has the limitation that the Silverlight object in the page should be set to windowless, but otherwise it works very well.
It's an old post but I'll add my tupence answer. I used the DivElements free control for Silverlight link text and it works quite nicely. It just positions the div accurately so that it looks like it's on top.
As for the other such controls, you've got to set the windowless property of the Silverlight container to true.
It works really well for me and I'm able to seemlessly have Google maps and the Acrobat plugin displayed side by side with my Silverlight application.
PS: because the component just adds a <div> to the page, you can't do stuff like having it load dynamically Javascript file like in the <header> tag.
PPS: when setting the HTML code "by hand", be sure to hook up on the DocumentReady or Loaded event before playing with the HTML DOM.
Hope that helps someone.