DummyImagesURIs

The associative array-like object including the primitive images (in fact, the monochrome background with label written the lengths of sides), encoded in Base64 thanks to which, no internet connection required to display the image). Such images are convenient to be used as the test ones during the layout adaptation for the images of various sizes, or just as the placeholders at the early stages of development when there are no real images samples at hand.

As default, DummyImagesURIs has the following keys:

aspectRatio19x6

Image with aspect ratio 19 x 6

aspectRatio4x3

Image with aspect ratio 4 x 3

wideAndLow

Ultra wide image with small height

highAndNarrow

Ultra high image with small width

small

Small image

• aspectRatio19x6
• aspectRatio4x3
• wideAndLow
• highAndNarrow
• small

Problematics

Although it would be convenient for web developers if homogeneous images (e.g., photos of the same product that should be displayed in the mini-gallery) were of the same size or at least had the same aspect ratios, in practice, this convenience often turns out to be impossible. The customers provide images of different sizes and proportions, expecting the performers to aesthetically display all these images without any problems due to the high level of qualification.

To be more or less confident that the prepared layout is indeed adapted to different images, it is necessary to have several test images of different sizes and proportions ready, up to extreme cases, for example, when the image has a height several times greater than its width. If you have such images, you can use them. But most likely, you do not have such a set of images at hand, as well as enough time to search for them. This is exactly what DummyImagesURIs are intended for.

Example

The clickable cards with images represented above has been created with the following code:

ul.DummyImagesURIsGallery

  each imageURI, key in DummyImagesURIs

    li

      button(
        aria-label=`Copy the calling expression of "${ key }" property of "DummyImagesURIs" object`
      )

        span(
          role="presentation"
          style=`background-image: url("${ imageURI }");`
        )

@require "../../../../../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"


.DummyImagesURIsGallery

  display grid
  grid-template-columns repeat(auto-fit, minmax(7rem, 1fr));
  gap 0.5rem


  margin-top 0.9rem
  pushTargetFromSelf({ targetElementSelector: ".Article-Heading2", y: 1.6rem })


  li

    display flex
    flex-direction column


    button

      ButtonLikeElementsPrimer()

      display flex
      justify-items center
      align-items center
      flex-direction column
      row-gap 0.8rem

      cursor pointer

      background-image linear-gradient(lightgoldenrodyellow, aliceblue)


      &:hover

        transform scale(1.05)
        transition transform 1s ease-in-out


    span

      width 100%
      aspect-ratio 1 / 1

      margin-left auto
      margin-right auto

      align-self center

      background-size contain
      background-position center
      background-repeat no-repeat


    code

      font-family Consolas, monaco, monospace

      Paddings({
        horizontalSymmetric: 0.5rem,
        bottom: 0.3rem
      })

      applyTextGeometryWithoutExtraSpaceCausedByLineHeight({
        fontSize: 1rem,
        lineSpacing: 0.4,
        mustAllowWordsBreakingAnywhere: true
      })

      font-weight bold
      color: ShadesOfGray__39ColorsW3C_Palette[12]

If you need to create a mini gallery with the photos for the ES store or something like, you may take above code as the base and add the large area for the displaying of the currently select photography.