Purpose
This page is to provide samples that you can cut and paste into a WYSIWIG. This is not the greatest way to do this - because the WYSIWIG creates styles for the formatting rather than just copying the pure HTML. On the other hand, it works and it is visible in the WYSIWIG editor.
You could view source and copy the code -- one downside is that the styles are currently not actually active in the WYSIWYG, which is one plus side for the creation of the styles.
You can also recreate these by using the styles dropdown, but it can be a bit fidgety. Editing the HTML directly is another way to do it, but of course that requires a little HTML knowledge.
Small & Medium Image Display Options
The options below are available for you to choose from to change the original size of your uploaded images through the edit media button: small (150w) and medium (368w). Additionally, there are options for larger sizes and to revert to the original size. See these anchor links for size examples of medium big, large and original.
Image Small
In addition to this image being sized to 150w and set with a caption, it has left alignment causing it to float. To add margin on the right side, in the source view, add class="floatLeftMargin" to the Drupal Media tag.
Image Medium
In addition to this image being sized to 368w and set with a caption, it has right alignment causing it to float. To add margin on the left side, in the source view, add class="floatRightMargin" to the Drupal Media tag.
You may also wish to take advantage of the reduced width block styles from the WYSIWYG (25%, 33%, and 50%) for your text:
See these anchor links for examples of medium big, large and original image sizes further down the page.
Displaying Images in a Bootstrap Grid
Two-Column Example
50% width column 1
Creating this style does not require any coding. Simply select the bootstrap grid from the WYSIWYG toolbar to insert it. Check the box at the top of the pop-up to add a container, the default is fine. Then choose the 2 column option, setting it with equal width for all screen sizes. You can also apply the "float left with margin" (for a text column on the left) or "float right with margin" (for a text column on the right) to add more margin between your text and the content in an adjacent cell.
As shown on the right, an image inserted in a bootstrap grid will automatically size to a maximum width of the cell it is in. However, you may utilize the small or medium image display choices if you would like it to appear smaller. See an example of this below:
50% width column 2
Large & Original Image Display Options
The options below are also available for you to choose through the edit media button (768w medium big, 1140w big, original size). While captions are available for larger image sizes as well, we do not recommend wrapping text around 768w medium big or 1140w big. Use discretion wrapping text around your original image size. Our example is also too large.
Image Medium Big
Image Big
Original Size
Let's put some text here.
And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below.
And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below.
And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below. And put some text below.