Media Profiles, Renamed SummaryAdmin shapes - This week in Orchard (16/10/2020)

Admin UI, IIS, Media Library, This week in Orchard, Role, Permission, Shape

• View on Dojo Graph

Friday, October 16, 2020 4:08:00 PM -- Author: Gábor Domonkos

Media profiles feature to Orchard Core that allows you to defined preset image resizing and formatting commands! Renamed SummaryAdmin shapes, and new routes to avoid features URL blocking by IIS, and a lot more in our current post!

Orchard Core updates

Prevent disabling or removing administrator role

Let's say you set up your Orchard Core site using the admin as the user name and for some reason, you navigate to Security -> Users to disable your own account. The problem here is that in this case, you are the only user with an Administrator role in the system. From now you can't do that, you will get a warning message saying you cannot disable the only administrator.

Go back and edit your own user again and try to edit the user name too. This also triggers a new validation error, because you cannot modify the user name of the currently logged-in user.

The last thing here is about removing the Administrator role from your user account. You could do that, but if your user is the only user with the Administrator role assigned, you will get a warning message about you cannot remove the Administrator role from the only administrator.

Avoid features URL blocking by IIS

IIS has some default filters for security like you can't have specific words in the URL. There are a few words used by us too like .sitemap. IIS also blocks any request ending in .resources by default. The list of blocked extensions includes a bunch of other terms that could conceivably be used in feature IDs such as .master, .browser, .config, .skin, etc. It's possible to override this behavior in the web.config file but this would have to be done on a per-application basis and carries unwanted security implications.

The solution is just to put these parts in a different segment. If you want to enable a feature the URL to do that was:
https://localhost:5501/Admin/Features/Enable/OrchardCore.Sitemaps

Now the new URL is:
https://localhost:44300/Admin/Features/OrchardCore.Sitemaps/Enable

So the goal of this fix is to use the pattern Admin/Features/{id}/Enable in place of Admin/Features/Enable/{id}. The same goes for when you want to disable a feature.

Renamed SummaryAdmin shapes of ContentsDriver

These shape names are not compatible when defining custom placement, so they have been renamed. They are admin shapes, so the impact is quite low. If you have your own custom theme and redefined these ones you have to change them.

So, the ContentsDriver creates four shapes with different shape types.

Shape("Contents_SummaryAdmin__Tags", new ContentItemViewModel(model)).Location("SummaryAdmin", "Tags:10"), 
Shape("Contents_SummaryAdmin__Meta", new ContentItemViewModel(model)).Location("SummaryAdmin", "Meta:20"), 
Shape("Contents_SummaryAdmin__Button__Edit", new ContentItemViewModel(model)).Location("SummaryAdmin", "Actions:10"), 
Shape("Contents_SummaryAdmin__Button__Actions", new ContentItemViewModel(model)).Location("SummaryAdmin", "ActionsMenu:10") 

However, the actual shape type is considered before __ i.e. all the above shapes are resolved to the same shape type Contents_SummaryAdmin. Renamed these shapes as following to apply a unique placement record for each shape.

Contents_SummaryAdmin__Tags renamed to ContentsTags_SummaryAdmin
Contents_SummaryAdmin__Meta renamed to ContentsMeta_SummaryAdmin
Contents_SummaryAdmin__Button__Edit renamed to ContentsButtonEdit_SummaryAdmin
Contents_SummaryAdmin__Button__Actions renamed to ContentsButtonActions_SummaryAdmin

So that placement will target a single shape type.

{
   "ContentsButtonActions_SummaryAdmin":
   [
      {
         "shape":"ContentsButtonEditNoView_SummaryAdmin"
      }
   ] 
}

Demos

New ImageSharp.Web Features

ImageSharp is a new, fully-featured, fully managed, cross-platform, 2D graphics library. Designed to simplify image processing, ImageSharp brings you an incredibly powerful yet beautifully simple API. With the v1.0., ImageSharp has got a bunch of new features and it's now a lot faster. And Orchard Core is also using ImageSharp to work with images.

New features included:

• Format support to the Tag Helpers/Liquid Filters: The slight weirdness with adding this is the file extension on the URL will remain .png, but the image will be returned with the correct mime/type.
• Quality support to jpg encoding and Tag Helpers/Liquid Filters: The Quality support allows you to specify a quality % to jpg encoding. Note: only jpg encoding is supported, but the Format support allows you to convert an image from saying png to jpg, and then reduce the quality.
• CurrentCulture/InvariantCulture for query string parameters: Supported through custom ImageSharp configuration, but not integrated into Orchard Core. Basing this decision primarily on the idea that most of our resizing/processing query string building, is done through templates, which are culture invariant.

And that's not all of it! There is now a new Media profiles feature in Orchard Core that allowing you to specify resizing options and much other stuff. A profile can then be called with the profile name resize_url: profile: 'banner' rather than having to specify all the resizing options that may apply. But that's enough talk for now, let's see them in action, after all, we are in the Demos section of This week in Orchard, right?

Use the latest nightly build of Orchard Core and set up your site using the Agency recipe. Then navigate to the admin UI where you will see a new option in the menu (make sure to enable the Media profiles feature): Configuration -> Media -> Media Profiles. Media Profiles are quite simple, they just have the standard resizing options that we have in ImageSharp. Notice that here you can set the width and the height values only from the supported ones. We add the name md to this media profile, let's note it, we will need it right away.

Now navigate to Design -> Templates and edit the predefined Content__LandingPage Liquid template. We will use the newly created image profile when displaying the portfolio images. Just a note here: the home page in this agency is a LandingPage content type that has several Bag Parts attached. The one with the display name Portfolio is about to add Project content types to your LandingPage content type. And the Project content type has a Media Field attached, called Image. In this Liquid template, we will use our newly created md media profile.

Here we say use the md media profile when displaying these images and in this particular case we would like to override the resize mode for the processed image. Instead of crop, we would like to stretch these images, but just in this case. When you define a media profile, you can say I don't want to specify the width, the height or the resize mode. In that case, you can set them in your Liquid helper, just as you could do that before.

Now, let's just check out how does the home page of our site looks like. Remember that we set a lot of values when setting up our md media profile and we also set the quality percentage for the processed image and we set it as 10. We also change the width and height values and override the resize mode to stretch the images. This result is low quality stretched images in the Portfolio section.

Now let's see the source code of this page and check out the img tags using the DevTools of Chrome. As you can see it's not tied to ImageSharp, the logic just converts the media profile into a good query string. This means we can do the override easier and if we change the values the URL will change, and it breaks the cache.

When you would like to show the kittens.jpg with 100 width and 100 height, by using the crop resize mode (that resizes the image using the same functionality as max then removes any image area falling outside the bounds of its container) and use only 50% as the quality when compressing the image you would write a Liquid filter like this: {{ 'animals/kittens.jpg' | asset_url | resize_url: width:100, height:240, mode:'crop', quality: 50, format:'jpg' }}

The documentation is also updated to help you how to use these new arguments.

Don't forget to head to YouTube and watch the recording of this awesome feature!

News from the community

Orchard Dojo Newsletter

Lombiq's Orchard Dojo Newsletter has 162 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.

Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!

If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

2 Comments

• Mieke said 2 years ago Reply

  Hi! Do I need to install any specific modules for the Media Profiles to work? I have created a media profile for our shop in list view, and tagged it in the view with img-profile="shoplist", but nothing is changing. Am I missing something?

  • Gábor Domonkos said 2 years ago Reply

    Hi Mieke!
    
    Make sure that the Media feature is enabled. If you clone the Orchard Core repository and set up your site with the Blog recipe, you will find a predefined Media Profile called banner. And that Media Profile is used across several liquid files like Content-Article.liquid. You can see there what are the exact step to make your Media Profile work.
    You can find more about Media Profiles in the documentation: https://docs.orchardcore.net/en/dev/docs/reference/modules/Media/#media-profiles
    
    I hope it helps. Please let me know if you have any other questions.