Adding larger or higher quality images in your Class List Widget


If the images in your Class List Widget are too small or blurry, you can use this workaround to get clear images on your website.

Step 1

  • FTP (or upload) the desired images to either your website or an image hosting website, such as imgur.


Step 2

  • Copy the "Image URL" to create an HTML <img> element. Don't worry, this step is easy. Paste your Image URL into the space below (do not delete the quotes)
<img src="YOUR IMAGE URL"/>


<img src=""/>


Step 3

  • Login to MINDBODY > Home > Services & Pricing > select a Service Category > click on the name of the class/enrollment
  • In the "Description" section, click on "HTML"



Step 4

  • Copy and paste the full img tag above and click "Update" (you can add a class/enrollment description after the image)
  • Then in the "Edit a Class"/"Edit Enrollment Description" page, click "Save"
  • Note: If you already have an image uploaded into the class/enrollment photo area, you will need to delete it.




Step 5

  • First, log into HealCode
  • Click Widgets at the top
  • Click on the Title of the Class List Widget
  • Scroll to the "Custom CSS" text box in the Appearance section
  • Insert the following code into the Custom CSS text box (adjust the size as you see fit) and click Save at the bottom of the page
.class_description img {
height: 200px;
width: auto;



Have more questions? Submit a request


Powered by Zendesk