I have a client that wants a timeline front page that doesn't thumbnail with the other pages they correspond to (no getresources
), so I have built out chunks that will be filled in with either a (slider, video, audio, podcast, image or map). I want to be able to select the chunk then use their corresponding tv's. I am thinking migx can do this but have no idea how to do this. Below I have the chunks (no modx markup just pure html)
Slider Chunk
<div class="post">
<div class="post-date">
3 <span>Apr</span>
</div>
<div class="post-medias">
<div class="flexslider" data-plugin-options='{"directionNav": false,"slideshowSpeed":3500}'>
<ul class="slides">
<li>
<a href="blog-single-header-slider.html">
<img src="assets/img/nature/full-11.jpg" alt="nature">
</a>
</li>
<li>
<a href="blog-single-header-slider.html">
<img src="assets/img/nature/full-31.jpg" alt="nature">
</a>
</li>
<li>
<a href="blog-single-header-slider.html">
<img src="assets/img/nature/full-10.jpg" alt="nature">
</a>
</li>
</ul>
</div>
<div class="post-info">
<h2 class="post-title"><a href="blog-single-header-slider.html">Post with Images Slider</a></h2>
<div class="post-excerpt">
<p>Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. Probarem, quae ille diceret? Perdiscere ludus esset. Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos
obsecuturos iunxerat imperiale praeceptum, dispic.</p>
</div>
<div class="post-meta">
<div class="f-left">
<a href="blog-single-header-slider.html" class="more">Read More</a>
</div>
<div class="f-right">
<a href="#" class="comments">2 Comments</a>
</div>
</div>
</div>
</div>
Video/audio Chunk
<div class="post">
<div class="post-date">
2 <span>Apr</span>
</div>
<div class="post-medias">
<div class="audio-video-wrapper">
<video id="video-1" class="video-js vjs-sublime-skin" controls preload="auto" height="441" data-setup='{}'>
<source src="assets/videos/video.mp4" type='audio/mp3'/>
</video>
</div>
</div>
<div class="post-info">
<h2 class="post-title"><a href="blog-single-header-video.html">Post with Html Video</a></h2>
<div class="post-excerpt">
<p>Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. Probarem, quae ille diceret? Perdiscere ludus esset. Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos
obsecuturos iunxerat imperiale praeceptum, dispic.</p>
</div>
<div class="post-meta">
<div class="f-left">
<a href="blog-single-header-video.html" class="more">Read More</a>
</div>
<div class="f-right">
<a href="#" class="comments">3 Comments</a>
</div>
</div>
</div>
</div>
<div class="post">
<div class="post-date">
2 <span>Apr</span>
</div>
<div class="post-medias">
<div class="audio-video-wrapper">
<video id="video-1" class="video-js vjs-sublime-skin" controls preload="auto" height="441" data-setup='{}'>
<source src="assets/videos/video.mp4" type='audio/mp3'/>
</video>
</div>
</div>
<div class="post-info">
<h2 class="post-title"><a href="blog-single-header-video.html">Post with Html Video</a></h2>
<div class="post-excerpt">
<p>Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. Probarem, quae ille diceret? Perdiscere ludus esset. Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos
obsecuturos iunxerat imperiale praeceptum, dispic.</p>
</div>
<div class="post-meta">
<div class="f-left">
<a href="blog-single-header-video.html" class="more">Read More</a>
</div>
<div class="f-right">
<a href="#" class="comments">3 Comments</a>
</div>
</div>
</div>
</div>
There are other but I think I have given the idea.
