Please wait...
Page is loading

Image

BS4 theme lists adds several classes to native dom image that enhances their functionality .

Getting started

To use BS4 image simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Image placeholder

Will add a place holder for loading an image.
The use the placeholder add .img-placeholder as a wrapper to the <img> element and an .text-placeholder element

The image element should have JS call on the onload event that will add .img-placeholder-loaded to the .img-placeholder

you can customize the placeholder using the following options:

  • Add .img-placeholder-square to .img-placeholder and the placeholder will have a square shape
  • Add .img-placeholder-loading to .img-placeholder and the placeholder will have a loading effect
  • Add .text-placeholder after the image to add an icon and text
  • By default the placeholder's width will be 60% of the height. You can use the css variable --img-placeholder-custom-height on .img-placeholder to change it. for example: .img-placeholder{style: '--img-placeholder-custom-height: 80%;'}
Set "SRC" to images
The following images are empty (without SRC). Once SRC is set imaged will be loaded and "load" event will trigger accordingly, this even will...
asd
תמונה מרובעת עם קישור
תמונה נטענת
תמונה מרובעת נטענת 
.mb-2
  =link_to 'Set "SRC" to images', 'javascript:;', data: {action: "load-images"}
  .small.text-muted='The following images are empty (without SRC). Once SRC is set imaged will be loaded and "load" event will trigger accordingly, this even will...'
.row.img-placeholders
  .col-12.col-md-6.mb-2
    .img-placeholder
      =image_tag "", class: 'img-fluid', onload: "$(this).parent().addClass('img-placeholder-loaded')"
      .text-placeholder
        %i.far.fa-image
        asd
  .col-12.col-md-6.mb-2
    .img-placeholder.img-placeholder-square
      =image_tag '', class: 'img-fluid', onload: "$(this).parent().addClass('img-placeholder-loaded')"
      .text-placeholder
        %i.far.fa-image
        ='תמונה מרובעת עם'
        =link_to 'קישור', 'javascript:;'
  .col-12.col-md-6
    .img-placeholder.img-placeholder-loading{style: "--img-placeholder-custom-height: 80%;"}
      =image_tag '', class: 'img-fluid', onload: "$(this).parent().addClass('img-placeholder-loaded')"
      .text-placeholder
        %i.far.fa-image
        ='תמונה נטענת'
  .col-12.col-md-6
    .img-placeholder.img-placeholder-square.img-placeholder-loading
      =image_tag '', class: 'img-fluid', onload: "$(this).parent().addClass('img-placeholder-loaded')"
      .text-placeholder
        %i.far.fa-image
        ='תמונה מרובעת נטענת'

:javascript

  $('a[data-action="load-images"]').on('click', function (e) {
    let randSeed = Math.round(Math.random(100) * 100),
        imgUrl = 'https://picsum.photos/id/' + randSeed + '/400'
    $('.img-placeholders .img-placeholder.img-placeholder-square img').attr('src', imgUrl + '/400');
    $('.img-placeholders .img-placeholder:not(.img-placeholder-square) img').attr('src', imgUrl + '/240');
  })
On this page