Size and tilt images in WordPress

Keep a picture to the width you want, give phones their own width and angle, and let pictures fill a grid cell, cropped neatly.

Type

An upgrade to the Image block

Find it

Image settings, Max width and Rotation

Phones

Its own width and angle on phones

Speed

Nothing animates, it’s just size and angle

What you can change

The settings worth knowing.

Four settings for size, shape and angle.

Image sizing and rotation example, a round sunburst badge with a star

120px wide

Max width

A width that holds

In px, %, em, rem or vw. For an SVG with no size of its own, it sets the size.

Max width on mobile

A width for phones

A separate width for narrow screens.

Image sizing and rotation example, Snapshot of a three-scoop ice cream cone

Rotation (°)

A resting tilt

From minus 45 to 45 degrees, caption included, with its own phone angle if you want one.

Image sizing and rotation example, Snapshot of a sandcastle with a flag

A tall cell, and the picture crops to fill it

Fill container

Fill the cell

Fills its parent’s width and height, cropped to fit, where the parent has a set height.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select a picture

Any Image block, SVGs included.

3

Set width and angle

Give it a Max width, a phone width and a rotation if you want one, then publish.

Good to know

Fair questions.

It is a Grinner upgrade to the Image block. You can keep a picture to the width you want, give phones their own width and angle, and let pictures fill a grid cell, cropped neatly. Use it to get pictures, logos and SVGs looking right on every screen.

An SVG sized only by Max width shrinks next to long content. Set WordPress’s own Width to Fixed so it holds.

At 781px and below, a little wider than Grinner’s other phone settings. The phone angle starts at 767px.

No. For a set height, place the picture in a cell with a set height and use Fill container.

No. Its corners are trimmed at the screen edge instead.

Pairs well with

Try it with these.

Badges pinned over a section that spin, rock or float.

Tilt, lift, zoom, a glare sweep or gray to color under the pointer.

The number of columns and gaps you want on desktop, tablet and phone.

Grinner grinning

Go make something
beautiful.

Free on WordPress.org · No Pro version