Is there a crack / fix for alternative content.

angel · 2016-12-06 21:19:16

I am using TTG CE4 Publisher to upload content for our Contact Page. Is there a way to display alternate content for desktop and mobile viewers?

rod barbee · 2016-12-06 23:39:25

not via Publisher. But you could use phplugins to insert content to only mobile devices using the CE4-MOBILE G_STYLE identifier along with G_SLUG to target specific albums

http://ce4.theturninggate.net/docs/doku … e4_engines

http://ce4.theturninggate.net/docs/doku … bility_api

http://ce4.theturninggate.net/docs/doku … album_sets

Matthew · 2016-12-07 10:52:42

In the copy area, you could do something like:

<div id="is-desktop">
	<p>I only display on desktop.</p>
</div>

<div id="is-mobile">
	<p>I only display on mobile.</p>
</div>

In custom CSS, then:

#is-mobile { display: none; }
@media screen and ( max-width: 920px ) {
	#is-desktop {display: none; }
	#is-mobile { display: block; }
}

angel · 2016-12-09 05:10:47

Thank you Matthew.

I appreciate you providing an easy and effective solution.

It works!

Matthew · 2016-12-09 14:31:46

Glad to hear.

angel · 2017-01-25 22:04:04

Please let me know how I would load up an alternative menu for mobile devices. I suppose this is done via phplugins?

Would you kindly include the necessary code.

Thank you.

rod barbee · 2017-01-26 01:34:06

There is a phplugins hook named ttg_navigation. It can be used to replace the navigation.
There is also an Advanced Setting in the Page Templates that will disable navigation style and scripting. (you probably don't need to do that)

Ideally, there would be a way to feed on Menu Set to desktops and another Menu Set to mobile devices. This option does not exist, and I rather doubt it will since this is the first time I've seen a request to do what you're asking.

So my guess is that you'd need to hard code navigation for both desktop and mobile. No one can do this for you since you're the only one who knows what navigation you need. But you could copy the structure that exists (look a the page source code) and modify as needed.

If you're using drop down menus, this also means that you'd need to manually add new menu items every time you added a new album, album set, or page.

To feed one menu to mobile devices and one to desktops, you can use custom css that will use the appropriate menu depending on the width of the browser.

I think this should work in phplugins to create the menus. This is just a sample and you'll need to create your own menus using your urls and names. Use a plain text editor to make your changes.
This is untested.

/* Navigation replacement 
==========================================*/

function ttg_navigation( $style, $path ) { 
	
	echo '
	
	<ul class="primary-menu menu mobile-nav">
		<li class="menu-item"><a href="/">Home</a></li>
		<li class="menu-item menu-item-has-children"><a href="/galleries">Galleries</a>
			<ul class="sub-menu">
				<li class="menu-item"><a href="">Sub-item 1</a></li>
				<li class="menu-item"><a href="">Sub-item 2</a></li>
			</ul>
		</li>
		<li class="menu-item"><a href="/about">About</a></li>
		<li class="menu-item"><a href="/contact">Contact</a></li>
	</ul>
	<!-- /Mobile navigation -->
	
		
	<ul class="primary-menu menu desktop-nav">
		<li class="menu-item"><a href="/">Home</a></li>
		<li class="menu-item menu-item-has-children"><a href="/galleries">Galleries</a>
			<ul class="sub-menu">
				<li class="menu-item"><a href="">Sub-item 1</a></li>
				<li class="menu-item"><a href="">Sub-item 2</a></li>
			</ul>
		</li>
		<li class="menu-item"><a href="/about">About</a></li>
		<li class="menu-item"><a href="/contact">Contact</a></li>
	</ul>
	<!-- /Desktop navigation -->
	';
	}
	
	
	return false;
} // END

In your custom css, add this:

/*Mobile or Desktop navigation media queries
====================================*/

@media only screen and (max-width: 1024px) {
	ul.desktop-nav {
	display: none;
	}
}

@media only screen and (min-width: 1025px) {
	ul.mobile-nav {
	display: none
	}
	ul.desktop-nav {
	display: block;
	}
}

I'm not really sure if the ul.desktop-nav { display: block;} is really needed in that second media query.

There also looks to be a way of using php to detect whether or not a mobile device is being used and then feeding the appropriate menu depending on device.

Community @ The Turning Gate

#1 2016-12-06 21:19:16

Is there a crack / fix for alternative content.

#2 2016-12-06 23:39:25

Re: Is there a crack / fix for alternative content.

#3 2016-12-07 10:52:42

Re: Is there a crack / fix for alternative content.

#4 2016-12-09 05:10:47

Re: Is there a crack / fix for alternative content.

#5 2016-12-09 14:31:46

Re: Is there a crack / fix for alternative content.

#6 2017-01-25 22:04:04

Re: Is there a crack / fix for alternative content.

#7 2017-01-26 01:34:06

Re: Is there a crack / fix for alternative content.

Board footer