Core-image a disaster

[Charles Munat]

I've spent roughly eight hours trying to make core-image work. I'm not sure what the trick is, but the online documentation is no help at all.

From what I've been able to determine, the image does not appear unless dimensions are included, but there is nothing about this in the API documentation. When dimensions are provided, they appear to override the sizing attribute, which makes one wonder what the point of the attribute is.

I just want the image to be pinned to the left and to fit the box, with overflow cropped. And I want to layer text on top of it. I can get the text, but can't seem to position it at all. I'm pretty sure that I'm just missing some small thing, but apparently it was so small that the writers of the documentation didn't think it worth mentioning. Unless I missed something (very possible... brain is fried).

Anyone know the trick to this? Example? The online docs are nothing but frustrating.

TIA.

Chas.

[Charles Munat]

Ha, ha. The moment you write it up, you find some answers. Have eliminated most of the problems with positioning by changing the attributes on the box into which the core-image is being inserted. Weirdly, if I add text inside the core-image element, then height and width are not necessary, I guess because the p element in there is forcing a width. But if I move the text outside the element (core-image empty), then it won't display unless I give it a width and height.

Sadly, it seems that the most painful part of Polymer, as with everything web, is the CSS. Sigh...

[Kevin Schaaf]

The `sizing` property only has a meaning you have sized the <core-image> explicitly (either via CSS or using the height/width attributes) -- cropping or containing an image to an unknown size doesn't really make sense.  The meaning of `sizing` is "hey, I'm giving this thing a fixed size (e.g. 200px by 200px), so I'm going to tell you how to deal with images that don't match this aspect ratio" -- you can either fit the smaller dimension and crop the larger dimension (cover), or fit the larger dimension and letterbox the smaller dimension (contain).  It uses css background-size under the hood which has a lot more options, but those are the most common.

I guess you've already unblocked yourself, but I went ahead and made a JSBin showing a simple left-aligned & cropped sample using both CSS and attributes to size the <core-image>: http://jsbin.com/wuzupatito/1/edit?html,output

I'd be interested to know where you were getting yourself tripped up; that is, how was your usage differing from the sample?

And in the future, consider just sending a JSBin that reduces your problem down to something simple and send it out to this list before you've sunk so much time into it; there are lots of people here willing to help (and identify stuff that might actually be broken) -- code samples to understand the problem are the most efficient.

Cheers,

Kevin

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2cb3d29a-46a5-4bb9-9d97-a010b60721a9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Charles Munat]

Thanks! This is very helpful.

If you're asking how the documentation could be improved, well, a discussion of how it actually works (such as yours) would be helpful.

The docs appear to consider core-image in a vacuum -- as if you're dropping it into the body of the page with nothing else. But, of course, I was putting it into another element which was in another element etc. I'd yanked those from other examples (I've been playing with Polymer for only the past couple of days), so I was not-so-blissfully unaware that the CSS Flexbox settings of the parent element would have a significant effect. Took me a while to realize that "layout vertical center-center" on the parent was what was constraining my box to a small portion of the visible area.

Some discussion -- especially when working with background images -- of how the various pieces inter-relate (or at least a link to same) would probably help others.

Thank also for your invitation to post questions. That's great, but, of course, even more desirable would be to improve the documentation to the point where questions were unnecessary. Anything I can do to help, let me know.

It's still quite confusing. If I use a standard img element and set min-height and min-width to 100% I get exactly the behavior I desire. If I use the core-image element and try to use min-sizes, it doesn't appear at all (obviously because in one case it's foregrounded and in the other backgrounded -- but what the benefit of backgrounding the image is is not clear).

Chas.

[to.ks...@gmail.com]

I agree that the core-image docs could be improved a little, as well as possibly some additional features.  One useful feature to introduce might be a new attribute that forces the load/preload process to wait for the src image file to actually exist (perhaps with a mandatory timeout).  This is useful when a separate server-side process is dynamically creating the image file(s) which you are trying to display.  Not sure if there is a straightforward way to build that as a feature.  I've done so in my polymer app with some extra javascript, but it would be a nice addition to the component.

Another thing I'm looking for is a way to force a refresh of the image (prevent loading it from the cache even when the src file location is the same).  Anyone know if there is currently an easy way to do that with core-image?

Keep up the good work polymer team!

Kelly

[to.ks...@gmail.com]

ps:  Regarding the second point/question I posed in my previous reply, I just noticed the way to prevent loading the core-image src from browser cache.  I noted that the demo examples for core-image appends the following to the src location in order to force a refresh of the image:

"?" + Math.random();

Fair to assume that is the best practice?

Kelly