Description
We want developers who use frontity to prevent images from pushing the content under them when they load, whenever possible. We should provide clear options for the different uses cases.
The possible cases for an image would be:
- Known dimensions (width & height)
- Only height is known
- Only the aspect ratio of the image is known
- Only width is known / No dimensions are known
User stories
As a theme developer
I want to avoid jumps when my images load
so that I can give a better UX to my readers.
-
As a theme developer
I want to add fixed height images to my theme
so that I can avoid jumps when the images load. -
As a theme developer
I want to specify a default dimension for images
so that I can reserve some space for those images that doesn’t have a known size. -
As a theme developer
I want to specify the image’s aspect ratio
so that I can ensure, for any given width, that the height of an image won’t change after loading it.
I have also come up with the following user stories (although I don’t know if they fit well here).
As a theme developer
I want to preserve the style images have
so that I can assume an image will look the same as specified in the WP editor.
As a theme developer
I want to make images responsive
so that I can adapt their dimensions to any viewport.
EDIT: the user story about placeholders was moved to a new feature.
Possible solution
-
Known dimensions (width & height):
In this case it’s actually straightforward, since it would be enough to assign these dimensions to the image. Dimensions could come from three places:-
From
width
&height
properties.
Nothing more should be done than keeping those props in theImage
component as they are inimg
. -
From CSS (with
width
&height
specified).
Style of images could be preserved and thus maintain their size. It could be a problem if you want the image to be responsive. -
From state → Moved to a new feature
Entities saved instate.source.attachment[id]
could havewidth
&height
stored in themedia_details
attribute. TheImage
component (in case the logic was inside it), should know theid
of the image and access the state. If not, the code that renders theImage
component should take care of that.
-
-
Only height is known:
It would work the same as before, only that thewidth
property cannot be specified (it could be left inauto
). Even so, we would be preventing the image from pushing the content under it. -
Only the aspect ratio of the image is known:
Here you would have to create a container for the image that maintains that aspect ratio and at the same time adapts to the available width. It could be done in theImage
component itself (right now it is being done by theimage
processor). In this case you could pass a prop calledaspectRatio
or something like that. -
Only width is known / No dimensions are known
Default dimensions should be assigned for this case, but the problem could not be completely avoided if the final height of the image is larger. It could also happen that the image has a height less than the one specified by default, so there would be an empty space below the image. You could either live with that problem, or maybe force the image to fit the default size, for example.