Merge pull request #4507 from chrisgarrity/issue/3632-localize-tutorials

Initial version of translated tutorial gifs

src/components/cards/cards.jsx

@@ -12,6 +12,7 @@ import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import closeIcon from './icon--close.svg';
 
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
+import {translateImage} from '../../lib/libraries/decks/translate-image.js';
 
 const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
     <div className={styles.headerButtons}>
@@ -275,7 +276,7 @@ const Cards = props => {
                                 />
                             ) : (
                                 <ImageStep
-                                    image={steps[step].image}
+                                    image={translateImage(steps[step].image, locale)}
                                     title={steps[step].title}
                                 />
                             )

src/containers/cards.jsx

@@ -1,4 +1,6 @@
 import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import {
     activateDeck,
@@ -15,6 +17,29 @@ import {
 } from '../reducers/modals';
 
 import CardsComponent from '../components/cards/cards.jsx';
+import {loadImageData} from '../lib/libraries/decks/translate-image.js';
+
+class Cards extends React.Component {
+    componentDidMount () {
+        if (this.props.locale !== 'en') {
+            loadImageData(this.props.locale);
+        }
+    }
+    componentDidUpdate (prevProps) {
+        if (this.props.locale !== prevProps.locale) {
+            loadImageData(this.props.locale);
+        }
+    }
+    render () {
+        return (
+            <CardsComponent {...this.props} />
+        );
+    }
+}
+
+Cards.propTypes = {
+    locale: PropTypes.string.isRequired
+};
 
 const mapStateToProps = state => ({
     visible: state.scratchGui.cards.visible,
@@ -45,4 +70,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(CardsComponent);
+)(Cards);

src/lib/libraries/decks/en-steps.js

@@ -0,0 +1,188 @@
+// Intro
+import introMove from './steps/intro-move.en.gif';
+import introSayHello from './steps/intro-say-hello.en.gif';
+
+// Text to Speech
+import speechAddExtension from './steps/speech-add-extension.en.gif';
+import speechSaySomething from './steps/speech-say-something.en.gif';
+import speechSetVoice from './steps/speech-set-voice.en.gif';
+import speechMoveAround from './steps/speech-move-around.en.gif';
+import speechAddBackdrop from './steps/speech-add-backdrop.en.gif';
+import speechAddSprite from './steps/speech-add-sprite.en.gif';
+import speechSong from './steps/speech-song.en.gif';
+import speechChangeColor from './steps/speech-change-color.en.gif';
+import speechSpin from './steps/speech-spin.en.gif';
+import speechGrowShrink from './steps/speech-grow-shrink.en.gif';
+
+// Cartoon Network
+import cnShowCharacter from './steps/cn-show-character.en.gif';
+import cnSay from './steps/cn-say.en.gif';
+import cnGlide from './steps/cn-glide.en.gif';
+import cnPickSprite from './steps/cn-pick-sprite.en.gif';
+import cnCollect from './steps/cn-collect.en.gif';
+import cnVariable from './steps/cn-variable.en.gif';
+import cnScore from './steps/cn-score.en.gif';
+import cnBackdrop from './steps/cn-backdrop.en.gif';
+
+// Add sprite
+import addSprite from './steps/add-sprite.en.gif';
+
+// Animate a name
+import namePickLetter from './steps/name-pick-letter.en.gif';
+import namePlaySound from './steps/name-play-sound.en.gif';
+import namePickLetter2 from './steps/name-pick-letter2.en.gif';
+import nameChangeColor from './steps/name-change-color.en.gif';
+import nameSpin from './steps/name-spin.en.gif';
+import nameGrow from './steps/name-grow.en.gif';
+
+// Make-Music
+import musicPickInstrument from './steps/music-pick-instrument.en.gif';
+import musicPlaySound from './steps/music-play-sound.en.gif';
+import musicMakeSong from './steps/music-make-song.en.gif';
+import musicMakeBeat from './steps/music-make-beat.en.gif';
+import musicMakeBeatbox from './steps/music-make-beatbox.en.gif';
+
+// Chase-Game
+import chaseGameAddBackdrop from './steps/chase-game-add-backdrop.en.gif';
+import chaseGameAddSprite1 from './steps/chase-game-add-sprite1.en.gif';
+import chaseGameRightLeft from './steps/chase-game-right-left.en.gif';
+import chaseGameUpDown from './steps/chase-game-up-down.en.gif';
+import chaseGameAddSprite2 from './steps/chase-game-add-sprite2.en.gif';
+import chaseGameMoveRandomly from './steps/chase-game-move-randomly.en.gif';
+import chaseGamePlaySound from './steps/chase-game-play-sound.en.gif';
+import chaseGameAddVariable from './steps/chase-game-add-variable.en.gif';
+import chaseGameChangeScore from './steps/chase-game-change-score.en.gif';
+
+// Clicker-Game (Pop Game)
+import popGamePickSprite from './steps/pop-game-pick-sprite.en.gif';
+import popGamePlaySound from './steps/pop-game-play-sound.en.gif';
+import popGameAddScore from './steps/pop-game-add-score.en.gif';
+import popGameChangeScore from './steps/pop-game-change-score.en.gif';
+import popGameRandomPosition from './steps/pop-game-random-position.en.gif';
+import popGameChangeColor from './steps/pop-game-change-color.en.gif';
+import popGameResetScore from './steps/pop-game-reset-score.en.gif';
+
+// Animate A Character
+import animateCharPickBackdrop from './steps/animate-char-pick-backdrop.en.gif';
+import animateCharPickSprite from './steps/animate-char-pick-sprite.en.gif';
+import animateCharSaySomething from './steps/animate-char-say-something.en.gif';
+import animateCharAddSound from './steps/animate-char-add-sound.en.gif';
+import animateCharTalk from './steps/animate-char-talk.en.gif';
+import animateCharMove from './steps/animate-char-move.en.gif';
+import animateCharJump from './steps/animate-char-jump.en.gif';
+import animateCharChangeColor from './steps/animate-char-change-color.en.gif';
+
+// Tell A Story
+import storyPickBackdrop from './steps/story-pick-backdrop.en.gif';
+import storyPickSprite from './steps/story-pick-sprite.en.gif';
+import storySaySomething from './steps/story-say-something.en.gif';
+import storyPickSprite2 from './steps/story-pick-sprite2.en.gif';
+import storyFlip from './steps/story-flip.en.gif';
+import storyConversation from './steps/story-conversation.en.gif';
+import storyPickBackdrop2 from './steps/story-pick-backdrop2.en.gif';
+import storySwitchBackdrop from './steps/story-switch-backdrop.en.gif';
+import storyHideCharacter from './steps/story-hide-character.en.gif';
+import storyShowCharacter from './steps/story-show-character.en.gif';
+
+// Video Sensing
+import videoAddExtension from './steps/video-add-extension.en.gif';
+import videoPet from './steps/video-pet.en.gif';
+import videoAnimate from './steps/video-animate.en.gif';
+import videoPop from './steps/video-pop.en.gif';
+
+const enImages = {
+    // Intro
+    introMove: introMove,
+    introSayHello: introSayHello,
+
+    // Text to Speech
+    speechAddExtension: speechAddExtension,
+    speechSaySomething: speechSaySomething,
+    speechSetVoice: speechSetVoice,
+    speechMoveAround: speechMoveAround,
+    speechAddBackdrop: speechAddBackdrop,
+    speechAddSprite: speechAddSprite,
+    speechSong: speechSong,
+    speechChangeColor: speechChangeColor,
+    speechSpin: speechSpin,
+    speechGrowShrink: speechGrowShrink,
+
+    // Cartoon Network
+    cnShowCharacter: cnShowCharacter,
+    cnSay: cnSay,
+    cnGlide: cnGlide,
+    cnPickSprite: cnPickSprite,
+    cnCollect: cnCollect,
+    cnVariable: cnVariable,
+    cnScore: cnScore,
+    cnBackdrop: cnBackdrop,
+
+    // Add sprite
+    addSprite: addSprite,
+
+    // Animate a name
+    namePickLetter: namePickLetter,
+    namePlaySound: namePlaySound,
+    namePickLetter2: namePickLetter2,
+    nameChangeColor: nameChangeColor,
+    nameSpin: nameSpin,
+    nameGrow: nameGrow,
+
+    // Make-Music
+    musicPickInstrument: musicPickInstrument,
+    musicPlaySound: musicPlaySound,
+    musicMakeSong: musicMakeSong,
+    musicMakeBeat: musicMakeBeat,
+    musicMakeBeatbox: musicMakeBeatbox,
+
+    // Chase-Game
+    chaseGameAddBackdrop: chaseGameAddBackdrop,
+    chaseGameAddSprite1: chaseGameAddSprite1,
+    chaseGameRightLeft: chaseGameRightLeft,
+    chaseGameUpDown: chaseGameUpDown,
+    chaseGameAddSprite2: chaseGameAddSprite2,
+    chaseGameMoveRandomly: chaseGameMoveRandomly,
+    chaseGamePlaySound: chaseGamePlaySound,
+    chaseGameAddVariable: chaseGameAddVariable,
+    chaseGameChangeScore: chaseGameChangeScore,
+
+    // Make-A-Pop/Clicker Game
+    popGamePickSprite: popGamePickSprite,
+    popGamePlaySound: popGamePlaySound,
+    popGameAddScore: popGameAddScore,
+    popGameChangeScore: popGameChangeScore,
+    popGameRandomPosition: popGameRandomPosition,
+    popGameChangeColor: popGameChangeColor,
+    popGameResetScore: popGameResetScore,
+
+    // Animate A Character
+    animateCharPickBackdrop: animateCharPickBackdrop,
+    animateCharPickSprite: animateCharPickSprite,
+    animateCharSaySomething: animateCharSaySomething,
+    animateCharAddSound: animateCharAddSound,
+    animateCharTalk: animateCharTalk,
+    animateCharMove: animateCharMove,
+    animateCharJump: animateCharJump,
+    animateCharChangeColor: animateCharChangeColor,
+
+    // Tell A Story
+    storyPickBackdrop: storyPickBackdrop,
+    storyPickSprite: storyPickSprite,
+    storySaySomething: storySaySomething,
+    storyPickSprite2: storyPickSprite2,
+    storyFlip: storyFlip,
+    storyConversation: storyConversation,
+    storyPickBackdrop2: storyPickBackdrop2,
+    storySwitchBackdrop: storySwitchBackdrop,
+    storyHideCharacter: storyHideCharacter,
+    storyShowCharacter: storyShowCharacter,
+
+    // Video Sensing
+    videoAddExtension: videoAddExtension,
+    videoPet: videoPet,
+    videoAnimate: videoAnimate,
+    videoPop: videoPop
+
+};
+
+export {enImages};

src/lib/libraries/decks/es-steps.js

@@ -0,0 +1,188 @@
+// Intro
+import introMove from './steps/intro-move.es.gif';
+import introSayHello from './steps/intro-say-hello.es.gif';
+
+// Text to Speech
+// import speechAddExtension from './steps/speech-add-extension.es.gif';
+// import speechSaySomething from './steps/speech-say-something.es.gif';
+// import speechSetVoice from './steps/speech-set-voice.es.gif';
+// import speechMoveAround from './steps/speech-move-around.es.gif';
+// import speechAddBackdrop from './steps/speech-add-backdrop.es.gif';
+// import speechAddSprite from './steps/speech-add-sprite.es.gif';
+// import speechSong from './steps/speech-song.es.gif';
+// import speechChangeColor from './steps/speech-change-color.es.gif';
+// import speechSpin from './steps/speech-spin.es.gif';
+// import speechGrowShrink from './steps/speech-grow-shrink.es.gif';
+//
+// // Cartoon Network
+// import cnShowCharacter from './steps/cn-show-character.es.gif';
+// import cnSay from './steps/cn-say.es.gif';
+// import cnGlide from './steps/cn-glide.es.gif';
+// import cnPickSprite from './steps/cn-pick-sprite.es.gif';
+// import cnCollect from './steps/cn-collect.es.gif';
+// import cnVariable from './steps/cn-variable.es.gif';
+// import cnScore from './steps/cn-score.es.gif';
+// import cnBackdrop from './steps/cn-backdrop.es.gif';
+
+// Add sprite
+import addSprite from './steps/add-sprite.es.gif';
+
+// Animate a name
+import namePickLetter from './steps/name-pick-letter.es.gif';
+import namePlaySound from './steps/name-play-sound.es.gif';
+import namePickLetter2 from './steps/name-pick-letter2.es.gif';
+import nameChangeColor from './steps/name-change-color.es.gif';
+import nameSpin from './steps/name-spin.es.gif';
+import nameGrow from './steps/name-grow.es.gif';
+
+// Make-Music
+import musicPickInstrument from './steps/music-pick-instrument.es.gif';
+import musicPlaySound from './steps/music-play-sound.es.gif';
+import musicMakeSong from './steps/music-make-song.es.gif';
+import musicMakeBeat from './steps/music-make-beat.es.gif';
+import musicMakeBeatbox from './steps/music-make-beatbox.es.gif';
+
+// Chase-Game
+import chaseGameAddBackdrop from './steps/chase-game-add-backdrop.es.gif';
+import chaseGameAddSprite1 from './steps/chase-game-add-sprite1.es.gif';
+import chaseGameRightLeft from './steps/chase-game-right-left.es.gif';
+import chaseGameUpDown from './steps/chase-game-up-down.es.gif';
+import chaseGameAddSprite2 from './steps/chase-game-add-sprite2.es.gif';
+import chaseGameMoveRandomly from './steps/chase-game-move-randomly.es.gif';
+import chaseGamePlaySound from './steps/chase-game-play-sound.es.gif';
+import chaseGameAddVariable from './steps/chase-game-add-variable.es.gif';
+import chaseGameChangeScore from './steps/chase-game-change-score.es.gif';
+
+// Clicker-Game (Pop Game)
+import popGamePickSprite from './steps/pop-game-pick-sprite.es.gif';
+import popGamePlaySound from './steps/pop-game-play-sound.es.gif';
+import popGameAddScore from './steps/pop-game-add-score.es.gif';
+import popGameChangeScore from './steps/pop-game-change-score.es.gif';
+import popGameRandomPosition from './steps/pop-game-random-position.es.gif';
+import popGameChangeColor from './steps/pop-game-change-color.es.gif';
+import popGameResetScore from './steps/pop-game-reset-score.es.gif';
+
+// Animate A Character
+import animateCharPickBackdrop from './steps/animate-char-pick-backdrop.es.gif';
+import animateCharPickSprite from './steps/animate-char-pick-sprite.es.gif';
+import animateCharSaySomething from './steps/animate-char-say-something.es.gif';
+import animateCharAddSound from './steps/animate-char-add-sound.es.gif';
+import animateCharTalk from './steps/animate-char-talk.es.gif';
+import animateCharMove from './steps/animate-char-move.es.gif';
+import animateCharJump from './steps/animate-char-jump.es.gif';
+import animateCharChangeColor from './steps/animate-char-change-color.es.gif';
+
+// Tell A Story
+import storyPickBackdrop from './steps/story-pick-backdrop.es.gif';
+import storyPickSprite from './steps/story-pick-sprite.es.gif';
+import storySaySomething from './steps/story-say-something.es.gif';
+import storyPickSprite2 from './steps/story-pick-sprite2.es.gif';
+import storyFlip from './steps/story-flip.es.gif';
+import storyConversation from './steps/story-conversation.es.gif';
+import storyPickBackdrop2 from './steps/story-pick-backdrop2.es.gif';
+import storySwitchBackdrop from './steps/story-switch-backdrop.es.gif';
+import storyHideCharacter from './steps/story-hide-character.es.gif';
+import storyShowCharacter from './steps/story-show-character.es.gif';
+
+// Video Sensing
+import videoAddExtension from './steps/video-add-extension.es.gif';
+import videoPet from './steps/video-pet.es.gif';
+import videoAnimate from './steps/video-animate.es.gif';
+import videoPop from './steps/video-pop.es.gif';
+
+const esImages = {
+    // Intro
+    introMove: introMove,
+    introSayHello: introSayHello,
+
+    // // Text to Speech
+    // speechAddExtension: speechAddExtension,
+    // speechSaySomething: speechSaySomething,
+    // speechSetVoice: speechSetVoice,
+    // speechMoveAround: speechMoveAround,
+    // speechAddBackdrop: speechAddBackdrop,
+    // speechAddSprite: speechAddSprite,
+    // speechSong: speechSong,
+    // speechChangeColor: speechChangeColor,
+    // speechSpin: speechSpin,
+    // speechGrowShrink: speechGrowShrink,
+    //
+    // // Cartoon Network
+    // cnShowCharacter: cnShowCharacter,
+    // cnSay: cnSay,
+    // cnGlide: cnGlide,
+    // cnPickSprite: cnPickSprite,
+    // cnCollect: cnCollect,
+    // cnVariable: cnVariable,
+    // cnScore: cnScore,
+    // cnBackdrop: cnBackdrop,
+
+    // Add sprite
+    addSprite: addSprite,
+
+    // Animate a name
+    namePickLetter: namePickLetter,
+    namePlaySound: namePlaySound,
+    namePickLetter2: namePickLetter2,
+    nameChangeColor: nameChangeColor,
+    nameSpin: nameSpin,
+    nameGrow: nameGrow,
+
+    // Make-Music
+    musicPickInstrument: musicPickInstrument,
+    musicPlaySound: musicPlaySound,
+    musicMakeSong: musicMakeSong,
+    musicMakeBeat: musicMakeBeat,
+    musicMakeBeatbox: musicMakeBeatbox,
+
+    // Chase-Game
+    chaseGameAddBackdrop: chaseGameAddBackdrop,
+    chaseGameAddSprite1: chaseGameAddSprite1,
+    chaseGameRightLeft: chaseGameRightLeft,
+    chaseGameUpDown: chaseGameUpDown,
+    chaseGameAddSprite2: chaseGameAddSprite2,
+    chaseGameMoveRandomly: chaseGameMoveRandomly,
+    chaseGamePlaySound: chaseGamePlaySound,
+    chaseGameAddVariable: chaseGameAddVariable,
+    chaseGameChangeScore: chaseGameChangeScore,
+
+    // Make-A-Pop/Clicker Game
+    popGamePickSprite: popGamePickSprite,
+    popGamePlaySound: popGamePlaySound,
+    popGameAddScore: popGameAddScore,
+    popGameChangeScore: popGameChangeScore,
+    popGameRandomPosition: popGameRandomPosition,
+    popGameChangeColor: popGameChangeColor,
+    popGameResetScore: popGameResetScore,
+
+    // Animate A Character
+    animateCharPickBackdrop: animateCharPickBackdrop,
+    animateCharPickSprite: animateCharPickSprite,
+    animateCharSaySomething: animateCharSaySomething,
+    animateCharAddSound: animateCharAddSound,
+    animateCharTalk: animateCharTalk,
+    animateCharMove: animateCharMove,
+    animateCharJump: animateCharJump,
+    animateCharChangeColor: animateCharChangeColor,
+
+    // Tell A Story
+    storyPickBackdrop: storyPickBackdrop,
+    storyPickSprite: storyPickSprite,
+    storySaySomething: storySaySomething,
+    storyPickSprite2: storyPickSprite2,
+    storyFlip: storyFlip,
+    storyConversation: storyConversation,
+    storyPickBackdrop2: storyPickBackdrop2,
+    storySwitchBackdrop: storySwitchBackdrop,
+    storyHideCharacter: storyHideCharacter,
+    storyShowCharacter: storyShowCharacter,
+
+    // Video Sensing
+    videoAddExtension: videoAddExtension,
+    videoPet: videoPet,
+    videoAnimate: videoAnimate,
+    videoPop: videoPop
+
+};
+
+export {esImages};

src/lib/libraries/decks/index.jsx

@@ -1,120 +1,51 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+// Tutorial thumbnails: Avoid using any text that would need to be
+// translated in thumbnails.
 // Intro
-import libraryIntro from './intro/lib-getting-started.jpg';
-import stepMove from './intro/intro1.gif';
-import stepMoveSayHello from './intro/intro2.gif';
+import libraryIntro from './thumbnails/getting-started.jpg';
 
 // Text to Speech
-import libraryTXTSpeech from './txt/lib_txt-to-speech.jpg';
-import stepAddTXTextension from './txt/01_hoc-add-extensions.gif';
-import stepTXTSpeech from './txt/02_hoc-say-something.gif';
-import stepTXTSetVoice from './txt/03_hoc-set-voice.gif';
-import stepTXTMove from './txt/04_hoc-move-around.gif';
-import stepTXTBackdrop from './txt/05_hoc-add-backdrop.gif';
-import stepTXTAddSprite from './txt/06_hoc-add-character.gif';
-import stepTXTSong from './txt/07_hoc-perform-song.gif';
-import stepTXTColor from './txt/08_hoc-color-click.gif';
-import stepTXTSpin from './txt/09_hoc-spin.gif';
-import stepTXTGrow from './txt/10_hoc-grow-shrink.gif';
+import libraryTXTSpeech from './thumbnails/text-to-speech.jpg';
 
 // Cartoon Network
-import libraryCartoonNetwork from './cartoonnetwork/lib_CartoonNetwork.jpg';
-import stepCNcharacter from './cartoonnetwork/1-cn-hideshow.gif';
-import stepCNsay from './cartoonnetwork/2-cn-say.gif';
-import stepCNglide from './cartoonnetwork/3-cn-glide.gif';
-import stepCNpicksprite from './cartoonnetwork/4-cn-pick-gem.gif';
-import stepCNcollect from './cartoonnetwork/5-cn-collect.gif';
-import stepCNvariable from './cartoonnetwork/6-cn-variable.gif';
-import stepCNscore from './cartoonnetwork/7-cn-score.gif';
-import stepCNbackdrop from './cartoonnetwork/8-cn-change-backdrop.gif';
+import libraryCartoonNetwork from './thumbnails/cartoon-network.jpg';
 
 // Add sprite
-import libraryAddSprite from './sprite/cover-add-sprite.jpg';
-import stepAddSprite from './sprite/intro-choose-sprite.gif';
+import libraryAddSprite from './thumbnails/add-sprite.jpg';
 
 // Animate a name
-import libraryAnimate from './animate/lib_animate-a-name.jpg';
-import stepAnimatePickLetter from './animate/animate-name-pick-a-letter.gif';
-import stepAnimatePlaySound from './animate/animate-name-play-sound.gif';
-import stepAnimatePickLetter2 from './animate/animate-name-pick-a-letter2.gif';
-import stepAnimateChangeColor from './animate/animate-name-change-color.gif';
-import stepAnimateSpin from './animate/animate-name-spin.gif';
-import stepAnimateGrow from './animate/animate-name-grow.gif';
-
+import libraryAnimate from './thumbnails/animate-a-name.jpg';
 
 // Make-Music
-import libraryMakeMusic from './make-music/lib-make-music.jpg';
-import stepPickInstrument from './make-music/make-music-pick-instrument.gif';
-import stepPlaySoundClick from './make-music/make-music-play-sound.gif';
-import stepMakeSong from './make-music/make-music-make-song.gif';
-import stepMakeBeat from './make-music/make-music-make-beat.gif';
-import stepMakeBeatbox from './make-music/make-music-beatbox.gif';
+import libraryMakeMusic from './thumbnails/make-music.jpg';
 
 // Chase-Game
-import libraryChaseGame from './chase-game/lib-chasegame.jpg';
-import stepBG from './chase-game/chase-game-add-backdrop.gif';
-import stepAddOcto from './chase-game/chase-game-add-sprite1.gif';
-import stepLeftRight from './chase-game/chase-game-move-rightleft.gif';
-import stepUpDown from './chase-game/chase-game-move-updown.gif';
-import stepAddStar from './chase-game/chase-game-add-sprite2.gif';
-import stepMoveRandom from './chase-game/chase-game-move-randomly.gif';
-import stepWhenTouch from './chase-game/chase-game-touching.gif';
-import stepScoreVariable from './chase-game/chase-game-add-variable.gif';
-import stepScoreWhenTouch from './chase-game/chase-game-change-score.gif';
+import libraryChaseGame from './thumbnails/chase-game.jpg';
 
 // Make-A-Game
-import libraryMakeAGame from './game/lib-pop.jpg';
-import stepGamePickSprite from './game/game-pick-sprite.gif';
-import stepGamePlaySound from './game/game-play-sound.gif';
-import stepGameAddScore from './game/game-add-score.gif';
-import stepGameChangeScore from './game/game-change-score.gif';
-import stepRandom from './game/game-random-position.gif';
-import stepGameChangeColor from './game/game-change-color.gif';
-import stepResetScore from './game/game-reset-score.gif';
+import libraryMakeAGame from './thumbnails/pop-game.jpg';
 
 // Animate A Character
-import libraryAnimateChar from './animate-char/lib_Animate_a_Character.jpg';
-import stepAnimateCharPickBackdrop from './animate-char/animate-char-pick-backdrop.gif';
-import stepAnimateCharPickSprite from './animate-char/animate-char-pick-sprite.gif';
-import stepAnimateCharSaySomething from './animate-char/animate-char-say-something.gif';
-import stepAnimateCharAddSound from './animate-char/animate-char-add-sound.gif';
-import stepAnimateCharTalk from './animate-char/animate-char-talk.gif';
-import stepAnimateCharMove from './animate-char/animate-char-move.gif';
-import stepAnimateCharJump from './animate-char/animate-char-jump.gif';
-import stepAnimateCharChangeColor from './animate-char/animate-char-change-color.gif';
+import libraryAnimateChar from './thumbnails/animate-a-character.jpg';
 
 // Tell A Story
-import libraryStory from './story/lib-tell-a-story.jpg';
-import stepStoryPickBackdrop from './story/story-pick-backdrop.gif';
-import stepStoryPickSprite from './story/story-pick-sprite.gif';
-import stepStoryCharSaySomething from './story/story-say-something.gif';
-import stepStoryCharAddAnotherSprite from './story/story-pick-another-sprite.gif';
-import stepStoryFlip from './story/story-flip.gif';
-import stepStoryConversation from './story/story-conversation.gif';
-import stepStoryAddAnotherBackdrop from './story/story-add-background-2.gif';
-import stepStorySwitchBackdrop from './story/story-switch-backdrop.gif';
-import stepStoryHide from './story/story-hide-character.gif';
-import stepStoryShow from './story/story-show-character.gif';
+import libraryStory from './thumbnails/tell-a-story.jpg';
 
 // Video Sensing
-import libraryVideoSens from './videosensing/lib_video_sensing.jpg';
-import stepVideoSensAddExtension from './videosensing/videosens-add-extension.gif';
-import stepVideoSensPet from './videosensing/videosens-pet-cat.gif';
-import stepVideoSensAnimate from './videosensing/videosens-animate.gif';
-import stepVideoSensPop from './videosensing/videosens-pop.gif';
+import libraryVideoSens from './thumbnails/video-sensing.jpg';
 
 // Videos
-import recordASound from './videos/record-a-sound.jpg';
-import glideAroundThumb from './videos/glide-around.jpg';
-import changeSizeThumb from './videos/change-size.jpg';
-import switchCostumeThumb from './videos/animate-sprite.jpg';
-import hideAndShowThumb from './videos/hide-and-show.jpg';
-import addBackdropThumb from './videos/add-backdrop.jpg';
-import addEffectsThumb from './videos/add-effects.jpg';
-import moveArrowKeysThumb from './videos/move-arrow-keys.jpg';
-import spinThumb from './videos/spin.jpg';
+import recordASound from './thumbnails/record-a-sound.jpg';
+import glideAroundThumb from './thumbnails/glide-around.jpg';
+import changeSizeThumb from './thumbnails/change-size.jpg';
+import switchCostumeThumb from './thumbnails/animate-sprite.jpg';
+import hideAndShowThumb from './thumbnails/hide-and-show.jpg';
+import addBackdropThumb from './thumbnails/add-backdrop.jpg';
+import addEffectsThumb from './thumbnails/add-effects.jpg';
+import moveArrowKeysThumb from './thumbnails/move-arrow-keys.jpg';
+import spinThumb from './thumbnails/spin.jpg';
 
 export default {
 
@@ -138,7 +69,7 @@ export default {
                     id="gui.howtos.intro-move.step_stepMove"
                 />
             ),
-            image: stepMove
+            image: 'introMove'
         }, {
             title: (
                 <FormattedMessage
@@ -147,7 +78,7 @@ export default {
                     id="gui.howtos.add-a-move-block.step_stepMoveSayHello"
                 />
             ),
-            image: stepMoveSayHello
+            image: 'introSayHello'
         }, {
             deckIds: [
                 'add-a-backdrop',
@@ -180,16 +111,16 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_AddTXTextension"
                 />
             ),
-            image: stepAddTXTextension
+            image: 'speechAddExtension'
         }, {
             title: (
                 <FormattedMessage
                     defaultMessage="Say Something"
                     description="Step name for 'Say Something' step"
-                    id="gui.howtos. say-it-out-loud.step_TXTSpeech"
+                    id="gui.howtos.say-it-out-loud.step_TXTSpeech"
                 />
             ),
-            image: stepTXTSpeech
+            image: 'speechSaySomething'
         }, {
             title: (
                 <FormattedMessage
@@ -198,7 +129,7 @@ export default {
                     id="gui.howtos.say-it-out-loud_TXTSetVoice"
                 />
             ),
-            image: stepTXTSetVoice
+            image: 'speechSetVoice'
         }, {
             title: (
                 <FormattedMessage
@@ -207,7 +138,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTMove"
                 />
             ),
-            image: stepTXTMove
+            image: 'speechMoveAround'
         }, {
             title: (
                 <FormattedMessage
@@ -216,7 +147,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTBackdrop"
                 />
             ),
-            image: stepTXTBackdrop
+            image: 'speechAddBackdrop'
         }, {
             title: (
                 <FormattedMessage
@@ -225,7 +156,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTAddSprite"
                 />
             ),
-            image: stepTXTAddSprite
+            image: 'speechAddSprite'
         }, {
             title: (
                 <FormattedMessage
@@ -234,7 +165,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTSong"
                 />
             ),
-            image: stepTXTSong
+            image: 'speechSong'
         }, {
             title: (
                 <FormattedMessage
@@ -243,7 +174,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTColor"
                 />
             ),
-            image: stepTXTColor
+            image: 'speechChangeColor'
         }, {
             title: (
                 <FormattedMessage
@@ -252,7 +183,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTSpin"
                 />
             ),
-            image: stepTXTSpin
+            image: 'speechSpin'
         }, {
             title: (
                 <FormattedMessage
@@ -261,7 +192,7 @@ export default {
                     id="gui.howtos.say-it-out-loud.step_TXTGrow"
                 />
             ),
-            image: stepTXTGrow
+            image: 'speechGrowShrink'
         }, {
             deckIds: [
                 'animate-a-name',
@@ -295,7 +226,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNcharacter"
                 />
             ),
-            image: stepCNcharacter
+            image: 'cnShowCharacter'
         }, {
             title: (
                 <FormattedMessage
@@ -304,7 +235,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNsay"
                 />
             ),
-            image: stepCNsay
+            image: 'cnSay'
         }, {
             title: (
                 <FormattedMessage
@@ -313,7 +244,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNglide"
                 />
             ),
-            image: stepCNglide
+            image: 'cnGlide'
         }, {
             title: (
                 <FormattedMessage
@@ -322,7 +253,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNpicksprite"
                 />
             ),
-            image: stepCNpicksprite
+            image: 'cnPickSprite'
         }, {
             title: (
                 <FormattedMessage
@@ -331,7 +262,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNcollect"
                 />
             ),
-            image: stepCNcollect
+            image: 'cnCollect'
         }, {
             title: (
                 <FormattedMessage
@@ -340,7 +271,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNvariable"
                 />
             ),
-            image: stepCNvariable
+            image: 'cnVariable'
         }, {
             title: (
                 <FormattedMessage
@@ -349,7 +280,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNscore"
                 />
             ),
-            image: stepCNscore
+            image: 'cnScore'
         }, {
             title: (
                 <FormattedMessage
@@ -358,7 +289,7 @@ export default {
                     id="gui.howtos.cartoon-network.step_CNbackdrop"
                 />
             ),
-            image: stepCNbackdrop
+            image: 'cnBackdrop'
         },
         {
             video: '6o76f5ivo1'
@@ -392,7 +323,7 @@ export default {
                     id="gui.howtos.animate-a-name.step_AnimatePickLetter"
                 />
             ),
-            image: stepAnimatePickLetter
+            image: 'namePickLetter'
         }, {
             title: (
                 <FormattedMessage
@@ -401,7 +332,7 @@ export default {
                     id="gui.howtos.animate-a-name.step_AnimatePlaySound"
                 />
             ),
-            image: stepAnimatePlaySound
+            image: 'namePlaySound'
         }, {
             title: (
                 <FormattedMessage
@@ -410,7 +341,7 @@ export default {
                     id="gui.howtos.animate-a-name.step_AnimatePickLetter2"
                 />
             ),
-            image: stepAnimatePickLetter2
+            image: 'namePickLetter2'
         }, {
             title: (
                 <FormattedMessage
@@ -419,7 +350,7 @@ export default {
                     id="gui.howtos.animate-a-name.step_AnimateChangeColor"
                 />
             ),
-            image: stepAnimateChangeColor
+            image: 'nameChangeColor'
         }, {
             title: (
                 <FormattedMessage
@@ -428,7 +359,7 @@ export default {
                     id="gui.howtos.animate-a-name.step_AnimateSpin"
                 />
             ),
-            image: stepAnimateSpin
+            image: 'nameSpin'
         }, {
             title: (
                 <FormattedMessage
@@ -437,7 +368,7 @@ export default {
                     id="gui.howtos.animate-a-name.step_AnimateGrow"
                 />
             ),
-            image: stepAnimateGrow
+            image: 'nameGrow'
         }, {
             deckIds: [
                 'add-a-backdrop',
@@ -468,7 +399,7 @@ export default {
                     id="gui.howtos.Make-Music.step_PickInstrument"
                 />
             ),
-            image: stepPickInstrument
+            image: 'musicPickInstrument'
         },
         {
             title: (
@@ -478,7 +409,7 @@ export default {
                     id="gui.howtos.Make-Music.step_PlaySoundClick"
                 />
             ),
-            image: stepPlaySoundClick
+            image: 'musicPlaySound'
         },
         {
             title: (
@@ -488,7 +419,7 @@ export default {
                     id="gui.howtos.Make-Music.step_MakeSong"
                 />
             ),
-            image: stepMakeSong
+            image: 'musicMakeSong'
         }, {
             title: (
                 <FormattedMessage
@@ -497,7 +428,7 @@ export default {
                     id="gui.howtos.make-music.step_MakeBeat"
                 />
             ),
-            image: stepMakeBeat
+            image: 'musicMakeBeat'
         }, {
             title: (
                 <FormattedMessage
@@ -506,7 +437,7 @@ export default {
                     id="gui.howtos.make-music.step_MakeBeatBox"
                 />
             ),
-            image: stepMakeBeatbox
+            image: 'musicMakeBeatbox'
         }, {
             deckIds: [
                 'add-a-backdrop',
@@ -537,7 +468,7 @@ export default {
                     id="gui.howtos.Make-A-Game.step_GamePickSprite"
                 />
             ),
-            image: stepGamePickSprite
+            image: 'popGamePickSprite'
         }, {
             title: (
                 <FormattedMessage
@@ -546,7 +477,7 @@ export default {
                     id="gui.howtos.make-a-game.step_GamePlaySound"
                 />
             ),
-            image: stepGamePlaySound
+            image: 'popGamePlaySound'
         }, {
             title: (
                 <FormattedMessage
@@ -555,7 +486,7 @@ export default {
                     id="gui.howtos.make-a-game.step_GameAddScore"
                 />
             ),
-            image: stepGameAddScore
+            image: 'popGameAddScore'
         }, {
             title: (
                 <FormattedMessage
@@ -565,7 +496,7 @@ export default {
                 />
             ),
 
-            image: stepGameChangeScore
+            image: 'popGameChangeScore'
         }, {
             title: (
                 <FormattedMessage
@@ -574,7 +505,7 @@ export default {
                     id="gui.howtos.make-a-game.step_Random"
                 />
             ),
-            image: stepRandom
+            image: 'popGameRandomPosition'
         }, {
             title: (
                 <FormattedMessage
@@ -583,7 +514,7 @@ export default {
                     id="gui.howtos.make-music.step_GameChangeColor"
                 />
             ),
-            image: stepGameChangeColor
+            image: 'popGameChangeColor'
         }, {
             title: (
                 <FormattedMessage
@@ -592,7 +523,7 @@ export default {
                     id="gui.howtos.make-music.step_ResetScore"
                 />
             ),
-            image: stepResetScore
+            image: 'popGameResetScore'
         }, {
             deckIds: [
                 'add-a-backdrop',
@@ -624,7 +555,7 @@ export default {
                     id="gui.howtos.Chase-Game.step_BG"
                 />
             ),
-            image: stepBG
+            image: 'chaseGameAddBackdrop'
         }, {
             title: (
                 <FormattedMessage
@@ -633,7 +564,7 @@ export default {
                     id="gui.howtos.chase-game.step_AddOcto"
                 />
             ),
-            image: stepAddOcto
+            image: 'chaseGameAddSprite1'
         }, {
             title: (
                 <FormattedMessage
@@ -642,7 +573,7 @@ export default {
                     id="gui.howtos.make-music.step_LeftRight"
                 />
             ),
-            image: stepLeftRight
+            image: 'chaseGameRightLeft'
         }, {
             title: (
                 <FormattedMessage
@@ -651,7 +582,7 @@ export default {
                     id="gui.howtos.Chase-Game.step_UpDown"
                 />
             ),
-            image: stepUpDown
+            image: 'chaseGameUpDown'
         }, {
             title: (
                 <FormattedMessage
@@ -660,7 +591,7 @@ export default {
                     id="gui.howtos.Chase-Game.step_AddStar"
                 />
             ),
-            image: stepAddStar
+            image: 'chaseGameAddSprite2'
         }, {
             title: (
                 <FormattedMessage
@@ -669,7 +600,7 @@ export default {
                     id="gui.howtos.Chase-Game.step_MoveRandom"
                 />
             ),
-            image: stepMoveRandom
+            image: 'chaseGameMoveRandomly'
         }, {
             title: (
                 <FormattedMessage
@@ -678,7 +609,7 @@ export default {
                     id="gui.howtos.Chase-Game.step_WhenTouch"
                 />
             ),
-            image: stepWhenTouch
+            image: 'chaseGamePlaySound'
         }, {
             title: (
                 <FormattedMessage
@@ -687,7 +618,7 @@ export default {
                     id="gui.howtos.Chase-Game.step_ScoreVariable"
                 />
             ),
-            image: stepScoreVariable
+            image: 'chaseGameAddVariable'
         }, {
             title: (
                 <FormattedMessage
@@ -696,7 +627,7 @@ export default {
                     id="gui.howtos.Chase-Game.ScoreWhenTouch"
                 />
             ),
-            image: stepScoreWhenTouch
+            image: 'chaseGameChangeScore'
         }, {
             deckIds: [
                 'add-effects',
@@ -726,7 +657,7 @@ export default {
                     id="gui.howtos.animate-char.step_addbg"
                 />
             ),
-            image: stepAnimateCharPickBackdrop
+            image: 'animateCharPickBackdrop'
         }, {
             title: (
                 <FormattedMessage
@@ -735,7 +666,7 @@ export default {
                     id="gui.howtos.animate-char.step_addsprite"
                 />
             ),
-            image: stepAnimateCharPickSprite
+            image: 'animateCharPickSprite'
         }, {
             title: (
                 <FormattedMessage
@@ -744,7 +675,7 @@ export default {
                     id="gui.howtos.animate-char.step_saysomething"
                 />
             ),
-            image: stepAnimateCharSaySomething
+            image: 'animateCharSaySomething'
         }, {
             title: (
                 <FormattedMessage
@@ -753,7 +684,7 @@ export default {
                     id="gui.howtos.animate-char.step_addsound"
                 />
             ),
-            image: stepAnimateCharAddSound
+            image: 'animateCharAddSound'
         }, {
             title: (
                 <FormattedMessage
@@ -762,7 +693,7 @@ export default {
                     id="gui.howtos.animate-char.step_animatetalking"
                 />
             ),
-            image: stepAnimateCharTalk
+            image: 'animateCharTalk'
         }, {
             title: (
                 <FormattedMessage
@@ -771,7 +702,7 @@ export default {
                     id="gui.howtos.animate-char.step_arrowkeys"
                 />
             ),
-            image: stepAnimateCharMove
+            image: 'animateCharMove'
         }, {
             title: (
                 <FormattedMessage
@@ -780,7 +711,7 @@ export default {
                     id="gui.howtos.animate-char.step_jump"
                 />
             ),
-            image: stepAnimateCharJump
+            image: 'animateCharJump'
         }, {
             title: (
                 <FormattedMessage
@@ -789,7 +720,7 @@ export default {
                     id="gui.howtos.animate-char.step_changecolor"
                 />
             ),
-            image: stepAnimateCharChangeColor
+            image: 'animateCharChangeColor'
         }, {
             deckIds: [
                 'Chase-Game',
@@ -819,7 +750,7 @@ export default {
                     id="gui.howtos.story.step_addbg"
                 />
             ),
-            image: stepStoryPickBackdrop
+            image: 'storyPickBackdrop'
         }, {
             title: (
                 <FormattedMessage
@@ -828,7 +759,7 @@ export default {
                     id="gui.howtos.story.step_addsprite"
                 />
             ),
-            image: stepStoryPickSprite
+            image: 'storyPickSprite'
         }, {
             title: (
                 <FormattedMessage
@@ -837,7 +768,7 @@ export default {
                     id="gui.howtos.story.step_saysomething"
                 />
             ),
-            image: stepStoryCharSaySomething
+            image: 'storySaySomething'
         }, {
             title: (
                 <FormattedMessage
@@ -846,7 +777,7 @@ export default {
                     id="gui.howtos.story.step_addanothersprite"
                 />
             ),
-            image: stepStoryCharAddAnotherSprite
+            image: 'storyPickSprite2'
         }, {
             title: (
                 <FormattedMessage
@@ -855,7 +786,7 @@ export default {
                     id="gui.howtos.story.step_flip"
                 />
             ),
-            image: stepStoryFlip
+            image: 'storyFlip'
         }, {
             title: (
                 <FormattedMessage
@@ -864,7 +795,7 @@ export default {
                     id="gui.howtos.story.step_conversation"
                 />
             ),
-            image: stepStoryConversation
+            image: 'storyConversation'
         }, {
             title: (
                 <FormattedMessage
@@ -873,7 +804,7 @@ export default {
                     id="gui.howtos.story.addanotherbg"
                 />
             ),
-            image: stepStoryAddAnotherBackdrop
+            image: 'storyPickBackdrop2'
         }, {
             title: (
                 <FormattedMessage
@@ -882,7 +813,7 @@ export default {
                     id="gui.howtos.story.step_swithbg"
                 />
             ),
-            image: stepStorySwitchBackdrop
+            image: 'storySwitchBackdrop'
         }, {
             title: (
                 <FormattedMessage
@@ -891,7 +822,7 @@ export default {
                     id="gui.howtos.story.step_hidewizard"
                 />
             ),
-            image: stepStoryHide
+            image: 'storyHideCharacter'
         }, {
             title: (
                 <FormattedMessage
@@ -900,7 +831,7 @@ export default {
                     id="gui.howtos.story.step_showwizard"
                 />
             ),
-            image: stepStoryShow
+            image: 'storyShowCharacter'
         },
         {
             deckIds: [
@@ -931,7 +862,7 @@ export default {
                     id="gui.howtos.videosens.step_addextension"
                 />
             ),
-            image: stepVideoSensAddExtension
+            image: 'videoAddExtension'
         }, {
             title: (
                 <FormattedMessage
@@ -940,7 +871,7 @@ export default {
                     id="gui.howtos.videosens.step_pet"
                 />
             ),
-            image: stepVideoSensPet
+            image: 'videoPet'
         }, {
             title: (
                 <FormattedMessage
@@ -949,7 +880,7 @@ export default {
                     id="gui.howtos.videosens.step_animate"
                 />
             ),
-            image: stepVideoSensAnimate
+            image: 'videoAnimate'
         }, {
             title: (
                 <FormattedMessage
@@ -958,7 +889,7 @@ export default {
                     id="gui.howtos.videosens.step_pop"
                 />
             ),
-            image: stepVideoSensPop
+            image: 'videoPop'
         }, {
             deckIds: [
                 'Make-Music',
@@ -987,7 +918,7 @@ export default {
                         id="gui.howtos.add-sprite.step_addSprite"
                     />
                 ),
-                image: stepAddSprite
+                image: 'addSprite'
             },
             {
                 deckIds: [