CODEWITHSUNDEEP
c#asp.net-mvcasp.net-mvc-4asp.net-mvc-partialview
Urban Björkman
Urban Björkman

Reputation: 2105

What is the correct place for image size logic in MVC

Background:

In our webshop application we have a number of partial views to make all kinds of product lists. In a major refactoring effort we want to get rid of most, possibly all but one of these partials to avoid all the duplicated code.

The lists are a simple <ul> <li> with the design properties specified by CSS as it should be.

We have existing framework to dynamically scale images to appropriate sizes by the image url like this

http://images.shop.com/data/product/160x200/5155-5ca8e.jpg

This image would be scaled to 160x200

Since we have the possibility we dont want to ask the client to request images that are bigger than they need to be.

Question:

What is the most correct place for image size-selection logic?

or, to put it in another way. At what point should the img src propery be detemined in this context?

There are a number of potential places for this kind of logic

  1. Main Model/View/Controller Context
  2. Partial Model/View/Controller Context
  3. Javascrit
  4. HTTP handler for images

I think #1 or #2 probably makes the most sense. And if so, is this Model, View or Controller logic? All of them have some kind of advantage, but neither seems really appropriate

enter image description here

The partial to render product lists can be used to render all kind of different productlists. From fullscreen imagesliders, to small 10x10 pixel thumbnails. And we dont want to force the thumbnails to request fullscreen images just to accomodate the potentially largest possible list.

The current logic is basically view-logic. By calling the partial list for the place in question.

(This is a distilled version of our current approach)

Landingpage.cshtml

<ul>
Html.RenderAction("ListRandom", "Product", new { Category = feed.catId});
</ul>

ProductController.cs

    public PartialViewResult ListRandom(int? CategoryId)
    {
        var model = new ProductListModel { ProductsRandomGet(CategoryId) };
        return PartialView("_ProductList", model);
    }

_ProductList.cshtml

<li>
      <a href="@item.href">
          <img alt="@item.Name" 
               src="data/product/35x44/@item.Image" />  /* Image Size */ 
          <div class="listItemInfo">
               @item.Name    
               @item.Price                    
          </div>
      </a>
</li>

While this works, it leads to a lot of duplicate html for all the different kinds of product lists. The html for the different lists are almost identical, and all the differences can be put in CSS.

But not the image src property

Upvotes: 2

Views: 1513

Answers (2)

CodeCaster
CodeCaster

Reputation: 151586

I don't think the controller is appropriate, because the controller doesn't do display logic. That's the view's responsibility. It's still not clear to me from your question where the decision is currently made which image size to include, where the image sizes come from (do you use a handful of fixed sizes, or can they vary per image?) or how many scenarios there are.

You could for example use partial views to display the image only, like ProductImageSmall (more reusable but less specific than, say, ProductImageShoppingCart):

<img src="data/product/35x44/@item.Image" [...] />

And then in the parent view, you can decide which partial to use to render the item collection.

You could also include the resolution in the model:

<img src="data/product/@(item.ImageWidth)x@(item.ImageHeight)/@item.Image" [...] />

Or stick those dimensions in the ViewBag instead.

There too many pros and cons for every way to list, so please try to narrow down your question further if you want a more specific answer.

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16723

I believe you want to deliver the appropriate sized image version based on the viewport of your browser.

In an idea world, that would be the purview of the HTML element, Picture, which you would build in either a View or Partial View:

<picture width="500" height="500">
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" alt="">
   <p>Accessible text</p>
</picture>

ref: http://www.w3.org/TR/html-picture-element/

Unfortunately we are a long way off from any kind of meaningful support.

You could get tricky with your View/Partial View creation and burn in a <style> tag with media queries, but that will only help if your design allows you to add images as background images to an element: 

@media only screen and (min-width: 700px) {
   div{background-image: url(700px-img.png);
}

@media only screen and (min-width: 90px) {
   div{background-image: url(900px-img.png);
}

But, applying a background image like that introduces other issues.

At this moment, I think a javacsript solution is your best bet, using your Partial View/View to build the markup that the script can consume properly. This one from Scott Jehl is a good bet:

https://github.com/scottjehl/picturefill

Further reading: http://css-tricks.com/which-responsive-images-solution-should-you-use/

Upvotes: 2

Related Questions