Maintaining width and height of images in version 7?


#1

In version 5 if you specify a width and height attribute on an image, the CMS will maintain the width, height, and aspect ratio when the image is replaced:

  • <img src=“image.jpg” alt=“Description” width=“320” height=“240” id=“image-id” class=“editable”>

And allow the user to select where to crop the image.

However this doesn’t appear to work in version 7?


#2

This isn’t available in version 7, but you can use object-fit for modern browsers (all except IE) or an editable background image as an alternative.

I’m looking to introduce an image editor that would tie in nicely with this, so it may happen once that’s available.


#3

I can’t wait to have image editor :slight_smile:


#4

Isn’t that a big backwards step? Functionality that clients relied on is no longer there.

but you can use object-fit for modern browsers (all except IE) or an editable background image as an alternative.

Both of these work arounds will scale images – but unlike Surreal version 5 they don’t allow the user to decide where to crop the images. And this will mean recoding existing client sites.

I’m wondering why the functionality has been removed from version 7?


#5

It wasn’t removed. Version 7 was a complete rebuild not intended to be 100% backwards compatible. Features that users found difficult or unclear were reimagined or removed in favor of other solutions.

In this case, browser support for object-fit: cover|contain is the suggest workaround. It’s not a one-for-one solution, but it removes the effort required from clients to properly crop an image.

I’ve tried to make version 7 as backwards compatible as possible, but early adopters will notice some differences like this throughout the app. If this causes friction, remaining on version 5 is a totally valid option too — support isn’t going away for it any time soon. :slight_smile:

As more feedback comes in, I’ll be happy to revisit features such as this. However, until this thread, nobody has seemed to miss the ability to crop images (presumably because it wasn’t very discoverable in version 5).


#6

I’ve moved all of my clients sites to version 7. I’m now going to have to rewrite the code for 7 sites with the object-fit: cover workaround because Surreal no longer scales or crops images.

It’s also going to be difficult to tell those seven clients that what they could do, they can no longer do.

Surreal is great, but this is a pain.


#7

I would like this feature back too. Hoping the the new image editor will give us this functionality back. If version 5 stay live until the image editor, it is fine to me.


#8

I’m looking into object-fit: cover. How do I use this on a responsive image?

I have a div max-width: 100rem wide. I want my image to be width: 100% and the height to be 33% of the width. So that my images are 100px wide by 33px high. And proportionally scale at smaller sizes.

I don’t think I can use object-fit because it requires the width and height to be set?


#9

Hmm, does it work with the responsive aspect ratio trick?


#10

No it does not work:

main {
	max-width:1000px;
	}

img  {
   width: 100%;
   padding-bottom: 33%;
   background-color: blue; 
   object-fit: cover;

}

<main>
	<img src="...">
</main>

This code doesn’t change the crop/size of the image and it adds padding below the image. The only way to get it to work is to set the height instead of the padding-bottom, but then it is no longer responsive/flexible width and height.


#11

Looks like you need an extra container. If I’m understanding you right, what you’re looking for is something like this: https://jsfiddle.net/b7eg54ro/


#12

In other news, there’s an upcoming aspect-ratio property that will make this less painful. Not implemented yet, but still fun to read about.


#13

Thank you. Yes that works although there is a lot of code. I used background images instead:

<div id="background1" class="cms-editable homepage-images" data-type="background"></div>

.homepage-images {
	width: 100%;
	padding-bottom: 33%;
	background-position: center center;
	background-size: cover;
    background-image:url("...");
	}