diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx index c7faea169..f130e5bbd 100644 --- a/src/components/grid/grid.jsx +++ b/src/components/grid/grid.jsx @@ -64,6 +64,7 @@ var Grid = React.createClass({ href={href} title={item.title} src={item.image} + srcDefault={'https://uploads.scratch.mit.edu/galleries/thumbnails/default.png'} owner={item.owner} /> ); diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx index 391c4343c..314061ba0 100644 --- a/src/components/thumbnail/thumbnail.jsx +++ b/src/components/thumbnail/thumbnail.jsx @@ -8,12 +8,20 @@ var Thumbnail = React.createClass({ propTypes: { src: React.PropTypes.string }, + getInitialState: function () { + return { + srcFallback: false, + avatarFallback: false + }; + }, getDefaultProps: function () { return { href: '#', title: 'Project', src: '', + srcDefault: 'https://uploads.scratch.mit.edu/projects/thumbnails/default.png', avatar: '', + avatarDefault: 'https://uploads.scratch.mit.edu/users/avatars/default.png', type: 'project', showLoves: false, showFavorites: false, @@ -24,6 +32,12 @@ var Thumbnail = React.createClass({ alt: '' }; }, + handleSrcError: function () { + this.setState({srcFallback: true}); + }, + handleAvatarError: function () { + this.setState({avatarFallback: true}); + }, render: function () { var classes = classNames( 'thumbnail', @@ -58,7 +72,8 @@ var Thumbnail = React.createClass({
+ title={this.props.remixes + ' remixes'} + > {this.props.remixes}
); @@ -68,19 +83,48 @@ var Thumbnail = React.createClass({
+ title={this.props.views + ' views'} + > {this.props.views}
); } - var imgElement,titleElement,avatarElement; + + var imgElement, titleElement, avatarElement; if (this.props.linkTitle) { - imgElement = - {this.props.alt} - ; - titleElement = - {this.props.title} - ; + if (this.state.srcFallback) { + imgElement = ( + + {this.props.alt} + + ); + } else { + imgElement = ( + + {this.props.alt} + + ); + } + titleElement = ( + + {this.props.title} + + ); } else { imgElement = ; titleElement = this.props.title; @@ -97,10 +141,32 @@ var Thumbnail = React.createClass({ } if (this.props.avatar && this.props.showAvatar) { - avatarElement = - - {this.props.creator} - ; + if (this.state.avatarFallback) { + avatarElement = ( + + {this.props.creator} + + ); + } else { + avatarElement = ( + + {this.props.creator} + + ); + } } return (