Side by Side images on a page

[pembertonm]

I have been searching for 3 hours on how to add side by side images to my page

One the left side I have 5 images

On the right side I would like to put one image   

[laurakgibbs]

Thank you for this,  @delester ‌: this is great, and I had not seen it before. I'm going to go share at Twitter right now. Excellent!

[laurakgibbs]

AGREED! And Padlet is working on it, not surprisingly -- since their primary audience is educators, they are very aware of the importance of accessibility. Here is their statement, with some links:

https://padlet.com/about/accessibility 

I raised the points I did because I often see the question of accessibility reduced to a checklist of tools and/or practices (like alt-text), which are really just the starting point: real accessibility is going to depend on a lot of heavy lifting done by teachers, no matter what tools we are using. It's not easy, but it is absolutely important, and I am grateful to the students I've had over the years who have helped me to improve accessibility in my courses. Every time there's been an accommodation for a specific student's needs, it's ended up benefiting the class as a whole too!

[jdick1]

If you're looking for a responsive solution, this is how I'd do it:

    <div class="grid-row">
        <div class="col-xs-6">
            <p>[1 img here, remember to set width=100%]</p>
            <p>[2 img here, remember to set width=100%]</p>
            <p>[3 img here, remember to set width=100%]</p>
            <p>[4 img here, remember to set width=100%]</p>
            <p>[5 img here, remember to set width=100%]</p>
        </div>
        
        <div class="col-xs-6">
            <p>[1 img here, remember to set width=100%]</p>
        </div>
    </div>‍‍‍‍‍‍‍‍‍‍‍‍‍

If layout is important to you, I highly recommend learning Flexbox. While it does require handcoding, the aesthetic payoff is great if you have the time/bandwidth.  @MattHanes ‌ has a nice intro post here.

A note on the code above: I used <col-xs-6> and not <col-xs-12 col-sm-6> for both columns to force it into two columns. The (possible) benefit of doing it this way instead of a more straight-ahead dual column layout is that it will resize the images with screen size...but it also depends on the size/shape of the images relative to each other.

[uwe_zimmermann]

Yes, I assume accessibility can be an issue - but it also has to depend on the field of study. In math, science and engineering images and graphs are unavoidable and not just a graphical addition to text.

I found this discussion from last year today, because I also thought that I had missed something from the rich-text-editor - even though I knew how to hard-code it in HTML.

Just to give you an example of an image which I am dealing with in one of my courses the following shows settings and results from a computer simulation of an electrical circuit. I will not bother to try do describe the image contents in any means - being able to access the meaning of the curves from an image is a non-negotiable capability in engineering education. These images are just an example and taken out of context here, but not all images we are adding ot pages in Canvas are flowcharts or Venn diagrams.

[kyh802]

I couldn't manage to get this to work. Not sure what I'm doing wrong, though

[pradeep_mohite · Accepted solution]

how to disable right click or disable copy data from my course 

[mvanmatre · Accepted solution]

Hi Pembertonm,

No code expert here but have you tried just making a table and inputting the images where you want them to be. Then, in the table properties changing the border to '0' so it's not visual on the screen. I do find that it's not perfectly level but does OK. (The image might seem peachy - Screen Shader - Accessibility tool (free))