Guide

Making Post Images Enlargeable

Background

You want to make images in the posts enlarge when users click on them. It’s easy to set this up using the Champ’s underlying Bootstrap framework and jQuery.

You have the option of having the enlarged image appear in a modal or in a new browser tab.

Here’s how it looks in a modal:

Alternatively, you can configure it so that the image is opened up in a new tab.

Create a code snippet in your Shopify theme

In order to add this functionality, we’ll add a code snippet to your Shopify theme. This snippet will be automatically inserted by Champ when your forum pages are rendered.

Important: When you use a new theme, remember to copy over your custom snippets! Otherwise things won’t work as you expect them to.

Go to your current Shopify theme, and click on Add a new snippet:

A popup will show up. Call the file “champ-below-footer”.

Next, paste one of the following code into this snippet file. The one you choose will depend on whether you want the image to show in a popup modal or in a new tab.

If you want the image to show in a new browser tab…

If you want the image to show in a popup modal…