Home Forums ASE Support Using picturefill.js with ASE?

This topic is: resolved
Viewing 5 posts – 1 through 5 (of 5 total)
  • Author

    Posts

  • #5275

    Reply

    Mark Simchock

    Participant

    I’ve sorted out a class of using picturefill.js for content images and such within the theme we’re building.

    http://scottjehl.github.io/picturefill/

    https://github.com/WPezClasses/class-wp-ezclasses-templates-picturefill-js

    Might there be a way to try to integrate this into ASE? As it is, with the string that defines the the class parses that and adds the srcset= and sizes=. If ASE had a hook / filter for that tag, and added a data attribute for attachment ID (or passed it with the filter?) I think doing this would be very doable.

    I know you’ll are busy but all / nearly all our other images will be responsive / picturefill. It would be nice to do the same with the ASE “stuff” 🙂

    Thanks again.

    #5277

    Reply

    Michael Beil

    Keymaster

    This could be a great feature in the future Mark for a use case like yours. Would you post a new issue over on GitHub with all of this content so we can get this in as a feature request?

    https://github.com/bearded-avenger/aesop-core/issues/new

    #5328

    Reply

    Mark Simchock

    Participant

    I’ll do that. Thanks Michael.

    I’m also going to copy / paste some code. Since I’m not sure how GH is gonna treat it, I’ll paste it here as well, just to be safe.

    In short, this is a basic / crude version of how I’ve replaced background images, and I can still position and full-cover, etc. I’m not sure if it’s EXACTLY like background, but for me, it’s damn close. The MAJOR difference being, this uses the img tag which then allows for responsive images – via picturefill.js – instead of being forced to use big, bloated, nasty images that suck up bandwidth 😉

    Let me know what you think. Frankly, if it comes down to it, I might do a couple custom components so we can be smarter about images, image sizes, and page load, etc.

    <style>
    
    #wrapper{
      width:600px;
      height:400px;
      background-color:red;
      margin:10px auto;
      overflow:hidden;
      position: relative;
     display:none
    }
    
    #pic{
      width:100%
      margin:10px auto
    }
    
    #pic img{
        margin: 0;
        background: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    
      /*margin: 0 -50%; */
    }
    
    </style>
    
    <div>
      <div id="wrapper">
        <div id="pic">
           <img src="img/groove-header-4.jpg">
        </div>
       <div class="clearfix"> <hr> </div>
      </div>
    </div>

    #5329

    Reply

    Mark Simchock

    Participant

    p.s. Most of the snippet I found somewhere else. I’d give them the credit but I don’t have the linky.

    #5334

    Reply

    Jenny @ Aesop

    Keymaster

    Adding code to github is pretty simple. I believe it is 3 ` (backticks) before and after the code. 🙂

    • This reply was modified 6 years, 3 months ago by Jenny @ Aesop.

Viewing 5 posts – 1 through 5 (of 5 total)
Reply To: Using picturefill.js with ASE?