Media Selector

Pick the image an image component displays from your team's media library.

Where to find it
Labelled Media Selector in the "Selected Component" section of the Modify drawer.
Offered by
The Image component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This is where you choose the picture. It opens your team's media library, so you browse and select from images that have already been uploaded rather than pasting in a URL.

Because it is per-device, you can choose a different image for phones than for desktops — and this is one of the best uses of the per-device feature there is. A wide, cinematic hero image looks superb on a monitor and reduces to an unreadable sliver on a phone. Selecting a tighter, more upright crop for phones fixes it properly, and the phone only downloads the image it actually needs.

When you pick an image, RuleCMS can fill in its natural width and height for you, which is what stops the page jumping about as the picture loads.

When you would use it

  • Adding or replacing any image on the page.
  • A wide desktop image does not work as a phone crop.

How to change it

  1. Click the image component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Media Selector".
  3. Browse or search your media library and select an image.
  4. Uncheck "Same value for all resolutions" to pick a different crop per device.
  5. Fill in Image Alt Text next — it is not optional.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Always set Image Alt Text. An image with no alt text is invisible to screen readers and worthless to search engines.
  • Upload images at roughly the size they will be displayed. A 4000px photo shown in a 400px column costs your visitors download time for detail they never see.
  • If the image needs uploading first, do that in the Media Assets area of your team.

Related settings

Where to go next