Champ › Guides › Image uploads

Image uploads

Members can attach images and PDFs to posts once you connect a Cloudinary account. The uploads go to your Cloudinary, not to us, so you own the files and control the storage.

Why Cloudinary#

Image hosting has real costs and real abuse potential, and merchants differ enormously in how much of either they want. Rather than bundle a quota nobody agrees with, Champ uses your own Cloudinary account: you set the limits, you see the usage, and the files remain yours if you ever leave.

Cloudinary's free tier is generous and caps uploads at 10 MB per file, which is more than enough for forum photographs.

Setting it up#

  1. Create a free account at cloudinary.com.
  2. From the Cloudinary dashboard, copy your Cloud name, API key and API secret.
  3. In Champ, go to Settings → Image uploads (Cloudinary) and paste all three in.
  4. Save.

Your key and secret are stored encrypted. Leaving the fields blank keeps uploads switched off.

An upload control now appears for members writing a post.

The settings#

Client-side scaling — max width and max height. Images are resized in the member's browser before upload. Defaults are 1000 × 1000. Lowering them saves your Cloudinary quota and speeds up posting on phones; raising them preserves detail, which matters if your community shares photographs of work.

PDF thumbnail size transformation. A Cloudinary transformation string — the default is c_fit,h_300,w_300 — controlling the preview generated for uploaded PDFs. If you do not know Cloudinary's transformation syntax, leave this alone; a wrong value breaks uploads.

Unsigned upload preset name. Leave it blank to use signed uploads, which is the default and the more secure option. If uploads fail with a signature error, create an unsigned upload preset in Cloudinary and enter its name here.

Localization. A JSON block overriding the upload widget's text, for running the widget in another language or rewording it.

Making post images enlargeable#

Uploaded images display at post width. To let members click one and see it full size, add a little custom CSS and a lightbox, or simply ensure images link to their full-size Cloudinary URL.

If your theme already ships a lightbox, the simplest approach is to make it pick up forum images too, by extending its selector to include the forum's post image class. Inspect a post image to find the class — the forum's class names are stable, so a selector you write today will still match next year.

Keeping uploads under control#

  • Set the client-side maximums deliberately. They are your main lever on storage cost.
  • Watch Cloudinary's usage page for the first month after enabling uploads.
  • Combine uploads with approval on public forums. Image uploads on an unmoderated public forum attract exactly the content you would expect.
  • Consider restricting uploads to members-only forums, where sign-in is already a filter.

Troubleshooting#

Uploads fail immediately. Usually a wrong cloud name or a typo in the API key. Re-copy all three from Cloudinary.

Signature errors. Switch to an unsigned upload preset as described above.

Large files rejected. Cloudinary's free plan caps at 10 MB per file. Lower your client-side scaling maximums so images are shrunk before they hit that limit.

PDF previews are broken or missing. Almost always the transformation string. Reset it to c_fit,h_300,w_300.

Next#