Showing results for 
Search instead for 
Did you mean: 
Community Member

Side by Side images on a page

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   

16 Replies
Surveyor II

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)) 

Screenshot_Tiles in a Table_Canvas.png

Tags (2)

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

Tags (1)

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

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.


Explorer II

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 class="col-xs-6">
            <p>[1 img here, remember to set width=100%]</p>

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.

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: 

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!

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!

I dont disagree with anything you said Laura, however none of that was the question above.

The question was about putting simple images side by side.  My concern about using an "advanced" tool like padlet to accomplish this is overkill and not accessible.  Simply using some basic HTML in this situation is much better.

As a graphic designer and creator of infographics, I get it. I teach marketing and by nature create highly visual content, with a lot of transcribing. 

What we NEED to do as educators is put it on those that create infographics (publishers, news outlets) to make those transcripts.  we NEED to put pressure on the companies like Padlet and Spark (Adobe) to make tools that work for all.

I've always struggled with accessibility for complex graphics. I recently found the Poet Image Description Training Tool to be extremely helpful in understanding how to adequately describe images for accessibility to be a valuable resource:

 @rlbrown2 ‌, I just want to point out that when it comes to anything having to do with images, the accessibility issues are enormous and require a lot of attention far and beyond any simple checklist like "alt text" information available or other generic accessibility validating for screen readers. That is not to say that such checking is not important, but it is a tip-of-the-iceberg perspective.

If there is educational information being conveyed in an image, an annotated transcript is required, just like for a video. Take, for example, the slide I just shared in a discussion, which is an elaborate Venn diagram. It would take a full page of text to convey all the information in that image that conveys in words not just the text in the image but the meaningful way that the Venn diagram presents the words in relationships to one another:

Digital #Power-ups: Scaffolds and Hashtags for Student Engagement in Online Discussions 

(I spend time doing transcriptions of infographics, and even then I am mostly just transcribing, not attempting to convey the full range of information being presented in visual form.)

So, while I absolutely understand the need to be aware of what the pros and cons are of specific tools, the enormity of the TRUE task of making information from images accessible is something nobody in education can hope to grapple with across the board for all information in all images; sometimes I get the feeling people think that alt-text gets the job done. For some images, yes; for most images, not so much. It will always be the case that if you have a person in class with a severe vision impairment, it will take more than just a screenreader, alt-text, etc. to make sure they have access to the educational information being conveyed in images. That doesn't mean we shouldn't use images or that we should discount generic accessibility checking... but we need to be ready for the huge effort that really will be required if/when we are working with students who have to get the information from an image without seeing that image: chart, graphs, diagrams -- all of which pack enormous amounts of information into an image, and paraphrasing that information in words takes a lot of work!