Changing the image

[masterbee]

Hi @FokkeZB,

I am noticing that the only way to change the image is to change the backgroundImage property and then trigger a post layout event. Is this the correct way to change the image? I was hoping to have the new image go through the same treatment as the original by being resize and cropped to cover correctly.

I am not sure that is the right way since the first image is well proportioned but the next image get treated like the regular Alloy background image ( sized and distorted to fit )...

Thoughts?

Alloy Code:

<View id="cover" module="utilities/image" onSingletap="addCover" backgroundImage="images/personal.cover.create.jpg" backgroundSize="cover" bottom="25%"   top="0">
 <View  id="covertext" class="fillwidth vertical" top="30dp" touchEnabled="false" >
  <Label text="+" top="0" class="fullwidth huge-font-bold font-white" textAlign="center" touchEnabled="false"/>
  <Label text="L('add_cover', 'Add Cover')" top="0" class="fullwidth large-font-bold font-white" textAlign="center" touchEnabled="false" />
 </View>
</View>

JS:

function addCover( e ) {
    addImage( e );
    $.covertext.visible = false;
});

function addImage( e ) {
    var source = e,
    element = e.source;

    Ti.Media.openPhotoGallery({
        success: function( event ) {
            var cropRect = event.cropRect;
            var image = event.media;
            if ( event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO ) {
                var cropped = Image.fit( image, cropRect, true );
                element.backgroundImage = cropped;
                element.rawData = cropped;
                element.fireEvent( 'postlayout' );
            }

        },
        cancel: function() {},
        error: function( error ) {},
        allowEditing: true,
        showControls: true,
        mediaTypes: [ Ti.Media.MEDIA_TYPE_PHOTO ],
    });
}

[FokkeZB]

Yes, that's correct. A module-tag only acts on creation and there's no way to listen to changes in the View's properties either.

A way to solve this would be to have the module export methods you can call yourself after you change the backgroundImage:

require('lib/ui').updateBackgroundImage($.myView);

I have no time unfortunately to look into this now but feel free to do a PR.