ModX and Foundation 5 Interchange

290 Posts

wpicotte Reply #1, 11 years, 7 months ago

I'm attempting to use Foundation 5's Interchange plug-in to pass headers based on media query. Works perfectly for images or even straight HTML, but chunks, TVs, etc., are not processed when passed through Interchange. Wondering if anyone has messed with this? The plug-in has huge potential for site optimization.

55 Posts

mixa_ru Reply #2, 11 years, 7 months ago

Hi!

Show your code please.
How exactly you try to do this.

Cheap and ready landing pages: http://real-portal.biz
Start selling fast, good for dropshipping

290 Posts

wpicotte Reply #3, 11 years, 7 months ago

Quote from: mixa_ru at Mar 06, 2015, 01:07 AM

Hi!

Show your code please.
How exactly you try to do this.

I didn't include code because it's not a code issue. The header functions outside of the Interchange plugin, but does not when passed to the template by the plug-in. However, since you asked...

This is the header chunk. It pulls in values set globally by the site editor using fastField, and as you can see sets conditions based on the current resource. It also pulls in a jquery slider built from MIGX and called by getImageList. None of the output filters, system tags, or snippet calls are processed when passed through Interchange.

<div class="row">
  <div class="small-12 [[*id:is=`1`:then=`small-centered`]] column banner">
	[[*id:is=`1`:then=`<video loop="true" autoplay="true">
	<source src="[[#7.videoFile_mp4]]" type="video/mp4">
	<source src="[[#7.videoFile_ogv]]" type="video/ogv">
	<source src="[[#7.videoFile_webm]]" type="video/webm"> 
	<img src="[[#7.videoAltImg]]">
	</video>`]]
	[[*id:is=`3`:then=`<img src="[[#7.servicesBannerImage:default=`assets/uploads/low.jpg`]]">`]]
	[[*id:is=`4`:then=`<img src="[[#7.aboutBannerImage:default=`assets/uploads/low.jpg`]]">`]]
	[[*id:is=`5`:then=`<img src="[[#7.projectsBannerImage:default=`assets/uploads/low.jpg`]]">`]]
	[[*id:is=`6`:then=`<img src="[[#7.contactBannerImage:default=`assets/uploads/low.jpg`]]">`]]
	[[*id:is=`8`:then=`<img src="[[#7.contactBannerImage:default=`assets/images/low.jpg`]]">`]]
  </div><!--end banner-->
  <section class="row video">
	<div class="[[*id:is=`1`:then=`small-6 columns`:else=`nonHomeLogo group`]]">
	  <div class="small-7 column right clearfix">
		<a href=[[~[[++site_start]]]] title="STG Property"><img class="logo" src="[[#7.siteLogo]]" alt="[[#7.siteLogoAltText:default=`STGProperty is a property management company in Portland, OR`]]">
		  <h5>[[#7.siteTagLine]]</h5></a>
	  </div>
	</div>
	[[*id:is=`1`:then=`<div class="slider small-4 columns end">
	<ul data-orbit data-options="animation:'fade';timer_speed:5000;animation_speed:300;pause_on_hover: true;resume_on_mouseout: true;navigation_arrows: false;slide_number: false;bullets: false;timer: true;variable_height: true;">
	  [[!getImageList? &docid=`5` &tvname=`projects` &where=`{"projectFeatured":"yes"}` &limit=`6` &tpl=`homeCarousel`]]
	</ul>
	</div>`]]
  </section>
</div>

When using Interchange, this is the basic structure:

<div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]">
  <div data-alert class="alert-box secondary radius">
    This is the default content.
    <a href="#" class="close">×</a>
  </div>
</div>

I have tried calling the header as an html file, as specified about, and as chunks in place of the file path. As mentioned, nothing is processed.

1,078 Posts

mmcgee Reply #4, 11 years, 7 months ago

You might reach out to Yanni SanMiguel.

I know he has used interchange before. I tried interchange, but was unable to make it work with the markup required for a specific full screen slider I was using

I use either pictureFill or Adaptive Images in conjunction with pThumb. The selection of picureFill or pThumb has been dictated by the type of slider I am using and the markup it needs. Adaptive Images is certainly the most flexible. Pro to Adaptive Images — the image selection is made before the page loads, thus no processing. Cons — once Adaptive Images identifies the device, that's it. Only one image loads. PictureFill allows that real time resizing as the browser window is resized.

http://adaptive-images.com
http://responsivedesign.is/resources/images/picture-fill PictureFill has several versions available depending on your markup needs, whether it be div span or srcset

55 Posts

mixa_ru Reply #5, 11 years, 7 months ago

@wpicotte,

when you mean "nothing is processed", what is HTML output? Do you see MODX unprocessed tags?

Cheap and ready landing pages: http://real-portal.biz
Start selling fast, good for dropshipping

290 Posts

wpicotte Reply #6, 11 years, 7 months ago

Quote from: mixa_ru at Mar 07, 2015, 12:47 AM

@wpicotte,

when you mean "nothing is processed", what is HTML output? Do you see MODX unprocessed tags?

Correct - unprocessed system tags, chunks, snippets, etc.

290 Posts

wpicotte Reply #7, 11 years, 7 months ago

Quote from: mmcgee at Mar 06, 2015, 06:03 PM

You might reach out to Yanni SanMiguel.

Is he a forum member? Or just find him via Google?

Quote from: mmcgee at Mar 06, 2015, 06:03 PM

I use either pictureFill or Adaptive Images in conjunction with pThumb. The selection of picureFill or pThumb has been dictated by the type of slider I am using and the markup it needs. Adaptive Images is certainly the most flexible. Pro to Adaptive Images — the image selection is made before the page loads, thus no processing. Cons — once Adaptive Images identifies the device, that's it. Only one image loads. PictureFill allows that real time resizing as the browser window is resized.

http://adaptive-images.com
http://responsivedesign.is/resources/images/picture-fill PictureFill has several versions available depending on your markup needs, whether it be div span or srcset

I've used pthumb a bunch, but not with pictureFill or Adaptive Images. I remember looking at the latter a while back -- probably time for a revisit. Appreciate the info!

55 Posts

mixa_ru Reply #8, 11 years, 7 months ago

@wpicotte,

Quote from: wpicotte at Mar 07, 2015, 12:02 PM

]Correct - unprocessed system tags, chunks, snippets, etc.

that's strange very much...

It looks like a MODX parser issue...
Actually I can not provide any solution or idea. May be someone more expirienced tnan me can.

Sorry...

Cheap and ready landing pages: http://real-portal.biz
Start selling fast, good for dropshipping

290 Posts

wpicotte Reply #9, 11 years, 7 months ago

Quote from: mixa_ru at Mar 07, 2015, 12:43 PM

@wpicotte,

Quote from: wpicotte at Mar 07, 2015, 12:02 PM
]Correct - unprocessed system tags, chunks, snippets, etc.

that's strange very much...

It looks like a MODX parser issue...
Actually I can not provide any solution or idea. May be someone more expirienced tnan me can.

Sorry...

Yeah I don't know enough about how the processing occurs to isolate the issue.

290 Posts

wpicotte Reply #10, 11 years, 7 months ago

Quote from: mmcgee at Mar 06, 2015, 06:03 PM

I use either pictureFill or Adaptive Images in conjunction with pThumb.

AdaptiveImages must have gone through an iteration since the last time I took a look. It now seems better documented and easier to implement than what I recall.

Couple questions -- why do you list as a con that once an image is downloaded, it's done? I don't see any lost benefit thereafter, since all that's happening is (presumably) browser resizing?

The caveat to this would be when a user switched from portrait to landscape orientation, yeah? Have you addressed this via $resolution values? Asking because my specific application is photography, and this type of switching is highly likely. Hence, I'd be inclined to set values as landscape and take the hit for portrait format in order to preserve the best possible image quality.