Edit

Image web resources

  • Article

Use image web resources to make images available for use in model-driven apps.

There are 5 types of image web resources:

  • PNG Format
  • JPG Format
  • GIF Format
  • ICO Format
  • Vector Format (SVG)

Note

Vector Format (SVG) web resources were added with the model-driven apps.

Capabilities of image web resources

With image web resources you can add images where you need them. Common uses include the following:

  • Custom table icons
  • Icons for custom ribbon controls and SiteMap subareas
  • Decorative graphics for forms and webpage web resources.
  • Background images that are used by CSS web resources.

Use Vector Format (SVG) web resources for any icon presented in the application. Vector images are defined as Scalable Vector Graphics (SVG) an XML-based vector image format. The advantage of SVG over other image web resources is scale, smaller in size, and if the fill color is removed the model-driven app can control the icon color to avoid contrast issues. When defining the SVG or before uploading it into the web resource please remove any "fill color" attributes. We recommend using SVG over other image types like PNG and JPG. You can define one vector image and re-use it rather than provide multiple sizes of images. You will use these in with a new EntityMetadata.IconVectorName property to define the icon for a custom table instead of the IconLargeName, IconMediumName, or IconSmallName properties.

Note

Vector Format (SVG) web resources are treated like the Script (JScript) web resources, and carry the same security risks as JavaScript web resources because SVG files allow JScript embedding.

Limitations of image web resources

Like all web resources, image web resources use the security context. Only licensed users who have the necessary privileges can access them.

Reference an image web resource from a webpage web resource

All web resources can use relative URLs to reference each other. In the following example, for the webpage (HTML) web resource new_/content/contentpage.htm to reference the image web resource new_/Images/image1.png, add the following HTML code to new_/content/contentpage.htm:

<img src="../Images/image1.png" />

Reference an image web resource from a form

Add an image to a form

  1. Navigate to the form editor for a table.

  2. Select where you want to add the image in the form.

  3. On the Insert tab, select Web Resource.

  4. On the General tab, select the web resource image that you want to add.

  5. Specify a name for the web resource. You can also specify a label and alternative text.

  6. On the Formatting tab, you can define:

    • The number of columns the images should use.

    • The number of rows the images should use, or if it should automatically expand to use available space.

    • The size of the image using the following options:

      • Stretch to fit

      • Stretch to fit (maintain aspect ratio)

      • Original

      • Specific

    • If you select "Specific," you can enter the desired height and width in pixels.

  7. Select OK.

  8. You must save your changes and publish the form before users can see the image in the form.

Reference an image web resource from a ribbon element or from the Site Map subarea

Use the $webresource: directive to specify a web resource image to use as an icon in the ribbon or in the application navigation using Site Map. The following sample shows how to specify icons for a button in the ribbon.

<Button Id="MyISV.opportunity.form.actions.FlyoutAnchor.Button.1" Image16by16="$webresource:new_/icons/oneIcon16.png" Image32by32="$webresource:new_/icons/oneIcon32.png"/>

Note

Using the $webresource: directive adds a solution dependency that prevents the referenced image web resources from being deleted as long as they are used by another solution component.

See also

Web resources
Using Web Page (HTML) web resources
Using Style Sheet (CSS) web resources
Using JavaScript web resources
Using Data (XML) web resources
Using Stylesheet (XSL) web resources