Channel:Form

Ansel works in channel:form, however you will notice that it will appear largely unstyled. This is because it relies on many styles and icons normally found within ExpressionEngine's control panel, but are not easily available on the front-end.

Including the following css file, per the channel:form docs, is not sufficient.

<link href="{path='css/_ee_channel_form_css'}" type="text/css" rel="stylesheet" media="screen">

You can include the entire common.min.cssfile, which is what is used by ExpressionEngine in the control panel, but it may apply more styles than necessary. If you include this you will notice that the Ansel field displays its missing styles.

<link href="/themes/ee/cp/css/common.min.css" type="text/css" rel="stylesheet" media="screen">

If you're using the legacy grid view in Ansel, you will not need to include the common.min.css file, it still renders most of it's styles.

Ultimately it is up to you how to render the Ansel field in a channel:form. A little extra work to add custom styles may be necessary if you do not want to include common.min.css.

We do recommend hiding the meta edit button since the slide out modal normally find when inside of the ExpressionEngine control panel is not available in channel:form tags.

.js-ansel-edit-meta { display: none; }