How to implement/show images on left most categories list

Hi,

I have a requirement to show images with each main category and not to show subcategories on the left most categories list. I am not sure how to achieve this, any help in this regard will be appreciated.


Looking forward.

[UPDATE]

public class CategorySimpleModel : BaseNopEntityModel
    {
        public CategorySimpleModel()
        {
            SubCategories = new List<CategorySimpleModel>();
            PictureModel = new PictureModel();
        }

        public string Name { get; set; }

        public PictureModel PictureModel { get; set; }

        public string SeName { get; set; }

        public int? NumberOfProducts { get; set; }

        public bool IncludeInTopMenu { get; set; }

        public List<CategorySimpleModel> SubCategories { get; set; }
    }

i have added/modified CategorySimpleModel code in CategorySimpleModel.cs

but not getting anything in picture model. How should i load picturemodel object with picture details?

You need to populate it in a Factory routine
Have a look in PrepareCategorySimpleModels and
PrepareHomepageCategoryModels which loads up pictures for home page

Bingo!

I have done it by modifying some code in CatelogModelFactory.cs, here is the modified version of code:

 public virtual List<CategorySimpleModel> PrepareCategorySimpleModels()
        {
            //load and cache them
            var cacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_ALL_MODEL_KEY,
                _workContext.WorkingLanguage.Id,
                string.Join(",", _workContext.CurrentCustomer.GetCustomerRoleIds()),
                _storeContext.CurrentStore.Id);

            var pictureSize = _mediaSettings.CategoryThumbPictureSize;

            List<CategorySimpleModel> models = _cacheManager.Get(cacheKey, () => PrepareCategorySimpleModels(0));
            foreach (var item in models)
            {
                var categoryPictureCacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_PICTURE_MODEL_KEY, item.Id, pictureSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured(), _storeContext.CurrentStore.Id);
                item.PictureModel = _cacheManager.Get(categoryPictureCacheKey, () =>
                {
                    var cate = _categoryService.GetCategoryById(item.Id);
                    var picture = _pictureService.GetPictureById(cate.PictureId);
                    var pictureModel = new PictureModel
                    {
                        FullSizeImageUrl = _pictureService.GetPictureUrl(picture),
                        ImageUrl = _pictureService.GetPictureUrl(picture, pictureSize),
                        Title = string.Format(_localizationService.GetResource("Media.Category.ImageLinkTitleFormat"), cate.Name),
                        AlternateText = string.Format(_localizationService.GetResource("Media.Category.ImageAlternateTextFormat"), cate.Name)
                    };
                    return pictureModel;
                });

                

            }


            

            return models;


        }

and then I added this line:

<img src="@Model.Category.PictureModel.ImageUrl" style="width:100%" />

in _CategoryLine.Navigation.cshtml

and look what it looks like :


Thanks YIDNA for the help.