Jump to content

Field type that supports this?


Peter Knight
 Share

Recommended Posts

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 :(

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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;
}
  • Like 4
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

post-1166-0-63107100-1432234367_thumb.pn

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

Link to comment
Share on other sites

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
}
  
  • Like 2
Link to comment
Share on other sites

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
		}
	}
}
  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...