Jump to content
Peter Knight

Field type that supports this?

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

Share this post


Link to post
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.

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Oh, I did take it personally :)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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!)

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...