Feat/captions

src/models/howto.models.tsx

@@ -17,6 +17,7 @@ export interface IHowtoStep extends IHowToStepFormInput {
   images: IUploadedFileMeta[]
   title: string
   text: string
+  caption?: string
   _animationKey?: string
 }
 
@@ -39,4 +40,5 @@ export interface IHowtoFormInput {
   slug: string
   // note, tags will remain optional as if populated {} will be stripped by db (firestore)
   tags?: ISelectedTags
+  caption?: string
 }

src/pages/Howto/Content/CreateHowto/CreateHowto.tsx

@@ -191,6 +191,11 @@ export class CreateHowto extends React.Component<IProps, IState> {
                           validateFields={[]}
                           component={ImageInputField}
                         />
+                        <Field
+                          name="caption"
+                          component={InputField}
+                          placeholder="Insert Caption"
+                        />
                         <Field name="files" component={FileInputField} />
                       </BoxContainer>
                     </FlexContainer>

src/pages/Howto/Content/CreateHowto/Step/Step.tsx

@@ -83,6 +83,11 @@ class Step extends Component<IProps, IState> {
           {/* right */}
           <BoxContainer p={0} width={[1, '305px', null]}>
             <Field name={`${step}.images`} component={ImageInputField} multi />
+            <Field
+              name={`${step}.caption`}
+              component={InputField}
+              placeholder="Insert Caption"
+            />
           </BoxContainer>
         </FlexContainer>
       </BoxContainer>

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

@@ -80,7 +80,10 @@ export default class HowtoDescription extends React.PureComponent<IProps, any> {
             ))}
         </Box>
         <Flex justifyContent={'end'} width={[1 / 2]}>
-          <CoverImg src={howto.cover_image.downloadUrl} alt="how-to cover" />
+          <Box>
+            <CoverImg src={howto.cover_image.downloadUrl} alt="how-to cover" />
+            <Text pt={2}>{howto.caption}</Text>
+          </Box>
         </Flex>
       </Flex>
     )

src/pages/Howto/Content/Howto/Step/Step.tsx

@@ -26,6 +26,7 @@ export default class Step extends React.PureComponent<IProps> {
           <Linkify>{this.props.step.text}</Linkify>
         </Text>
         <ImageGallery images={this.props.step.images as IUploadedFileMeta[]} />
+        <Text pb={3}>{this.props.step.caption}</Text>
       </Box>
     )
   }