Category Image as banner on CategoryTemplate.ProductsInGridOrLines.cshtml

Hi,

I tried everything to bring image of the current category to its category page Like when we Navigate category "Computers", there is an LCD (Image) saved which should be shown at the top of the page side

I did this:

    <div class="page-title">
        @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>
            }
    </div>


This was as per the direction of forum post https://www.nopcommerce.com/boards/t/17750/option-to-show-category-picture-on-the-category-page.aspx

but my image is still not displaying. I checked database and everything but nothing is working for me.

FYI I am using 2.65 version of NopCommerce so think there was no need to implement the code suggested but I tried everything to get it done but Image is not showing. I get it like this <img src> with no source.

Can you solve this issue and point out where I am wrong.

Thanks a many

Jay Khatri

looking at the code for CatalogController.Category I don't see any pictures loaded for the category (only the subcategories) So it seems that Model.PictureModel.Whatever is always null

Thanks for your reply.

it is there, to determine, I just checked in Administration --> Catalog --> Categories --> List

Click Edit in front Computers Category and then I got the picture in Picture attribute of the form opened. I think I am not wrong.

As far as I understood categories means parent as null and by default Computers is set to Category

Am I wrong?

jaykhatri wrote:

I was looking at the source code of nop and don't see any code loading pictures for the current category (only for sub-categories). It doesn't really matter if the pictures are in the database because nop doesn't load them for the current category. What you need to do in CategoryController.Category is add code to load the picture, something like:

            //prepare picture model
            int ps = _mediaSettings.CategoryThumbPictureSize;
            var cacheKey = string.Format( ModelCacheEventConsumer.CATEGORY_PICTURE_MODEL_KEY , categoryId , ps , true , _workContext.WorkingLanguage.Id , _webHelper.IsCurrentConnectionSecured() );
            model.PictureModel = _cacheManager.Get( cacheKey , () =>
            {
                var pictureModel = new PictureModel()
                {
                    FullSizeImageUrl = _pictureService.GetPictureUrl( category.PictureId ) ,
                    ImageUrl = _pictureService.GetPictureUrl( category.PictureId , ps ) ,
                    Title = string.Format( _localizationService.GetResource( "Media.Category.ImageLinkTitleFormat" ) , category.Name ) ,
                    AlternateText = string.Format( _localizationService.GetResource( "Media.Category.ImageAlternateTextFormat" ) , category.Name )
                };
                return pictureModel;
            } );

above code is untested and probably needs some adjusting, but you get the meaning

What I did is this, this is as per forum that I submitted in opening of this thread. I think this is enough to collect picture from there.

public ActionResult Category(int categoryId, CatalogPagingFilteringModel command)
        {
            var category = _categoryService.GetCategoryById(categoryId);
            if (category == null || category.Deleted)
                return RedirectToRoute("HomePage");

            //Check whether the current user has a "Manage catalog" permission
            //It allows him to preview a category before publishing
            if (!category.Published && !_permissionService.Authorize(StandardPermissionProvider.ManageCatalog))
                return RedirectToRoute("HomePage");

            //'Continue shopping' URL
            _genericAttributeService.SaveAttribute(_workContext.CurrentCustomer, SystemCustomerAttributeNames.LastContinueShoppingPage, _webHelper.GetThisPageUrl(false));

            if (command.PageNumber <= 0) command.PageNumber = 1;

            var model = category.ToModel();

            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;
                });
            }

Please note that it is already added in my code.

well, the code is working for me on a plain-vanilla nop 2.65 with the exeception of

_catalogSettings.ShowCategoryPagePicture
_mediaSettings.CategoryPagePictureSize;

Those settings I don't have. So maybe somethings wrong with it, try (for debug) this:

            if ( category.PictureId != 0 /*&& _catalogSettings.ShowCategoryPagePicture*/ )
            {
                int categoryPictureSize = _mediaSettings.CategoryThumbPictureSize; // _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;
                } );
            } 

Great!!!

Its working, problem was with this really /*&& _catalogSettings.ShowCategoryPagePicture*/

Thanks a many.

Jay Khatri