Replacing Category Text With Images

I'm trying to replace the category text (parent categories) with the image of the parent category. I'm using nopcommerce 4.10.

example:
http://ahold.identitygroup.com/
I want to replace the 'Products By Department' & 'Products By Type' (which are parent categories) with the image thats assigned to them.

any help is GREATLY appreciated as i've been trying to dig through the code for the past few days and can't figure it out to save my life. Thanks in advance!

Hi
Where exactly do you want to replace the parent categories with the images? For example in this page https://demo.nopcommerce.com/shoes , shoe is the category and apparel is the parent category. The parent category appears in the breadcrumb as well as in the left panel. Are you looking to replace the apparel with its image in both places?

Also, the site you have linked as registration is disabled and can't be accessed without a login so it can't be referred to

Thanks for the quick reply! I'm just looking to replace it in the circled area in the screenshot.
https://imgur.com/a/eMzhKUA

Thanks for the help!!

Looks like you want to replace the text from the Menu with the Category image. You will have to make some customization to accomplish this.
1. Extend the CategorySimpleModel from Nop.Web.Models.Catalog and add a new string property for CategoryPictureUrl
2. At CatalogModefFactory's PrepareCategorySimpleModels method, get the category's picture URL and map it with the newly created CategoryPictureUrl property
3. At the _CategoryLine.TopMenu.cshtml view file replace the category name and show the image using the CategoryPictureUrl

Thank you for this!

Bare with me as i'm new to this. I was able to take care of 1)

For 2), im assuming your referring to Nop.Web/Factories/ICatalogModelFactory.cs ? (around line 81 - List<CategorySimpleModel> PrepareCategorySimpleModels(); ?)
If so how would i go about accomplishing this in this file?

sorry for the newbeish questions. I REALLY appreciate your help!!!!!

ICatalogModelFactory.cs is the interface. The actual definition of the method will be on Nop.Web/Factories/CatalogModelFactory.cs so you need to look at it instead

Ok. So this is what you referring to https://imgur.com/a/ZL5clwB correct?
But how to i assign the url of the category ? none of the methods i'm finding have a url property. sorry i'm not extremely familiar with c#.

nevermind i was able to figure it out.

I just used the solution below

   var categoryService=Nop.Core.Infrastructure.EngineContext.Current.Resolve<Nop.Services.Catalog.ICategoryService>();
                var pictureService = Nop.Core.Infrastructure.EngineContext.Current.Resolve<Nop.Services.Media.IPictureService>();
             var categoryEntity = categoryService.GetCategoryById(category.Id);
            var categoryImageUrl = pictureService.GetPictureUrl(categoryEntity.PictureId,70)

  <img src="@categoryImageUrl" alt="" title="@category.Name" />

Thanks for the help!

Are you aware that if in Admin you edit a Category that you can "Show on home page"?
Selecting that will show the categories with image on the home page below your 'welcome' text.
It's not quite the same as putting images in the "menu", but you could possibly hide the menu and reposition the home page categories at the top of the page.  

Or, otherwise, you could look at the code here and reuse it:
CatalogModelFactory.cs
PrepareHomepageCategoryModels()

Thank you for that, i was not aware of that however i was able to make it work the way i was trying. i needed it to be in the actual navigation of the parent categories. Greatly appreciate your reply though!!