scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-03 12:27:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fall back to default image if thumb not found

Browse source 
This incorporates a fallback image into the thumbnail component for all of project, studio and avatar thumbnails using the `onerror` property of img elements (which is supported across all browsers).

/cc @thisandagain @rschamp
This commit is contained in:
Matthew Taylor 2017-11-29 08:03:48 -05:00
parent be7e83db78
commit 02da6f62a6
2 changed files with 80 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/grid/grid.jsx
View file

@ -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}
/>
);

88
src/components/thumbnail/thumbnail.jsx
View file

@ -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({
<div
key="remixes"
className="thumbnail-remixes"
title={this.props.remixes + ' remixes'}>
title={this.props.remixes + ' remixes'}
>
{this.props.remixes}
</div>
);
@ -68,19 +83,48 @@ var Thumbnail = React.createClass({
<div
key="views"
className="thumbnail-views"
title={this.props.views + ' views'}>
title={this.props.views + ' views'}
>
{this.props.views}
</div>
);
}
var imgElement, titleElement, avatarElement;
if (this.props.linkTitle) {
imgElement = <a className="thumbnail-image" href={this.props.href} key="imgElement">
<img src={this.props.src} alt={this.props.alt} />
</a>;
titleElement = <a href={this.props.href} key="titleElement">
if (this.state.srcFallback) {
imgElement = (
<a
className="thumbnail-image"
href={this.props.href}
key="imgElement"
>
<img
alt={this.props.alt}
src={this.props.srcDefault}
/>
</a>
);
} else {
imgElement = (
<a
className="thumbnail-image"
href={this.props.href}
key="imgElement"
>
<img
alt={this.props.alt}
src={this.props.src}
onError={this.handleSrcError}
/>
</a>
);
}
titleElement = (
<a href={this.props.href} key="titleElement">
{this.props.title}
</a>;
</a>
);
} else {
imgElement = <img src={this.props.src} />;
titleElement = this.props.title;
@ -97,10 +141,32 @@ var Thumbnail = React.createClass({
}
if (this.props.avatar && this.props.showAvatar) {
avatarElement =
<a className="creator-image" href={'/users/' + this.props.creator + '/'}>
<img src={this.props.avatar} alt={this.props.creator} />
</a>;
if (this.state.avatarFallback) {
avatarElement = (
<a
className="creator-image"
href={'/users/' + this.props.creator + '/'}
>
<img
alt={this.props.creator}
src={this.props.avatarDefault}
/>
</a>
);
} else {
avatarElement = (
<a
className="creator-image"
href={'/users/' + this.props.creator + '/'}
>
<img
alt={this.props.creator}
src={this.props.avatar}
onError={this.handleAvatarError}
/>
</a>
);
}
}
return (
<div className={classes} >