Feature request: Circular internal image

[AaronBuxbaum]

When an image is used inside an orbicular directive, it displays as you'd expect (a rectangle), and expands over the outside progress circle. In my application, I then have to use CSS to round out the edges so that it becomes a circle on the inside.

Use case:

<orbicular total="..." progression="...">
   <img src="any random image file, assume non-circular"/>
</orbicular>

I'm looking for internal content to automatically be put into a circle form (or have the overflow just not display)

[stakach]

I think this should already be occurring.. https://github.com/cotag/orbicular/blob/master/_orbicular.scss#L116

I have noticed that it doesn't work on older versions of android, otherwise I think it should be working.

I could be wrong, so if you can work out what needs to change in the scss for it to work for you I'll happily update it or accept a pull request.

[AaronBuxbaum]

Here's what it looks like for me on Chrome, Win 7. My use case is within Angular-Material's toolbar, but I see no reason it shouldn't natively work. The code being used here:

<a href="#/profile" style="height: 100px; width: 100px; margin-left: 20px;" ng-if="loggedIn">
   <orbicular total="80" progression="70">
      <img src="http://revistasindromes.com/images/100x100.gif">
   </orbicular>
</a>

It acts the same without the <a> but I figure it's valuable to see how I'm setting the size constraints.

My hacky current solution is to add a SCSS class to the img tag with these properties:

.circle-profile {
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

I haven't had enough time to figure out something generic yet...

[stakach]

I tested on Chrome for OSX Would you be able to check adding

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

to div.co-content works for you?

If it does I'll cut a new bower release

[AaronBuxbaum]

This is within _orbicular.scss , under the function on line 114? I'm not seeing any difference at all in Chrome.

Maybe you can create a branch with the change (and maybe a demo showing it working) and I can branch off it and test for ya?

On Tue, Apr 7, 2015 at 2:31 AM Stephen von Takach notifications@github.com wrote:

I tested on Chrome for OSX Would you be able to check adding

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

to div.co-content works for you?

If it does I'll cut a new bower release

— Reply to this email directly or view it on GitHub https://github.com/cotag/orbicular/issues/24#issuecomment-90393624.

[stakach]

Updated with a demo. Will cut the new release now :) Thanks for pointing out the issue :+1:

[AaronBuxbaum]

I wouldn't call it an issue, but just want to note that if your image is larger than the size of the window, it'll cut it off and look funky. This is especially true if you're using a rectangular image. My solution at the moment (again, hasn't really been thoroughly tested) looks like this:

<orbicular total="80" progression="70" ng-if="ctrl.profile.profilePicture" >
   <div class="profile-picture" ng-style="{'background-image':'url({{ctrl.profile.profilePicture}})'}"></div>
</orbicular>

.profile-picture {
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

And here's Joe Biden inside the circle: Original picture: http://cnsnews.com/sites/default/files/images/joe%20biden%20COA.jpg

[stakach]

That's how you would do it (or like I had it in the demo CSS, using position absolute on an img element) I can't be making assumptions about the content in the circle so it is up to you to size the content appropriately. Happy to see it is working now!