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   

[pradeep_mohite · Accepted solution]

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

[jbuchholz]

Merri,

Have you tried a two column table? You can hide the border so it looks like succinct images in a row.

Jesse

[ddumonde]

Jesse, I'm sure you meant well, but please, please, please, don't EVER suggest using tables for layout. Tables should be used for data only, and must have a caption and row and/or column headers. Test it with the Canvas accessibility checker and you'll see. The most accessible solution is to use CSS floats. CSS Flexbox or CSS Grid might also be useful, but I haven't tested them in Canvas.

[robotcars]

Tables aren't the best use of responsive design for variable screen sizes...

Images get stacked if you break the line (br, div, p)

Depending on the size of the images, they can be placed on the same line.

  

You can place them in a container and float, if the Screen/ViewPort can place them on the same line they will be. If not, they will break, which is responsive, this is preferred. If you force this with a table, it's more likely that the content will be cut off, not on the next line. Unfortunately, the Community is not a great place to demonstrate this, because the width of the content area is fixed. I've supplied an example below.

Note the float:left on images 1 and 2, but not 3. 

<div>
<img src="http://via.placeholder.com/300x150" style="float: left;" />
<img src="http://via.placeholder.com/300x150" style="float: left;" />
<img src="http://via.placeholder.com/300x150" />
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The last one doesn't need any float, if you do, items after the image will start getting pulled next to the image as well. 

Here are 3 images that can share the same line in the content area.

For your specific example, to float something to the right...

The easiest way is to the place it before the content on the left, and float it right.

<div>
<img src="http://via.placeholder.com/150x150" style="float: right;" />
<img src="http://via.placeholder.com/150x150" /><br />
<img src="http://via.placeholder.com/150x150" /><br />
<img src="http://via.placeholder.com/150x150" />
</div>‍‍‍‍‍‍‍‍‍‍‍‍

This explanation is very slim, but it should help you get started. To learn more you can try Googling HTML/CSS layouts and positioning elements on the page.

[rlbrown21]

This is exactly what I do and was going to suggest

[ellenbcutler]

I have mentioned this elsewhere, but have you considered something like Padlet.com? I use images in all kinds of ways. On a padlet wall (with a link on your course module) you can arrange images pretty well any way you want with or without additional text. There are grids, shelves, free form. I gave in and bought the subscription to get better access because I am using Padlet so frequently, but it is not onerously expensive. If you want a visual, here is the image gallery for my second class arranged in grid. https://padlet.com/ebcutler/primitivism  Here is the reading assignments padlet for the same class arranged in shelves. https://padlet.com/ebcutler/primitivismrdgs (I often have another shelf for videos.)

Overall, I found this to be not particularly labor intensive. The images are all located on my own computer. You don't have top got through the business of putting them in a Canvas file.

Happy to chat with you if you have  questions. Cheers.

[rlbrown21]

in higher ed we have issues with Padlet and it being accessible to screen readers.  Just keep that in mind as well

[laurakgibbs]

 @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!

[ddumonde]

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: http://diagramcenter.org/making-images-accessible.html#poet.

[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!

[rlbrown21]

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.

[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!

[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.

[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.

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