Champ › Guides › Image uploads

Image uploads

Who needs this: Only stores that want members to add pictures or PDFs to their posts. Uploads are off until you set them up.

Members can attach images and PDFs to their posts once you connect Cloudinary. Cloudinary is an image-hosting service with a free plan. The files go to your Cloudinary account, not to us. You own them and you control the storage.

Why Champ uses your own Cloudinary account#

Storing images costs money, and uploads can be abused. Stores want very different amounts of both. So Champ does not set one limit for everyone. With your own Cloudinary account:

  • You set the limits.
  • You see how much you use.
  • The files stay yours if you ever leave Champ.

Cloudinary's free plan allows files up to 10 MB each. That is plenty for forum photos.

Setting up image uploads#

  1. Create a free account at cloudinary.com.
  2. In the Cloudinary dashboard, copy your Cloud name, API key and API secret.
  3. In the Champ dashboard, open Settings.
  4. In the Image uploads (Cloudinary) section, paste them into Cloud name, API key and API secret.
  5. Click Save.

Members now see an upload button when they write a post.

Champ stores your key and secret encrypted. If you leave the fields blank, uploads stay off.

The other upload settings#

You can leave all of these as they are.

Client side scaling — max width and max height. Images are shrunk on the member's phone or computer before they upload. The default is 1000 × 1000 pixels. Lower numbers use less of your Cloudinary storage and upload faster on phones. Higher numbers keep more detail, which helps if members share photos of their work.

PDF thumbnail size transformation. This controls the small preview image for uploaded PDFs. The default is c_fit,h_300,w_300, written in Cloudinary's own code. If you do not know that code, leave this alone. A wrong value breaks uploads.

Unsigned upload preset name. Leave this blank. Blank is the default and the more secure option. Only if uploads fail with a "signature" error: create an unsigned upload preset in Cloudinary and type its name here.

Localization. Changes the words on the upload window, for example to show it in another language. It is written as JSON (a simple text format for settings).

Letting members click an image to see it full size#

Uploaded images show at the width of the post. To let members click an image and see it full size, you need a lightbox (a pop-up image viewer). Or you can make each image link to its full-size Cloudinary address.

If your Shopify theme already has a lightbox, the simplest fix is to make it include forum images too. Add the forum's post image class to your lightbox's selector, using a little custom CSS or theme code. To find the class, right-click a post image and choose Inspect. Champ does not change these class names, so your change will keep working.

Keeping uploads under control#

  • Choose your maximum width and height on purpose. They are the main way to control storage cost.
  • Check Cloudinary's usage page during the first month after you turn on uploads.
  • Turn on approval for public forums. Uploads on a public forum with no approval attract exactly the pictures you would fear.

Fixing upload problems#

Uploads fail straight away. Usually the cloud name is wrong, or the API key has a typo. Copy all three values from Cloudinary again.

You see a "signature" error. Use an unsigned upload preset, as described above.

Large files are rejected. Cloudinary's free plan allows up to 10 MB per file. Lower your max width and max height so images are shrunk below that before upload.

PDF previews are broken or missing. This is almost always the PDF thumbnail setting. Set it back to c_fit,h_300,w_300.

Next#