Product Picture mapped to Attribute Option Value

Hi,
I need to display a product picture for each color attribute. So suppose I have a t-shirt, that is available in two color, then I need to map product picture to the color option and when customer select that color option... change the picture as well.

Any idea how to do that.

I did this same thing to my code base about 9 months ago.  

Add PictureId int to the table ProductVariantAttributeValue

Modify the Model and View in the Admin project to include it
Nop.Admin.Models.Catalog.ProductVariantModel.ProductVariantAttributeValueModel  -  make sure it has the tag [UIHint("Picture")], this makes the editor into the upload control
Nop.Admin.Views.ProductVariant._CreateOrUpdateProductAttributeValue.cshtml

Then in the Web project, modify the Model and View to display the pictures

Nop.Web.Models.ProductModel.ProductVariantModel.ProductVariantAttributeValueModel, add a string property for the URL of the picture

Nop.Web.Controllers.CatalogController, function PrepareProductVariantModel(), use the IPictureService to populate your URL property on the model with what it should be for the PictureId on the ProductVariantAttributeValue.  There is a block in that function that is already creating the pvaValueModel so just add this line to that:

PictureThumbnailUrl = _pictureService.GetPictureUrl(pvaValue.PictureId, 20, false)

Finally, modify the View to display the pictures.  Nop.Web.Views.Catalog._ProductAttributes.cshtml.  I was only doing it for attributes that were a radio list but the idea would be the same for any of them:

if (pvaValue.PictureThumbnailUrl != "")
{ 
      <img src="@(pvaValue.PictureThumbnailUrl)" />
}

The big benefit to doing it this way is that you don't have to worry about the upload control on the admin side and the PictureService lets handle the resizing so you don't have to mess with your source images if you decide to tweak that.  Just change your target size and it will regenerate the thumbnails for you.

I did this same thing to my code base about 9 months ago.  

Add PictureId int to the table ProductVariantAttributeValue

Modify the Model and View in the Admin project to include it
Nop.Admin.Models.Catalog.ProductVariantModel.ProductVariantAttributeValueModel  -  make sure it has the tag [UIHint("Picture")], this makes the editor into the upload control
Nop.Admin.Views.ProductVariant._CreateOrUpdateProductAttributeValue.cshtml

Then in the Web project, modify the Model and View to display the pictures

Nop.Web.Models.ProductModel.ProductVariantModel.ProductVariantAttributeValueModel, add a string property for the URL of the picture

Nop.Web.Controllers.CatalogController, function PrepareProductVariantModel(), use the IPictureService to populate your URL property on the model with what it should be for the PictureId on the ProductVariantAttributeValue.  There is a block in that function that is already creating the pvaValueModel so just add this line to that:

PictureThumbnailUrl = _pictureService.GetPictureUrl(pvaValue.PictureId, 20, false)

Finally, modify the View to display the pictures.  Nop.Web.Views.Catalog._ProductAttributes.cshtml.  I was only doing it for attributes that were a radio list but the idea would be the same for any of them:

if (pvaValue.PictureThumbnailUrl != "")
{ 
      <img src="@(pvaValue.PictureThumbnailUrl)" />
}

The big benefit to doing it this way is that you don't have to worry about the upload control on the admin side and the PictureService lets handle the resizing so you don't have to mess with your source images if you decide to tweak that.  Just change your target size and it will regenerate the thumbnails for you.

I need the same thing, but need to upload multiple images for each color option. Any idea on extending it this way?

Awaiting your response.

Thanks in advance.