Images in Drupal

Posted April 21st, 2015 at 3:44 pm.

In the Drupal Rich Text editor in Pages and in various other content types, you can add images via the media uploader, and control their positioning.

Resize and crop images before uploading to Drupal, using the recommended image sizes and formats in our guide.

media_uploader

Add an image

To add an image, browse to it on your computer and upload it.

upload

Make your image accessible and add captions

When you click “next,” supply Alt Text for users who cannot see the image, as well as to help search engines understand your page’s content. Also supply Title Text if you wish to include a caption.

alt

Position your image

When you click “next” again, click the “Display as” dropdown menu to determine the size and position of your image.

screenshot of drupal image alignment options

Note: The image may not display correctly in the editor. Save and view your page to see how it will actually appear.

Change An Image’s Position After it is Inserted

Click on the image, then click the mountain icon. Alignment options will reappear.

media_uploader

The options

Default– Image will display as is, taking up all available space.

Teaser– Provides link to image file; the user can click for a full screen view of the image. Undesirable in most cases.

Preview– Provides a small, square preview image similar to a thumbnail. Scaled to 100px by 100px

full size– image will display at full size, or scaled to 563px wide.

medium left– aligned to the left of text, with padding between text and image. Scaled to 281px wide.

medium right– aligned to the right of text, with padding between text and image. Scaled to 281px wide.

small left– aligned to the left of text, with padding between text and image. Scaled to 140px wide.

small right– aligned to the right of text, with padding between text and image. Scaled to 140px wide.

thumbnail left– aligned to the left of text, with padding between text and image. Scaled to 70px wide.

thumbnail right– aligned to the right of text, with padding between text and image. Scaled to 70px wide.

Filed under: Drupal CMS Basics,Web Editing by Juliana Perry

Comments are closed.