Applying a left/right/center class to either a pure image (no figcaption) OR an image with a figcaption. The steps are the same for both cases.
- Click on the image inside the WYSIWYG
- Go to Format -> Formats -> Custom -> Select "Image Align Right"
- You have "Image Align Left" and "Image Align Center" as alternatives.
- Faster alternative: click on the image icon in the WYSIWYG that says "Insert/edit image".
- Under "Styling", there is "Custom Formats" where you can select the class "Image Align Right"
- Success. It works as expected inside the WYSIWYG and the CMS page
- Disclaimer: After all these steps, if it has a figcaption, in the WYSIWYG, the figcaption will not be under the image, but once you click "submit content", you will see it working on the CMS page. If you go back into the WYSIWYG, it will look broken.
Other Examples:
#1: No figcaption:
Click on the image in the WYSIWYG:
Apply your format (in this case, “Image Align Right”). You have "Image Align Left" and "Image Align Center" as alternatives.
Job done:
#2: Images inside a <figure> element:
Click on the image again to select it.
Apply your class like before. You have "Image Align Right", "Image Align Left", and "Image Align Center" as alternatives.
After, it looks like just the image has been affected:
Submit the changes:
You can see that Ronalyn Wilson’s figure/figcaption now works, due to JS code that handles it. Unfortunately, the WISIWYG doesn’t reflect this change. It will look broken, but in fact it does work.
