Localization of images

[mpconsultsai]

I am currently using your service - and wondered if it would be feasible to extend it to include image localization using a similar pattern that you have used to create text localization. I was thinking of creating a directive e.g.i18nImg that looks for a directory structure e.g. /i18n/images/[culturecode] and then loads the appropriate images (defaults to the default directory if the culture does not exist). I could easily write a version myself - but just wondered if it was feasible to extend your service to include this functionality. Do you have any thoughts on this or are there any other ways of doing this?

[lavinjj]

You could do that, but I would probably just use additional tags in the dictionary object itself that include the path to the image and then use the i18nAttr directive to set the src attribute. But your way will also work. If you want fork the current code and add the functionality and send me a pull request and I'll be happy to include it in the current code stream.

[mpconsultsai]

OK - I think your idea is a simpler option and will review how to implement this and get back to you.

[mpconsultsai]

I decided to try the initial approach as follows:

  // builds the url for locating an image
                buildImgUrl: function(imageUrl) {
                    return $http({ method: "GET", url: imageUrl, cache: false });
                },

  // translation directive that handles the localization of images.
    // usage <img data-i18n-img-src="IMAGE" />
    .directive('i18nImgSrc', [
        'localize', function(localize) {
            var i18NImageDirective = {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    var i18Nsrc = attrs.i18nImgSrc;
                    var imagePath = '/i18N/images/' + localize.language + '/';
                    var imageUrl = imagePath + i18Nsrc;
                    localize.buildImgUrl(imageUrl).success(function() {
                        element[0].src = imageUrl;
                    }).error(function() { element[0].src = '/i18N/images/default/' + i18Nsrc; });
                }
            };
            return i18NImageDirective;
        }
    ]);

This was a first iteration - but would be interested in any feedback in relation to improving the code Thanks.