Ask the Community

Image Button in Composer Won't Allow for Inline Images

Since the upgrade, when I insert images into pages using Composer, now the images are automatically encapsulated in a box, that appears to have the <figure class="fsImage"> tag around it.

This tag for some reason seems to prevent me from inserting images into text, which I do often to show users what button to click.  It's an efficient use of space on a page, but the new design seems to want to force me to put all pictures on a line by itself, rather than inline with text when needed, and when I prefer that to be (e.g. Alignment = NONE or not left, center or right justified).

Is this a bug?  Or is this just the way the HTML gods have decided things need to be now?  From the standpoint of someone that creates online documentation/instructions a lot, it pains me to have someone at the "god" level impose rules on how I must create my pages, as if that entity is the only person in the world that could possibly know how to create good web pages.

Can anyone tell me if the issue I'm experiencing is normal, and should be expected because it's how the "Accessibility" and/or "HTML" gods have dictated life now has to be?

Or is the issue a bug, and/or something others see as an improper restriction on my freedom to create content using my own mind?

I tried reporting this issue to our FinalSite contact, but was told "this is how it works".  That just means they're not willing to investigate it further, disagree with how I've been doing things forever, or that they already know this is a change from "up high".

Thanks for any useful feedback!

  • Guest
  • Aug 23 2018
  • Attach files
  • Lee Bruzaitis commented
    August 28, 2018 12:53

    It may be because in-line images are not accessible. That's why you don't see a lot of them used anymore. 

  • Admin
    Alex Wack commented
    October 02, 2018 14:27

    Good Morning,


    I'm sorry to hear that you're running into issues with embedding images from Resources. The good news is that there is a way to embed resource images, align them however you'd like within text, and then rest assured that those images are accessible (once you provide alt text).

    Here's a quick guide how to embed an image from Resources in the editor, providing alt text, and setting it's alignment so that text will wrap around it.

    Embedding and aligning Images from Resources:

    1. Using the editor (in Posts, the Content element, etc) click the Image button in the editor's toolbar. The Image Properties Menu will open.
    2. Inside the the Image Properties Menu, click on the Browse Resources button. The Resource Picker will open.
    3. Select the image you want to embed in the Resource Picker. You will be taken back to the Image Properties Menu.
    4. With your image selected in the Image Properties Menu:
      1. Supply a description of the image in the Alternative Text field.
      2. Choose an alignment.
      3. (Optional) Click on the Advanced tab in the Image Properties Menu and supply a numeric value in the top, bottom, left, and/or right fields to add some spacing around the image.
    5. Click the OK button to save the image's properties and embed the image in your content.
    6. Now that the image is embedded in the editor, drag the corner of the image to resize it to fit within the content.
    7. Your image is now embedded, aligned with text wrapping, and accessible to all visitors!


    Bonus: Here's a < 1 minute video covering the steps described above


    Cheers,

    Alex