How do I add an image to a section that uses the generic section type?
Christine Cahoon Mon 06 Aug 2012 updated: Wed 18 Jan 2023
Upload any images/photos you want to use in Documents (available to you as Administrator). When you do so, ETINU automatically creates a small thumbnail, normal and large image all optimised for the web. Select the link below to see the size of each generated:
Thumbnail image: http://www.etinu.com/etinu/pictures/small/003321.jpg
Normal sized image: http://www.etinu.com/etinu/pictures/normal/003321.jpg
Large image: http://www.etinu.com/etinu/pictures/large/003321.jpg
Also the original image is stored: http://www.etinu.com/etinu/documents/003321.jpg
Now the image is available to use in a generic section (or subsection). To do so:
- hover over the filename in the document list and a mini thumbnail appears to the left of the filename so you can check its the image you are wanting to use
- select the right hand button of the mouse (or select the right hand part of your track pad) and a mini menu will appear
- select Copy link (see first screenshot) and that will save the path to the large image into your machine's clipboard.
Go to the blog: How to add an image to a generic section and follow the instructions to place the image where you want it to be displayed on the page.
2 comments
Christine Cahoon Thu 04 Feb 2016
Please note: if you are using a PC the 'Copy link' menu option that's referred to in this post will be 'Copy Shortcut'.
Christine Cahoon Fri 16 Apr 2021 updated: Wed 18 Jan 2023
IMPORTANT NOTE!
There was an Add Image menu item in the generic editor window, but due to certain browsers not executing it, this option had to be removed. However, it doesn't mean that you can't add an image, it's just not as easy.
Here is what you need to do now:
- as normal, go to Administration > Documents to add the web address of the image you want to use to your machine's clipboard (right-click on the file name and a mini-menu will appear, select Copy Link)
- then go to the page you wish to add the image and select the Edit HTML option in the generic menu
- place the cursor where you want the image to appear and use the img tag:
<img src=“/etinu/pictures/large/003321.jpg” alt=“Demo” class=“center”>
(use class="right" to place the image to the right or class="left" for placing the image on the left, with sufficient spacing around the image). Note: large may not be suitable so you can change the word in the web address to normal or small to display the correct size
- select Submit and Update to make the changes live.