Using ASE with Picturefill.js (or similar)

[AlchemyUnited]

Per M. Beil's request...

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”

Also, the code below is what I'm using to do faux background images but still use the img tag. I get the same effects (or most of them), for example full cover, but I'm also able - via picture fill - to assign the best src= on the fly.

in a responsive world, one size (image) does not fit all :)

---

[AlchemyUnited]

Looks like GH kind ate the snippet. It's also here:

http://aesopstoryengine.com/topic/using-picturefill-js-with-ase/#post-5328

[bearded-avenger]

Hey Mark, thanks for the feedback. Right now you can add custom classes, or override the component completely by copy/pasting the function in a functions.php. With that being said, I do want to get something like this on board eventually.

[AlchemyUnited]

Hey Nick...

Yeah, I saw the functions are plugable.

What I think I'm gonna do - which is what I usually do :) - is work up a series of WPezClasses as the base for custom components. I want to (re) do Quote first and when I get to Image I'll ping you so you can see - at least a crude version - of how I think picturefill might work in an ASE driven content world

I realize the typical ASE target is large screen but using a large / full / original image could be a pretty big elephant. I'm already using picturefill elsewhere so it makes sense to be me / us to carry that into the ASE components.

Thanks again. Keep doin' it man. ASE is #BadAss :)

[AlchemyUnited]

p.s. The only immediate thing I did noticed - or think I noticed - is that when define('AI_CORE_UNSTYLED',true); the inline style="..." doesn't get removed. For example, I'm thinking I was expecting the inline style to become a series of classes, at least in some cases. font-size: 5em might then becomes a class font-size-5em which could be styled on its own.

But then again, this is more or less another dream of mine to have the properties "de-coupled" (?) from the component / element. I think it would be great if there was an easy way to just get "raw" markup out that would be styled by the designer and not so much on a post by post basis.

I wouldn't call it a concern per se but if everything is "hardcoded" in the shortcode and I switch themes, that content could have been styled old-theme-centric. So now what? Each post and each component within a post would have to be re-styled. Don't get my wrong. I know that's kinda fringe (maybe?), and that ASE is for writers / authors who are NOT designers / CSS-ites. I get that. But it would be nice if there was a way to get stripped down output that was more "generic" and could be styled by the stylesheet.css and not so much inline.

Again, just my 2 cents. I realize I'm trying to use ASE in a way that's not really intended (tho' i think the level of flexibility I'm seeking stil makes sense). It also might be a way to up-sell to components with more features (for those less able). Maybe?