Appearance

Image Style Mixin ​

File Information ​

  • Path: mixins/imageStyle.js
  • Purpose: Dynamic image styling utilities for responsive image display

Overview ​

The Image Style mixin provides methods for calculating and applying dynamic CSS classes to images based on their dimensions relative to their containers. It ensures images display correctly in card views, list views, and dashboard collages by applying appropriate background-size classes.

Key Features ​

  1. Dynamic Style Calculation

    • Card view style calculation
    • List view style calculation
    • Dashboard collage style calculation
    • Responsive image sizing

  2. Image Load Handling

    • Image load event handling
    • Dynamic style application
    • Style caching per image

  3. CSS Class Generation

    • background-size-auto - For small images
    • background-size-contain - For aspect ratio mismatches
    • Default (cover) - For large images

Methods ​

getCardViewDynamicStyle(imageSize, assetBox) ​

Calculates dynamic style for card view:

  • Compares image dimensions to container
  • Returns appropriate CSS class
  • Handles small images, mismatched aspect ratios

Parameters:

  • imageSize (Object): { width, height } - Image dimensions
  • assetBox (Object): { width, height } - Container dimensions

Returns: CSS class string

Logic:

  • If image smaller than container: 'background-size-auto'
  • If aspect ratio mismatch: 'background-size-contain'
  • Otherwise: '' (default cover)

onCardImageLoadAndSetDynamicStyle(file, dynamicStyles, imageRef) ​

Handles image load and sets dynamic style for card view:

  • Waits for image to load
  • Gets image dimensions
  • Calculates dynamic style
  • Applies style to dynamicStyles object

Parameters:

  • file (Object): File object
  • dynamicStyles (Object): Dynamic styles object (reactive)
  • imageRef (string): Reference name prefix

Behavior:

  • Creates image element to get natural dimensions
  • Calculates style based on container size
  • Updates dynamicStyles[file.id] with combined class

dashboardCollageBGClass(boxSize, imageSize) ​

Calculates background class for dashboard collage:

  • Similar to card view but for dashboard context
  • Handles collage-specific sizing

Parameters:

  • boxSize (Object): { width, height } - Box dimensions
  • imageSize (Object): { width, height } - Image dimensions

Returns: CSS class string

dashboardCollageOnloadSetStyle(file, dynamicStyles, imageRef) ​

Handles image load for dashboard collage:

  • Finds parent container
  • Gets container dimensions
  • Calculates and applies style

Parameters:

  • file (Object): File object with URL
  • dynamicStyles (Object): Dynamic styles object
  • imageRef (string): Reference name

getListViewDynamicStyle(imageSize, listBox) ​

Calculates dynamic style for list view:

  • Compares image to list item container
  • Returns appropriate class

Parameters:

  • imageSize (Object): { width, height }
  • listBox (Object): { width, height }

Returns: CSS class string

assetsListOnloadSetStyle(file, dynamicStyles, avatarRef) ​

Handles image load for asset list:

  • Gets list item container dimensions
  • Calculates style
  • Applies to dynamicStyles

Parameters:

  • file (Object): File object
  • dynamicStyles (Object): Dynamic styles object
  • avatarRef (string): Reference name prefix

CSS Classes ​

background-size-auto ​

  • Applied when image is smaller than container
  • Image displays at natural size
  • No scaling applied

background-size-contain ​

  • Applied when aspect ratio doesn't match
  • Image scales to fit container
  • Maintains aspect ratio
  • May leave empty space

Default (no class) ​

  • Applied when image is larger than container
  • Uses default background-size: cover
  • Image fills container
  • May crop image

Usage Examples ​

Card View ​

vue
<template>
  <div :ref="`card${file.id}`" class="asset-card">
    <div
      :class="dynamicStyles[file.id]"
      class="asset-thumbnail"
      :style="{ backgroundImage: `url(${file.thumbnail_file})` }"
    />
  </div>
</template>

<script>
import imageStyle from '~/mixins/imageStyle'
import fileType from '~/mixins/fileType'

export default {
  mixins: [imageStyle, fileType],
  data() {
    return {
      dynamicStyles: {}
    }
  },
  mounted() {
    // Set style when image loads
    this.onCardImageLoadAndSetDynamicStyle(
      this.file,
      this.dynamicStyles,
      'card'
    )
  }
}
</script>

List View ​

vue
<template>
  <div :ref="`list${file.id}`" class="asset-list-item">
    <div
      :class="dynamicStyles[file.id]"
      class="asset-thumbnail"
      :style="{ backgroundImage: `url(${file.thumbnail_file})` }"
    />
  </div>
</template>

<script>
import imageStyle from '~/mixins/imageStyle'

export default {
  mixins: [imageStyle],
  data() {
    return {
      dynamicStyles: {}
    }
  },
  mounted() {
    this.assetsListOnloadSetStyle(
      this.file,
      this.dynamicStyles,
      'list'
    )
  }
}
</script>

Integration Points ​

  • Asset List Components: Card and list views
  • Dashboard Components: Collage display
  • File Type Mixin: File type detection
  • Vue Reactivity: Dynamic style updates

Notes for Development ​

  • Mixin calculates styles based on actual image dimensions
  • Styles are cached per image ID
  • Image load events are used to get natural dimensions
  • Container dimensions are measured from DOM
  • Styles update reactively via Vue.set
  • Error handling prevents crashes