Field type that supports this?

[Peter Knight]

I'm working on an interior design site and they have a series of before and after images.

Using a jQuery script, each Before and After image needs to be wrapped in a single container DIV

The following works for me if I use image tags and tag an image 'before' and then other 'after'

<?php
foreach($page->Images as $image) {

$before= $page->Images->getTag('before'); 
$after= $page->Images->getTag('after');
				
echo "<div id='container1' class='twentytwenty-container'>";
     echo "<img src='$before->url'> ";
     echo "<img src='$after->url'>";
echo "</div>";
}
?>

The problem though is it's not very scalable and won't work for more than 1 before and 1 after image.

I thought about using the ProFields Table but it doesn't support an image field.

What I'd really like is a field that will holds 2 images which can then be multiplied.

ProFields Multiplier doesn't support images either

[tpr]

Simple Repeater with an Image field in it, setting "maximum files allowed" to 2? Plus add an explanatory note/Description to the field.

[LostKobrakai]

Maybe not the most suggesting thing UI wise, but what about something like this:

for($i = 0; $i < count($page->Images) / 2; $i++) {
echo "<div id='container1' class='twentytwenty-container'>";
     echo "<img src='$page->Images->eq($i*2)->url'> ";
     echo "<img src='$page->Images->eq($i*2+1)->url'>";
echo "</div>";
}

Just use the order to get images together. 

[Peter Knight]

Maybe not the most suggesting thing UI wise, but what about something like this:

for($i = 0; $i < count($page->Images) / 2; $i++) {
echo "<div id='container1' class='twentytwenty-container'>";
     echo "<img src='$page->Images->eq($i*2)->url'> ";
     echo "<img src='$page->Images->eq($i*2+1)->url'>";
echo "</div>";
}

Just use the order to get images together. 

Many thanks. I don't mind doing that and client would be relatively happy doing that too.

This is the output I'm getting at the moment with that code.

<div id="container1" class="twentytwenty-container">

<img src="sw11-master-bedroom-before.jpg|sw11_sitting-rm-after.jpg|sw11-childs-room-before.jpg|sw11-master-bedroom-after.jpg->eq(1*2)->url">

<img src="sw11-master-bedroom-before.jpg|sw11_sitting-rm-after.jpg|sw11-childs-room-before.jpg|sw11-master-bedroom-after.jpg->eq(1*2+1)->url">

</div>

[Peter Knight]

This works but only picks up a single set of Before and After images

<?php 
			         
for($i = 0; $i < count($page->Images) / 2; $i++) {
echo "<div id='container1' class='twentytwenty-container'>";
 echo "<img src='{$page->Images->eq($i*2)->url}'> ";
    echo "<img src='{$page->Images->eq($i*2+1)->url}'>";
echo "</div>";
}
			?> 

I just added curly braces around your img src.

[Peter Knight]

Simple Repeater with an Image field in it, setting "maximum files allowed" to 2? Plus add an explanatory note/Description to the field.

That's a great idea too and works with images. Why did I think PW repeaters only worked with ProFields?

Amazing!

[horst]

Another way could be to use two image fields, one called imagesbefore and the other imagesafter. Set them up to be displayed side by side each 50% width in the template.

You can get them like

for ($i=0; $i<count($page->imagesbefore); $i++) {
    $urlbefore = $page->imagesbefore->eq($i)->url;
    $urlafter = $page->imagesafter->eq($i)->url;
}

[tpr]

Maybe not the most suggesting thing UI wise, but what about something like this:

You mean the Repeater field? If yes, you mean visually or because it adds too much overhead? (or else?)

Btw, I agree that a simple Image field would do (without Repeater) if the client will be able to use it.

Perhaps somehow adding custom CSS to the admin to force images to be 2 items in a row would make things look more obvious (e.g. n:th child clear)

[LostKobrakai]

You mean the Repeater field? If yes, you mean visually or because it adds too much overhead? (or else?)

I was talking about my own suggestion.

[tpr]

Oh, I did take it personally

[Peter Knight]

or because it adds too much overhead? (or else?)

When you guys refer to a field setup having too much overhead, do you mean it's too heavy on the database or complicates the Admin?

[Peter Knight]

Guys - sorry to come back with this but my setup has changed,

The following works on a single image field called Images.

It echoes a series of thumbs tagged 'before and opens a modal popup containing 2 images each tagged 'before' and 'after'.

<?php
foreach($page->Images->findTag('after') as $image) {

$thumb = $image->size(300,300); // thumb is the 300 x 300 thumbnail outputter initially
$before= $page->Images->getTag('before'); //before is the image tagged 'before'
$after= $page->Images->getTag('after');	//after is the image tagged after
				
echo "
<a class='fb-beforeafter port-item  {$image->tags}' href='#inline1'>
<img src='$thumb->url' class='portfolio-thumb'>
</a>
";

echo "
<div id='inline1' style='display: none;'>
   <div class='container1' class='twentytwenty-container'>
   <img src='{$before->url}'> 
   <img src='{$after->url}'>
   </div>
</div>
";
}
?>

I'm not sure what I need to do if this needs to work instead on a Images field wrapped in a repeater called before_after

Any advice gratefully accepted. Going live tomorrow (eek!)

[LostKobrakai]

When you guys refer to a field setup having too much overhead, do you mean it's too heavy on the database or complicates the Admin?

Overhead means that repeaters are actually pages, which are stored somewhere in the admin section. But it's not the pages per se, but it should be something about the handling of them as I remember Ryan stating that pagetables are better in that regard.

About your repeater problem:

foreach($page->before_after as $r){
  // This may be easier to set up instead of tagging every image
  $before = $r->Images->first(); 
  $after = $r->Images->last();
  $thumb = $after->size(300, 300);

  // Markup
}
  

[tpr]

Nice solution LostKobrakai, and thanks for the info on repeaters.

I would certainly add some checks to ensure images are available, better now than after going live

<?php
// check if there is any "before_after" repeater on the page
if($page->before_after->count()) {

	foreach($page->before_after as $r) {
		
		// ensure there are exactly 2 images in the repeater
		if($r->count() == 2) {
			$before = $r->Images->first(); 
			$after = $r->Images->last();
			$thumb = $after->size(300, 300);
			// Markup
		}
	}
}

[Peter Knight]

Thanks guys. Ran into a slight problem on my end whereby some of the before and after sequences have a  before, during and after photo :-/

Which means I'll have to tweak this a bit.

I think I'll go live with the site tomorrow as planned and then on Saturday, try your samples. 

[fenton]

Isn't that the same with the PageTable Field? I mean, entries are saved as subpages
 

Overhead means that repeaters are actually pages, which are stored somewhere in the admin section. But it's not the pages per se, but it should be something about the handling of them as I remember Ryan stating that pagetables are better in that regard.