Gallery with MIGX with bootstrap

113 Posts

claro_santiago Reply #1, 9 years, 3 months ago

Greetings! I'm doing this tuts https://www.markhamstra.com/modx/2012/04/managing-galleries-with-migx/ but in bootstrap. My problem is it display all pictures and How can I set class active.

mh.images.gallery.tpl

<div class="item active">
[[!+stats]]<img src="[[+image:phpthumbof=`w=750&h=400&zc=1`]]" alt="[[+description:htmlentities]]" />
<p class="flex-caption">[[+description]]</p></div>

mh.parseMIGXToGallery

$input = $modx->fromJSON($input);
$output = array();
$status = array();
$c =1;
if (!$input || empty($tpl)) return 'no stuff';
foreach ($input as $row) {
  if (isset($set) && !empty($set) && ($set != $row['set'])) continue;
  $output[] = $modx->getChunk($tpl, $row);
}
return implode("\n", $output);

mh.slider

<div class="carousel-inner">
       [[mh.parseMIGXToGallery? &tpl=`mh.images.gallery.tpl` &input=`[[*mh.images]]` &set=`[[+set]]`]]
</div>

I'm calling it from my template

[[$mh.slider?&set=`[[+set]]`]]

any help is greatly appreciated. Thank you.

This question has been answered by claro_santiago. See the first response.

[ed. note: claro_santiago last edited this post 9 years, 3 months ago.]

1,078 Posts

mmcgee Reply #2, 9 years, 3 months ago

This awesome tutorial was my first intro to MIGx.

Is there a js file missing? Lack of js might cause all images to display at one time. The tutorial for flex uses list structure. Not sure whether your use of div instead of li would be the issue, but if the js is looking for li it might.

I use the add-on pThumb instead of phpThumbOf. I did run into some issues using pThumb and certain full screen sliders in conjunction with pictureFill, and ended up using Adaptive-Images, which so far is working great. Adaptive-Images determines which image to load prior to the page loading, so there isn't an image swap when the browser window is resized as happens with pictureFill and some other responsive image solutions.

discuss.answer

113 Posts

claro_santiago Reply #3, 9 years, 3 months ago

It display all pictures because all are set to active class. This is how I solve my problem.

<?php
$input = $modx->fromJSON($input);
$output = array();
$status = array();
$c = 1;
if (!$input || empty($tpl)) return 'no stuff';
foreach ($input as $row) {
$total = count($row);
 if (isset($set) && !empty($set) && ($set != $row['set'])) continue;

if ($c == 1)
{
$status['stats'] = 'active';
 }
else
{
$status['stats'] = '';
}

 
 
 $output[] = $modx->getChunk($tpl, $row);
$modx->setPlaceholders($status);
$modx->setPlaceholders($total);
  $c++;
}
return implode("\n", $output);

then in `mh.images.gallery.tpl` add

<div class="item  [[+stats]]">
       <img src="[[+image:phpthumbof=`w=750&h=400&zc=1`]]" alt="[[+description:htmlentities]]" />
<p class="flex-caption">[[-[[+description]]-]]</p>
                            </div>

1,078 Posts

mmcgee Reply #4, 9 years, 3 months ago

Glad you got this solved.

On another note, for galleries, maybe take a peek at PhotoSwipe http://photoswipe.com

113 Posts

claro_santiago Reply #5, 9 years, 3 months ago

Sweet. I'm having trouble now how to fix my gallery in different context. I have two domain in a single revo installation. Do you have experience about that.

1,078 Posts

mmcgee Reply #6, 9 years, 3 months ago

Quote from: claro_santiago at Jan 09, 2015, 02:08 PM

Sweet. I'm having trouble now how to fix my gallery in different context. I have two domain in a single revo installation. Do you have experience about that.

Sorry. I don't have experience with running multiple sites from a single MODx install.

113 Posts

claro_santiago Reply #7, 9 years, 3 months ago

Okay. than you for your response.

Answered Gallery with MIGX with bootstrap