How Do I Upload Image Files to Display on Pages as Images?

Tendenci's Content Management System uses the TinyMCE WYSIWYG Editor to enable you to upload and embed image files on your website's pages, articles, news, events, and other content modules.  This Help File will explain how to upload and embed images inside of content that will display as images on your website.

First we'll talk about uploading images that are stored on your computer and then we'll talk about how to obtain and embed images that are currently stored in the files module on your Tendenci website.

Uploading Images Using the WYSIWYG Editor

Tendenci will allow you to embed the following common image file types:

  • gif
  • jpg
  • png 

We recommend you resize images before uploading and embedding them to keep them under 500 x 500 pixels.  Images larger than that will load more slowly each time a new visitor comes to that page.  That means the image will take longer to display than the rest of the text and can decrease your visitors' online experience. 

**Tendenci's Files Module supports additional image files for uploading and storing, however only the above three file types can be embedded and displayed as the image itself on your website.**

Navigate to the content edit page where you want to upload and embed the image.  Click on the Insert Media wysiwyg icon and a box will pop-up and display any media currently embedded on this specific content page and give you the option to upload new files and images: 

insert-media-wysiwyg-icon-tendenci-content.gif

You can upload multiple files to the same content page.  

Once you have uploaded your image file, you will see options below the file name and url to insert the image or delete the image. 

insert-and-edit-media-popup-box.gif

The "Insert Image" button will embed your image on the page to display visually. (The screenshot above is an image I inserted onto this page.) 

The "Insert Attachment" button will link your image on the page to the file link of where it is stored in your Tendenci Files Management Module, and it will look like this:

Visitors to your site can click on and download the image, but it doesn't display the actual image.  If you'd like, you can click on the image link and see what happens. 

Tendenci Stores and Organizes Your Images

When you upload the image file through the WYSIWYG Editor's "Insert Media" option, Tendenci saves the image in the Files Module and assigns a unique URL for the image that you can navigate to from a web browser to find and download the image.  

You can access and search Files by navigating to your top bar superuser nav menu, hovering over "Content" to drop down the App List, and clicking on "Files":

When you click to go to your Files Module, you will be able to search, add, and edit all the files you've uploaded to your website, including Image Files.  You can also find a list of the Most Viewed files.  

Embed an Existing Image File onto a Content Page

If you need to embed and visually display an image file that is stored in the Files Module onto a new page or other content module, then you have two options:

Use HTML to Embed the Image

Click on the WYSIWYG Editor's HTML icon from the edit page view where you want to add the image: 

html-icon-on-wysiwyg-editor.gif

Then, you'll want to insert the HTML code and the Image File's unique URL to embed the image.  This option requires basic knowledge of HTML.  The sample HTML code you can customize with your image and website information is: 

<p><img title="Image Title" src="/files/example-file-name/"/></p>

If you are familiar with using HTML, you can also add additional stylization including height and width for the image and positioning on the page. 

Download and Upload the Image

If you don't know HTML and have trouble with the example above, then you can alternatively go to the Files Module and download the image to your computer and save it in a temporary folder.

Then navigate to the page you want to embed the image and use the WYSIWYG Editor's "Insert Media" icon to upload and embed the image onto that page.  

You'll get the hang of adding images to your site's content pretty quickly.

Still Looking for an Answer on Tendenci's CMS? 

Request a Help File or Submit a Helpdesk Ticket and we'll retrieve your answer right away! 

upload-media-multiple-images.gif