12
Vote

Option to show category picture on the category page

description

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

Forum source: http://www.nopcommerce.com/boards/t/17750/option-to-show-category-picture-on-the-category-page.aspx

comments

rudgr wrote Aug 11, 2016 at 6:46 AM

I cannot seem to find this issue in https://github.com/nopSolutions/nopCommerce/issues ?