Resize images on the fly with Ektron

Did you know that from version 8.5 of Ektron CMS you can resize images dynamically with no extra coding required?  There are a few restrictions:

1. File must be added as an asset to the DMS – it cannot be a Library file.
2. It must be a JPEG or GIF file – PNG will not work.

So here is what you do :

1. From the workarea, go to the Content view
2. From the toolbar choose the Add Assets icon.
3. Browse to your image and upload it.
4. Go to the Properties tab on the image and make a note of the Content Id.
5. Now browse to the image like so :

http://www.mysite.com/assets/123.jpg?ht=100

This will load the image and resize it so that the image is 100 pixels high- the width size will be constrained to the height, i.e. the proportions are kept the same.

The “123” specified here corresponds to the Content Id – this is important, you must use the Content Id and not the QuickLink.

You can also specify the image resize by width:

http://www.mysite.com/assets/123.jpg?wd=200

Or you can resize by both height and width (potentially throwing out the proportions):

http://www.mysite.com/assets/123.jpg?wd=200&ht=150

Or you can show the auto-generated image thumbnail:

http://www.mysite.com/assets/123.jpg?sz=thumb

This gives a very nice way of showing an image in a particular size without having to resize it through code.  Before version 8.5 it would have been necessary to write a plug-in or extension that resized images after publication.

Turn off Ektron CSS aggregation for debugging

Ektron has for some time allowed developers to combine CSS files and Javascript files into single downloads; this is called aggregation. The purpose of this is to improve site performance by reducing the number of downloads in a page.

When aggregation is enabled you can spot it in the source of the HTML looking something like this :

<link id="EktronRegisteredCss" rel="stylesheet" type="text/css" href="/workarea/csslib/ektronCss.ashx?
id=EktronModalCss+css_styles+css_dropdown+css_dropdown_linear
+css_dropdown_linear_columnar+css_dropdown_themes_default+
css_dropdown_themes_default_advance+css_jquery_cluetip" />

Here you can see that a large number of CSS files have been combined into one. The names of the CSS files are evident in the “id” property that is passed to the ektronCss handler, e.g. “css_styles”, “css_jquery_cluetip”.

Although this has many advantages for a public website, it is frustrating when debugging CSS as it makes it hard to know which CSS file contains the elements you are trying to debug.

To easily disable CSS and Javascript aggregation you can modify four properties a configuration file. If you are using up to version 8.0 of Ektron CMS then it is in your web.config file.

<add key="ek_AllowJsAggregation" value="true"/>
<add key="ek_AllowJsMinification" value="true"/>
<add key="ek_AllowCssAggregation" value="true"/>
<add key="ek_AllowCssMinification" value="true"/>

If you are using version 8.5+ of Ektron CMS then you will find the settings in the ektron.cms.framework.ui.config file (located in your web root) :

<!– JavaScript –>
<add name=”AllowJavaScriptRegistration” value=”true” />
<add name=”AllowJavaScriptAggregation” value=”true” />
<add name=”AllowJavaScriptMinification” value=”true” />
<!– Css –>
<add name=”AllowCssRegistration” value=”true” />
<add name=”AllowCssAggregation” value=”true” />
<add name=”AllowCssMinification” value=”true” />
<add name=”AggregatedCssMediaAttribute” value=”all” />

Order search results by metadata field

Ektron’s Framework API gives a great deal of flexibility when it comes to searching, filtering and ordering.  An often needed requirement is to perform a search using the API and the order the results by a metadata value.  Prior to v8.5 and the Framework API this would be difficult and you would often need to do a search, then iterate through the results to get the metadata and then finally do the ordering.

Thankfully as of v8.5 it is much easier!

Firstly you will need the following “using” statements to include the right namespaces:

using Ektron.Cms;
using Ektron.Cms.Search;
using Ektron.Cms.Search.Expressions;
using Ektron.Cms.Search.Compatibility;

I now assume that you have an ASPX page with a search form that includes a submit button. Upon clicking the button a method is executed that will carry out the search.

Next we define the rows that should be returned in the search results:

KeywordSearchCriteria criteria = new KeywordSearchCriteria();

criteria.ReturnProperties = new HashSet(PropertyMappings.ContentSearchProperties);
criteria.ReturnProperties.Add(
SearchMetadataProperty.GetStringProperty(“metaStr”));;

A return column is added here : “metaStr”. This corresponds to a metadata definition called “metaStr” which in my example is of type String. You can also include types Integer, Boolean, Date and Decimal.

Then we say how the results should be ordered:

criteria.OrderBy = new List()
{
new OrderData(
Ektron.Cms.Search.SearchMetadataProperty.GetStringProperty("metaSr"),
OrderDirection.Ascending)
};

This code simply says “order by metaStr, ascending”. Now we add the actual search query:

criteria.QueryText = "ektron";

In reality your search query might be more complicated here, but I want to stick to the script. Finally we perform the search itself:

ISearchManager manager = ObjectFactory.GetSearchManager();
Ektron.Cms.Search.SearchResponseData responseData = manager.Search(criteria);

So there we saw how we can perform a simple search, include metadata in the results and then order by that metadata.