Option to show category picture on the category page

I've just done this for a client.  I think it would be nice to have as a core option  (for Manufacturer page too)
(I've not yest added the settings to Admin)


CatalogSettings.cs (at end)

        /// <summary>
        /// Gets or sets a value indicating whether to show the category picture on the category page
        /// </summary>
        public bool ShowCategoryPagePicture { get; set; }
        
        
        
MediaSettings.cs (after CategoryThumbPictureSize)

        public int CategoryPagePictureSize { get; set; }


InstallationService.cs
(after CategoryThumbPictureSize)

                    CategoryPagePictureSize = 256,

(after FileUploadMaximumSizeBytes)

                    ShowCategoryPagePicture = false,


CatalogController.cs (public ActionResult Category( ...    After  var model = category.ToModel(); )
            //prepare picture model
            if (category.PictureId != 0 && _catalogSettings.ShowCategoryPagePicture)
            {
                int categoryPictureSize = _mediaSettings.CategoryPagePictureSize;
                var categoryPictureCacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_PICTURE_MODEL_KEY, category.Id, categoryPictureSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured());
                model.PictureModel = _cacheManager.Get(categoryPictureCacheKey, () =>
                {
                    var pictureModel = new PictureModel()
                    {
                        FullSizeImageUrl = _pictureService.GetPictureUrl(category.PictureId),
                        ImageUrl = _pictureService.GetPictureUrl(category.PictureId, categoryPictureSize),
                        Title = category.Name,
                        AlternateText = string.Format(_localizationService.GetResource("Media.Category.ImageAlternateTextFormat"), category.Name)
                    };
                    return pictureModel;
                });
            }

            
Styles.css  (after   .category-page .category-description, .manufacturer-page .manufacturer-description)

.category-page .category-picture
{
    float: left;
}


/Views/Catalog/CategoryTemplate.ProductsInGridOrLines.cshtml
(I put this
            @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>
            }
            
inside my Description div (indicated below), so that pic is on left and text is to its right, and will flow around it if more text than pic height
    @*description*@
    @if (!String.IsNullOrWhiteSpace(Model.Description))
    {        
        <div class="category-description">
             @*I PUT ABOVE CODE HERE*@
            @Html.Raw(Model.Description)
        </div>
        <div class="clear">
        </div>
    }



upgrade.sql

IF NOT EXISTS (SELECT 1 FROM [Setting] WHERE [name] = N'catalogsettings.showcategorypagepicture')
BEGIN
  INSERT [Setting] ([Name], [Value])
  VALUES (N'catalogsettings.showcategorypagepicture', N'false')
END
GO

IF NOT EXISTS (SELECT 1 FROM [Setting] WHERE [name] = N'mediasettings.categorypagepicturesize')
BEGIN
  INSERT [Setting] ([Name], [Value])
  VALUES (N'mediasettings.categorypagepicturesize', N'256')
END
GO

Can you post a link to see how it works?

Thanks, Dennis. Please vote here

infinito62 wrote:

I've done some screen shots - Before and After:

http://imageshack.us/photo/my-images/525/categorypagebefore.png/

http://imageshack.us/photo/my-images/225/categorypageafter.png/

Note, I added margin around the image:

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

It would be nice to have as standard, with the possibility to choose to have picture on the left or on the right