Config The Image URL Solution

During the project, in order to make a unified management for the image URL , at present we make use of the LESSCSS method, set the image URL as independent variable, then all images use the image URL variable, it’s convenient for future maintenance. To make sure the LESS CSS work normal, we need to make some configuration for web.config , please refer to the http://www.dotlesscss.org/, the steps as follows:

Configure web.config

1.   Download the latest dotless package

You can find the latest source & downloads for dotless at GitHub, extract file ,then you can get file named “dotless.Core.dll”

2.   Include our reference to your web project

Add the dotless.Core.dll file to our references file

3.   Add a new HttpHandler to your Web.Config

Let’s make the dotless processor handle our .LESS files.Add this entry to the HttpHandlers section of your Web.Config:

<add name="LessCssHttpHandler" verb="*" path="*.LESS" preCondition="integratedMode" type="dotless.Core.LessCssHttpHandler,dotless.Core"/>

4.   Add a few configuration sections (optional)

First add our config handler in the "configSections" node of your web.config

<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />

Now you can configure caching and minifying of the Css output

<dotless minifyCss="true" cache="true" />

Note: when we work on the project , we need to use  <dotless minifyCss="false" cache="false" /> on our web.config, because when we make some change for any file, we need to see the change at once without cache. of course, when project finish and release , we need to use <dotless minifyCss="true" cache="true" />

5.   Get started

Reference your LESS files the same way as you would any other CSS file, just ensure that you use the .LESS extention.

Modify the image URL for project

 

1. Take our project file as example, Find the image url less file named

truck\WebCenter\CommonModule\UI\CSS\imgurlConfig.less, you will see the image url variables on the top of page

@base-url-secure: "https://secure.officescape.com/shared/images";
@base-url-web: "/WebCenter/CommonModule/UI/images/"; 

You only need to modify the image url value of variables named @base-url-secure and @base-url-web when you want to change all images url address on project.