if/else recommendation

[Peter Knight]

I have a lot of product overview pages and each of these pages features a grid of wide thumbnails like this...

Although the images are not exactly the same size, I am using the CSS max image height of 150px to keep things tidy and it works well assuming all the product photos are wide format. Even though there are about 50 of these overview pages, they're all based on the same template.

However, my client has one product overview page that features tall / thin images and these need to be displayed on the overview at 500px high.

When my CSS max-image height is applied to these images, they are too small in a grid format.

I could create a separate template for this tall/thin grid and that would solve my issue but I was wondering if there was a better way to do this and keep the single template.

Would you recommend doing an if/else statement on the images like this

<?php if ($page->rootParent==1128) 
		{
			echo"
			<img src='{$image->url}' class='image-wide'>";
		} 
		else 
		{
			echo"
			<img src='{$image->url}' class='image-tall'>";
		}
?>

		

I'm just not sure if I should be basing the if/else on a selector examining a page title or a rootParent ID or maybe even using a more modern image sizing trick.

Any thoughts appreciated.

 

 

 

[dragan]

If it's always going to be just this one exception, this if/else is OK.

If in the future there will be more image varieties, maybe use something like isotope / masonry?

Another method is to always create a page-id / page-parent-id body class, and then you can use the same image class, and create variations in your CSS.

[Sergio]

I think you can take a look at the CSS "object-fit" rule. See this codepen: https://codepen.io/akb20/pen/EPoPpx

[ukyo]

<?php
if($image->width > $image->height) {
     echo "Width : `{$image->width}px` bigger than height : {$image->height}px !";
} else {
     echo "Height : `{$image->height}px` bigger than width : {$image->width}px !";
}

 

[maxf5]

Why don't you just crop the thumbs with something like $image->size(320,240,$options)->url, so they 're all equal.

[Peter Knight]

Thanks everyone.

@dragan I did think about the isotope / masonry route but in my use case, the images are not mixed on any single page (right now). 

Lets say there's Page A which has all wide images and page B which has all tall images. They're both baed on the same template though and that's where the issue is.

But I do hope UIKit 3 do introduce their dynamic grid soon as it's badly missing from v3.

In the end I'm kicking around this with the help of ukyo's suggestion.

On a side note, If the images field doesn't have an image in it, my code still throws an error. I thought my first image check at the start stopped that happening but seemingly not.

In plain English, this is what I *think* I am doing

1. Create a variable called products for each child page
2. If the images field isn't empty, set image as a variable
3. Output a html wrapper with an image at the top and some text below
4. In no. 3 if the image is wide, apply a class prod-preview. If the image is tall, apply a class prod-preview-tall

<?php
$products = $page->children();
foreach ($products as $prod)
{
  if ($prod->images)
  // Check that images field is poulated	
  { 
      $image = $prod->images->first();
      //Create variable from first image in field
  }
?>
		
		<?php
			echo"
			<div>
				<div class='prod-ov-wrapper'>";

				// If image is wide (width greater than height)
				if($image->width > $image->height)
					{
					echo "	
						<a href='$prod->url'>
						<img src='{$image->url}' class='prod-preview'>
						</a>";
					} else {
					// If image is tall (height greater than width)
					echo "	
						<a href='$prod->url'>
						<img src='{$image->url}' class='prod-preview-tall'>
						</a>";
					}
				echo"
					<div class='prod-ov-text'>
							<span class='preview-title'><strong>Part No:</strong> {$prod->title}</span>
							<br/>
							{$prod->prod_summary}
							<a href='$prod->url' class='uk-icon-button  icon-linky' uk-icon='icon: chevron-right'></a>
						</div>
					</div>
				</div>
		";}
		?>

 

 

 

[Peter Knight]

5 minutes ago, Peter Knight said:

Thanks everyone.

@dragan I did think about the isotope / masonry route but in my use case, the images are not mixed on any single page (right now). 

 

Oops - I'm contradicting my earlier original post here. Page A contains a mix and page B doesn't. ?

[wbmnfktr]

First thought:

Maybe you should talk with your client and ask him to re-think/re-create his product images.
I don't know what kind of products will be shown but a consitent look & feel should be in his interest too.

Second thought:

You could create an image-canvas and place the product image itself in the background.
All products would have the exact same image-area no matter what size the products images have.

[gebeer]

if ($prod->images) will always return true, since your images field can hold more than one. 

Use if ($prod->images->count) instead. 

That should resolve the error for empty image fields.

[Peter Knight]

Thanks @gebeer

That's not having any effect.

My images field has the following properties

Max Files allowed
0

Formatted value
Automatic

Just to recap, I am trying to

1. check that an images field is populated
2. if so - create a variable called $image
3. safely output an image based on the 1 and 2 above being tru

<?php
$products = $page->children();
foreach ($products as $prod){

   // Check that images field is poulated	
   if (count($prod->images))
   { 
   // Create variable from first image in field
   $image = $prod->images->first();
   }
?>

<?php
			echo"
			<div>
				<div class='prod-ov-wrapper'>";

				// If the pages are the following (Rollers contain tall/thin images)
				if ($page->matches('id=1129|1145|1160|1163'))
					{
					echo "	
						<a href='$prod->url'><img src='{$image->url}' class='prod-preview-tall'></a> ";
					} 
				else 
					{
				// If any other page 
					echo "	
						<a href='$prod->url'><img src='{$image->url}' class='prod-preview'></a> ";
					}
				echo"
					<div class='prod-ov-text'>
							<span class='preview-title'><strong>Part No:</strong> {$prod->title}</span>
							<br/>
							{$prod->prod_summary}
							<a href='$prod->url' class='uk-icon-button  icon-linky' uk-icon='icon: chevron-right'></a>
						</div>
					</div>
				</div>
		";}
		?>

 

[gebeer]

@Peter Knight What do you want to do with products that do not have images? In your foreach you define the $image variable only when there are images. Then you echo the images even if there are none. This will give you a PHP notice for $image is undefined. You'd need another if condition within your echo to check for isset($image) and only output the image if there is one.

The way you setup your images field it should definitely return an empty array if there are no images so the 

if (count($prod->images))

should work as expected.

[Peter Knight]

3 hours ago, gebeer said:

@Peter Knight What do you want to do with products that do not have images? In your foreach you define the $image variable only when there are images. Then you echo the images even if there are none. This will give you a PHP notice for $image is undefined. You'd need another if condition within your echo to check for isset($image) and only output the image if there is one.

The way you setup your images field it should definitely return an empty array if there are no images so the 

if (count($prod->images))

should work as expected.

Makes sense. Wasn't aware of isset so I'll look forward to using ?

[szabesz]

1 hour ago, Peter Knight said:

Wasn't aware of isset so I'll look forward to using

A short but good summary on isset() / empty() / is_null():

https://www.virendrachandak.com/techtalk/php-isset-vs-empty-vs-is_null/