Hi all,

I would like to show the category image on the category page if one is available.

In our "theme", each category page should have a banner-like image right below the breadcrums. Please see image here: http://www.sigmaitsupport.com/LAB/category-banner.png

I tried this:

@if (!String.IsNullOrEmpty(Model.PictureModel.ImageUrl))
    { 
        <img alt="@Model.PictureModel.AlternateText" src="@Model.PictureModel.ImageUrl" title="@Model.PictureModel.Title" />
    }

on CategoryTemplate.ProductsInGridOrLines.cshtml but it always returns nothing.

Also, should I try to pick the "default" image for the category, or I should create a separate "attribute" for the category?

Thanks a lot.

Anyone?

Thanks.

LAM-ECOM wrote:

Hi LAM-ECOM,

You can give a try to the Anywhere Sliders plugin.
It allows you to create banners with several images and map these banners(sliders) to a category or a number of categories if you want the same banner to be shown on several categories.
The plugin has widget support, so that you can easily integrate it by placing the sliders on the category_top widget zone.
The plugin has a free trial that you can play with and also has a detailed online documentation.
http://www.nop-templates.com/p/4/nop-anywhere-sliders

Should you have any questions we will be glad to answer!

Hope this is helpful!

Best Regards

7Spikes wrote:

Thanks for the template. I will check it out.

However, I would still love to know how to do this using the category image. I just need to display an image. Not Slider or any other effect.

Thanks.

.

Hi LAM

From having a look at CatalogController.cs it doesn't look like the PictureModel for the Category is created in the Category Method.

It creates for subcategories but not the current category

//prepare picture model
                    int pictureSize = _mediaSetting.CategoryThumbPictureSize;
                    var categoryPictureCacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_PICTURE_MODEL_KEY, x.Id, pictureSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured());
                    subCatModel.PictureModel = _cacheManager.Get(categoryPictureCacheKey, () =>
                    {
                        var pictureModel = new PictureModel()
                        {
                            FullSizeImageUrl = _pictureService.GetPictureUrl(x.PictureId),
                            ImageUrl = _pictureService.GetPictureUrl(x.PictureId, pictureSize),
                            Title = string.Format(_localizationService.GetResource("Media.Category.ImageLinkTitleFormat"), subCatName),
                            AlternateText = string.Format(_localizationService.GetResource("Media.Category.ImageAlternateTextFormat"), subCatName)
                        };
                        return pictureModel;
                    });

At a guess the following should do the trick in 2.5 do it after you create the model on line 701(?)

//prepare picture model
            int pictureSize = _mediaSetting.CategoryThumbPictureSize; // use a different size here
            var categoryPictureCacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_PICTURE_MODEL_KEY, model.Id, pictureSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured());
            model.PictureModel = _cacheManager.Get(categoryPictureCacheKey, () =>
            {
                var pictureModel = new PictureModel()
                {
                    FullSizeImageUrl = _pictureService.GetPictureUrl(x.PictureId),
                    ImageUrl = _pictureService.GetPictureUrl(x.PictureId, pictureSize),
                    Title = string.Format(_localizationService.GetResource("Media.Category.ImageLinkTitleFormat"), model.Name),
                    AlternateText = string.Format(_localizationService.GetResource("Media.Category.ImageAlternateTextFormat"), model.Name)
                };
                return pictureModel;
            });

Not tested this code but should be along these lines

HTH

Dave

daveb wrote:

Hi Dave,

I will give your recommendation a try.

Is there a "best practice" to follow when modifying a controller so it won't break on next update?

Views changes are supposed to be done on a theme folder. What about controllers/models/etc?

Thanks for your input!

LAM.

Hi LAM-ECOM,

There is an easy solution for this.
Just put your banner image on the Description field of any category and you are ready!

This is what I did in one of my client Themes, and I don't recall having to modify the controller (Store only had top-level categories, so I don't know if it works for sub-cat's, but I don't see any reason why it should not)

\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml


        <div class="category-description">
            @if (Model.PictureModel != null && !String.IsNullOrWhiteSpace(Model.PictureModel.ImageUrl))
            {
            <div class="category-picture">
                <img alt="@Model.PictureModel.AlternateText" src="@Model.PictureModel.ImageUrl" title="@Model.PictureModel.Title" />
            </div>
            }
            @Html.Raw(Model.Description)
        </div>



I made it appear to the left of the text description:

\...\...css
.category-page .category-picture{
  float:left; margin:5px;
}