Winding Down Chingu

Today I worked on the Chingu project…we’re winding down as the final due date is Tuesday! I mostly worked on making the page mobile-friendly.

Image Resizing

Our images are being sourced from many places around the web, and they’re all different aspect ratios. We wanted a way to have a uniform image size, while maintaining the aspect ratio of the original source image. I solved this by moving the height/width from the img element to its container div, and then making the image keep its ratio with object-fit: cover:

Before:

render() {
  return (
    <div className={['clearfix', this.props.position].join(' ') }>
      <div className='image'>
        <img src={this.props.imageUrl} width={450} height={320}/>
      </div>
      <div className='info'>
         <h3 className="headline">{this.props.headline}</h3>
         <p className ="content">{this.props.content}</p>
         <a className="button" href={this.props.linkUrl}>Read More</a>
      </div>
    </div>
  );
}

After:

render() {
  return (
    <div className={['clearfix', this.props.position].join(' ') }>
      <div className='image'>
        <img src={this.props.imageUrl} className="image-fit"/>
      </div>
      <div className='info'>
         <h3 className="headline">{this.props.headline}</h3>
         <p className ="content">{this.props.content}</p>
         <a className="button" href={this.props.linkUrl}>Read More</a>
      </div>
    </div>
  );
}

.image {
  height: 320px;
  max-width: 450px;
}

.bottom-image {
  height: 180px;
  max-width: 280px;
}

.image-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

To make this responsive I added a media query to slightly shrink the size in smaller devices.

Adding Multiple Class Names to Elements in React

While styling I also had to create some classes, and add them to existing elements in the site. Not so straightforward, as they were elements rendered by React! Adding a single class name is easy enough:

<img src={this.props.imageUrl} className="image-fit"/>

To add multiple class names, I created an array of the class names and then used JS to join them:

<img src={this.props.imageUrl} className={["image-fit", "image-style"].join(' ')}/>