Adding images to posts: Inserting and automatically resizing user-added images

Our authors will want to add pictures, screenshots, and diagrams to the draft chapters or bonus content hosted on the web site.

drush dl insert image_resize_filter

FIXNOTE: At time of writing, insert did not have a recommended release and Drush could not download.

Gotcha: Many modules don't do anything until they are configured, and some do not have their own settings page, but hide their configuration in some already-existing administration page. We always check the messages at the top of the page after installing modules, because some helpful modules provide notes and even links to their administration pages.

"The image resize filter has been installed. Before this does anything, the image resize filter needs to be added to one or more text formats."

Image resize filter does an exemplary job, and links to the text format administration page (admin/config/content/formats)

Gotcha: We need to add <img> to the list of Allowed HTML tags

Note: Through the miracle of JavaScript, any filter newly checkmarked enabled under Enabled filters will appear under Filter processing order for drag-and-drop sorting. (Without JavaScript or in a screen reader, all options are provided with weight select fields.)

Save configuration

admin/structure/types/manage/book/fields/field_image/edit

We provide a File directory and make it chapters because this value is specific to this content type.

Tip: Always checkmark Enable Alt field. This is a requirement for our sites to meet basic accessibility standards: every information-carrying image should have alternate text conveying as best as possible the same information.

We expand the collapsed Insert fieldset.

Checkmark Enable insert button.

Maximum image insert width we make 600 pixels. This is very useful.

Now we do something that we're never supposed to do. Well, not without extreme caution.

FIXNOTE: ***Gotcha/BUG to test -- Add existing field - type in Label - press TAB. Gone.