Use cloudinary

web/components/Gallery.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {galleryImageUrl} from '../lib/helpers';
 
 export default class Gallery extends React.Component {
   onPrevClick (e) {
@@ -24,7 +25,7 @@ export default class Gallery extends React.Component {
 
     return (
       <div className="ld-image-container">
-        <img src={images[imageIndex]}></img>
+        <img src={galleryImageUrl(images[imageIndex])}></img>
         {showPrev ?
           <div
             className='prev-button'

web/components/Listings.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
-import {formatPrice} from '../lib/helpers';
+import {formatPrice, listingImageUrl} from '../lib/helpers';
 import {loadListing} from '../lib/api';
 
 export default class Listings extends React.Component {
@@ -22,8 +22,6 @@ export default class Listings extends React.Component {
   }
 
   onListingClick(id) {
-
-
     loadListing(id).then(l => l.text()).then(l => {
       this.props.dispatch({type: 'UPDATE_ROUTE', action: {
         toDispatch: {
@@ -79,7 +77,7 @@ export default class Listings extends React.Component {
           className="property-list-item"
           onClick={this.onListingClick.bind(this, l._id)}>
           <div className="pli-image">
-            <img src={images[0]} alt=""></img>
+            <img src={listingImageUrl(images[0])} alt=""></img>
           </div>
           <div className="pli-details">
             <div className="price">{formatPrice(l.price)}</div>

web/lib/helpers.js

@@ -12,3 +12,11 @@ export const formatFilterNumber = (num) => {
   }
   return num;
 }
+
+export const galleryImageUrl = (img) =>
+  img && img.replace("upload/", "upload/w_500/")
+
+
+export const listingImageUrl = (img) =>
+  img && img.replace("upload/", "upload/w_205/")
+