Please login to access all of the features of the Community Site.


    Understand File Types

    Every image, document and attachment in Rock belongs to a file type. The file type decides where Rock stores the file, who can view or upload it, how long browsers keep it and how large it can be. Set a file type up once and every upload of that kind follows the same rules.

    Find your file types

    Go to Admin Tools > Settings > General > File Types to see every file type in your Rock instance. The grid shows each type's storage type, how many files it holds and whether it requires view security. A Public Viewable label marks a type whose files anyone can view. Select a file type to see its settings, then select Edit to change them.

    Rock uses some file types itself, such as Check-in Label and Person Image. You can change most settings on these system types but not their names.

    When you add a File or Image attribute, the attribute's File Type setting picks the file type its uploads follow.

    File type settings

    The settings that follow appear when you edit a file type.

    Name - The name of the file type. Rock locks the name on system file types.

    Description - A short note about what the file type is for.

    Icon CSS Class - The icon that represents the file type.

    Requires View Security - Turn this on to check that a person has View permission before Rock shows a file of this type. Leave it off for files anyone can view. The check adds a little time to every file request.

    Allow Anonymous - Lets anyone upload files of this type without Rock checking Edit permission on the file type.

    Storage Type - Where Rock keeps the files. Rock includes four storage types:

    • Database - Saves the file in your Rock database. This is the simplest option, but the database grows with every upload.
    • FileSystem - Saves each file on the web server. Files go in ~/App_Data/Files unless you enter a different folder in the Root Path setting that appears for this type.
    • Azure Blob Storage - Saves files in an Azure blob container. Use Azure Blob Container Name and Azure Blob Container Folder Path to choose the container and an optional folder. If you leave the container name blank, Rock uses the provider's Default Container Name.
    • Google Cloud Storage Provider - Saves files in a Google Cloud Storage bucket.

    Set up your Azure and Google account details at Admin Tools > Settings > System > File Storage Providers. A file stays in the storage type it had when it was uploaded, so changing a file type's storage type affects only new uploads.

    Attributes

    Attributes - Add attributes to store a different value on each file of this type. Use the attribute grid to add, edit or delete them.

    Cache Settings

    Cache To Server File System - Saves a copy of each image Rock serves, including each resized version, in the ~/App_Data/Cache folder on the web server. Later requests for the same image skip the storage provider. Leave it off for files that need extra security.

    Cache Control Header Settings

    Cacheability Type - Tells browsers and shared caches such as a content delivery network (CDN) how they can keep a file. Public lets any browser or CDN keep it. Private lets only the person's browser keep it. No-Cache makes the browser check for changes on every load. No-Store tells the browser never to keep the file, which suits sensitive files such as check images.

    Max Age - How long a browser can keep the file before it checks again. This setting appears for the Public and Private types.

    Max Shared Age - How long a shared cache such as a CDN can keep the file. This setting appears for the Public type. If you leave it blank, caches typically use Max Age.

    Preferred File Settings

    Max File Size - The largest file Rock accepts, in bytes. Leave it blank for no limit. Rock enforces this limit only when Preferred Settings Required is on.

    Maximum Width and Maximum Height - The largest width and height, in pixels, for images of this type. Leave them blank for no limit. When Rock saves an image larger than these limits, it shrinks the image to fit and keeps its proportions.

    Preferred Settings Required - Turns the maximum file size, width and height into hard limits. Rock then rejects a file that goes over a limit and shows a message that names the limit, instead of shrinking the image.

    Resize images with GetImage.ashx

    Serving your image files with the right dimensions is the simplest way to improve your website performance. It means less load on your site and faster images for your users. And with Rock, it couldn't be easier!

    We think you’ll find the information below helpful and straightforward on how to use these tools for your best benefit. Oh, and if you are anything like us you might even find yourself having a little too much fun with your content. So, we will spare you and only go over the primary and most useful commands, knowing that this is a powerful tool where the sky is the limit.

    Before anything – you have to set up an image attribute on your content channel or whatever it is you are standardizing such as page attributes.

    Alright let's look at an example. Let's say you have a content channel with an item attribute named "Public Photo." Normally in your Lava you would add that image to your mark up like this:
    GetImage.ashx?Guid={{ detailImageGuid }}

    Here we see the original photo without any resizing.

    Let's make this image smaller. GetImage.ashx?Guid={{ detailImageGuid }}&w=468&h=232

    Those are super basic. Let’s add some extra commands. Say we always want the images to be a certain aspect ratio and if the image uploaded doesn’t meet that size, then a black border will fill in the rest of the area and the image will align to the top center. Our command would then look something like this:GetImage.ashx?Guid={{ detailImageGuid }}&w=768&h=432&mode=pad&bgcolor=black&anchor=topcenter&quality=100

    That’s just a glimpse of how you can use these tools to standardize your content.

    Commands

    Width and Height

    • &w= sets the width of the image in pixels.
    • &h= sets the height of the image in pixels.

    If only the width and height is set, then the aspect ratio of the image is maintained and defaults to the width size.

    Modes
    &mode=

    • max Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other size is altered to maintain the same aspect ratio of the input image.
    • pad Resizes the image to fit within the width and height dimensions without cropping or distorting the image and fills the remaining space with a solid color. Use the bgcolor command to set the color to fill the space.
    • stretch Stretches the images to the W and H parameters regardless of the actual size of the image.

    Background Color
    &bgcolor=
    Named colors and hex values are supported.

    Alignment
    &anchor=
    The alignment parameter allows you to specify the starting location within the size parameters. Valid values are:
    topleft
    topcenter
    topright
    middleleft
    middlecenter
    middleright
    bottomleft
    bottomcenter
    bottomright

    Crop
    &crop=
    Resizes the image to fill the width and height dimensions and crops any excess image data. The resulting image will match the width and height constraints without distorting the image. Cropping is used by coordinates, x1, y1, x2, y2.

    Disable Optimizations
    &disableoptimizations=true
    Allows disabling resizing by adding disableoptimizations=true to the query string. This allows a CDN or image optimization service to do the resizing. Without this, the query string parameters for resizing will often conflict causing both Rock and the CDN to resize and optimize the file.

    Compression and Performance

    Compression helps remove unnecessary data from your images, while providing the control you need for high quality at small sizes.

    • format The output format to convert the image to. Valid options are jpg, png, gif.
    • quality Controls the output quality. Valid values are in the range of 0-100, and the default is 90. Quality can often be set much lower than the default, especially when serving high-DPR images.

    Note

    More Info
    For a list of even more image resizing options, checkout this website: ImageResizer.