Custom Shape Issue in the Layout.liquid

[boraster]

I am trying to convert a theme into dynamic one in Orchard Core. I copied all items from the Blog Theme. New theme works as static as expected. I wish to add a content type named "Banner" in the Admin UI.

I created the type and then added an Alias part and also a Media Field (named "Image Field"). I want to to inject Banner content items into several different locations into the Layout. I created a Banner.liquid file in the local theme folder with this code:
<img src="{{ Model.ContentItem.Content.Banner.ImageField.Paths[0] | asset_url }}"

In the Layout.liquid file I simply stated {% shape "banner", alias: "alias:main-banner" %}

This configuration results in src:/media/

However, when I turn the Banner content type into a widget with adding Stereotype, and put it into a Zone and Layer in the Widget section of the Admin UI, it works like charm with a simple code like {% zone "Banner" %} {% endzone %} wherever I place it in the Layout.liquid

However, this application is counter productive since I wish to inject Banner type into different places of the Layout. Moreover, I wish the site owner to manage banners with other content type in the Content Items section of the UI, not in the widget section.

I believe I don't get something about the inner workings of the Orchard Core, so I am stuck at this point.