CMS managed images are getting height and width of 0 on some reloads

Question

I'm using the Composite C1 CMS v4.2 Update 1. In some of my pages which make use of the Media section and some programmatic image population from the Media section I periodically get a width and height of 0 for all images that come out of the Media section unless I specifically enter the width and height of the images. Below is an example of the programmatically populated images. I suppose I could try and populate the height and width through the code, but Composite C1 appears to do that using the MediaURL() method below, it just happens to be making them 0 in some cases. In the CMS Content section, when I specifically add the height and width it works fine, however there is no height and width dialog in the WYSIWYG Image properties so you are forced to go into the source and edit the IMG tag manually. Hopefully I'm doing something seriously wrong here because this seems like it's going to be a problem for us.

@{
    string folderPath = CurrentPageNode.Url.Substring(10).Replace("/","_");
    folderPath = "/" + folderPath;
    var images = Data.Get<IImageFile>().Where(image => image.FolderPath == folderPath).OrderBy(image => image.FileName).ToList();
    string cssClass = "";
 }

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0">
<head>
</head>
<body>      
    <div class="row">
        @foreach (var image in images)
        {
            if (image.FileName.Length > 11 && image.FileName.ToLower().Substring(0,11) == "application")
            {
                cssClass = image.FileName.Substring(image.FileName.IndexOf("_")+1).Replace(".png","");
                <div class="col-md-12">
                    <div class="application">
                        <a href="@image.Description">
                            <img src="@Html.C1().MediaUrl(image)" alt="@image.Title" />
                        </a>
                        <a href="@image.Description">
                            <div class="squareText @cssClass">@image.Title</div>
                        </a>
                    </div>
                </div>
            }
        }
    </div>
</body>

score 0 · Answer 1 · answered Nov 20 '14 at 07:56

there is no height and width dialog in the WYSIWYG Image properties

When you manually insert an image on a page in Visual Editor, on the Advanced tab of the Image Properties dialog, you can set "Maximum Width" and/or "Maximum Height".

(Please see http://users.composite.net/Insert-Image)

In the markup it will add two parameters to the image URL, for example:

<img src="~/media(40ef35a6-2ed9-4daa-a5db-c47ecc13e6d6)?mw=20&amp;mh=20" />

The image URLs in Composite C1 support even more parameters (like "w" for the width and "h" for the height) you can use when building them. More info on the parameters are here: http://docs.composite.net/Configuration/Resizing-Images

As to building URLs, in C1 Razor functions, you have at least two ways of doing so - http://docs.composite.net/Functions/Razor/Rendering-URLs

When you use this, for example:

<img src="~/media(@Image)" />

or

<img src="@Html.C1().MediaUrl(@Image)" />

simply append your parameters and even use variables for the values. Say, your Razor function has two input parameters like Width and Height, you can go like this:

<img src="~/media(@Image)?mw=@Width&amp;@Height" />
<img src="@Html.C1().MediaUrl(@Image)?mw=@Width&amp;@Height" />

Hopefully, all this info will help you in your tasks.

Thanks for the response, although I actually did try the mw,mh attribute before I submitted this question. I left that out of my question for brevity although that was probably a mistake. I did just try the w=45, and h=45 attributes but unfortunately it does not fix this issue either. I still have to use a standard HTML width and height attribute or else Composite C1 it will periodically assign a width and height of 0 to my images. — Crob, Nov 20 '14 at 16:11

CMS managed images are getting height and width of 0 on some reloads

1 Answers1