commit here for reference, two rows for building pic

src/components/extras/heropicture.vue

@@ -1,10 +1,12 @@
 <template>
  <el-row class="stage">
  <el-col :span="24" class="main">
- <div element-loading-background="rgba(0, 0, 0, 0.3)" class="background" ref="main">
- <div class="title">{{ name }}</div>
- <div class="subtitle">{{ description }}</div>
- </div>
+ <div
+ v-for="(media, index) in this.media"
+ :class="'slantImage leftEnd'"
+ :style="`background-image:url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${media}); width:calc(100%); height:100px`"
+ :key="media"
+ ></div>
  </el-col>
  </el-row>
 </template>
@@ -22,6 +24,11 @@ export default {
  // imageString is a string containing the image filename in the S3 bucket. ie: mcnary_2.jpg
  media: function ( imageString ) {
  this.$refs.main.style.backgroundImage = ''
+ console.log( imageString )
+ if ( imageString.length > 0 ) {
+ console.log( this.media )
+ imageString = imageString[0]
+ }
  if ( imageString ) {
  this.$refs.main.style.backgroundImage =
  'linear-gradient(to bottom right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)), url("https://osu-energy-images.s3-us-west-2.amazonaws.com/' +