Dynamic text over image

Demo

We used our query-string DKI shortcode to display the value of the parameter “?your-name” and placed it on top of an image.

The same method can be used to place different types of dynamic content created using If-So, like Triggers, or content created using the CSV bulks extension.

Hey {name}!

This message is dynamic!

Fill in your name to see how we display it above the image

GO →

The code we used to create this example

<div class="ifso-pt-40">
  <img class="ifso-pt-40-image" alt="image"
    src="https://www.if-so.com/wp-content/uploads/2022/07/text-over-image.png">
    
  <div class="ifso-pt-40-content">
    <p class="ifso-pt-40-title ifso-pt-shortcode">
      Hey [ifsoDKI type="querystring" parameter="first-name" fallback="{name}"]!
    </p>
    <p class="ifso-pt-40-text">
      This message is dynamic!
    </p>
  </div>
</div>

<script>
  (function(){
    var addEvent = function (el, type, fn) {
      if (el.addEventListener)
        el.addEventListener(type, fn, false);
      else
        el.attachEvent('on'+type, fn);
    };

    var extend = function(obj,ext){
      for(var key in ext)
        if(ext.hasOwnProperty(key))
          obj[key] = ext[key];
      return obj;
    };

    window.ifsoFitText = function (el, kompressor, options) {
      var settings = extend({
        'minFontSize' : -1/0,
        'maxFontSize' : 1/0
      },options);

      var fit = function (el) {
        var compressor = kompressor || 1;
        var resizer = function () {
          el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
        };
        addEvent(window, 'resize', resizer);
        addEvent(window, 'orientationchange', resizer);
        setTimeout(()=> { resizer() }, 1)
      };

      if (el.length)
        for(var i=0; i<el.length; i++)
          fit(el[i]);
      else
        fit(el);

      return el;
    };
  })();
</script>

<script>
  ifsoFitText(document.querySelector('.ifso-pt-40-title'), 1.5);
  ifsoFitText(document.querySelector('.ifso-pt-40-text'), 2);
</script>

<style class="ifso-pt-style">
  .ifso-pt-40 {
    position: relative;
    width: 100%
  }

  .ifso-pt-40-image {
    width: 100%;
    /* makes sure image is not opened on click */
    pointer-events: none; 
  }

  .ifso-pt-40-content {
    position: absolute;
    top: 47.7%;
    left: 21.6%;
    width: 58.6%;
    height: 40.3%;
    text-align: center;
    padding: 2%;
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .ifso-pt-40-content * {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.15;
  }

  .ifso-pt-40-title {
    color: #fb0287;
    text-transform: capitalize;
    margin: 5% 0 3%;
  }

  .ifso-pt-40-text {
    color: #1e0547;
    margin: 0;
  }
</style>🗊