Web Tag Reference - Gadreel/dcraft GitHub Wiki

TODO

All of the regular html tags work as normal. However, a number of enhanced tags are provided to simplify the coding process. These enhanced tags all begin with an module name (e.g. dc, dcf, dcm) a period and then an uppercase tag name. All enhanced tags and enhanced attributes will use uppercase names, while all regular html tags and attributes should use lowercase.

An example of a enhanced tag is dc.Html which is a replacement for html and provides a number of features - especially including all the standard header code for you.

TODO

• Label = button name, empty for none
• Icon = which FA icon to use, empty for none
• Page = page the button opens
• Click = function called when clicked
• To = direct value for href

• Title: title for the callout box
• Scope: Default, Primary, Success, Info, Warning, Danger

• Cms: the default CMS feature, pull content for this Page feed
• CmsPath: path to pook for the CMS content on (in Page feed)
• Skeleton: file to use as the skeleton (template) for the content, not including the CMS content

TODO explain specials like dc.Require

• Title: title for the label box
• Scope: Default, Primary, Success, Info, Warning, Danger

• Label = button name, empty for none
• Icon = which FA icon to use, empty for none
• Page = page the button opens
• Click = function called when clicked
• To = direct value for href

• Mode: Sage, Unsafe

• Cms: the default CMS feature, pull content for this Page feed
• CmsPath: path to pook for the CMS content on (in Page feed)

• For:
• Format:
• Locale:

• Title: title for the panel header
• Scope: Default, Primary, Success, Info, Warning, Danger

TODO

TODO

Typically used for page banners this shows one image at a time from a collection of images selected via the CMS.

• Gallery: path to the gallery from which all images will load. No default.
• Show: name of the show in the gallery to draw content from. No default.
• PathPart: as an alternative to Show use the URL to determine the name of the show to use. Use Show if URL part not found.
• Period: time to show the slides in ms, defaults to 3500
• Preload: true or false - show a ghost of the image before it fully loads. Ghost is embedded into the page and may increase page load time, but will show something until JavaScript can load the real image. Default is false.
• AuthTags: comma list of who can edit this feed. Default authorizations are Editor, Admin and Developer.

<dcm.BasicCarousel Gallery="/carousel" Show="Home" PathPart="1">

Use the shows in /carousel gallery for image source. Use the 1st part of the URL (About for /About or Home for /Home) or if there is bo part then use Home (i.e. for URL /)

TODO details about galleries, shows and preloads

Includes an Facebook feed directly into the local document so that full styling is available.

• Alternate: Optional, defaults to Facebook. Name of the alternate account to use
• Count: number of items to list. Defaults to 3.

<dcm.Facebook Count="5" />

Show the latest five posts.

Overview of how social media feeds work here. More details and examples of the dcm.Facebook tag here.

Embed a list of feed summaries (blogs, events, announcements) in the current page.

• Channel: name of the feed to draw content from. No default.
• Start: An ISO 8601 duration indicating how far in the past (-) or future to start reading this feed from. Default is now.
• Reverse: true or false - show the oldest first, going forward in time (false = show newest first, going backward in time). Default is false.
• Max: max entries to show, starting from Start, defaults to 100
• AuthTags: comma list of who can edit this feed. Default authorizations are Editor, Admin and Developer.

<dcm.Feed Channel="Blog">
	<Template><![CDATA[
		<dc.Link class="blog-entry" Page="/Blog@val|Path@">
			<div class="blog-title"><h3>@val|Field|Title@</h3></div>
			<div class="blog-content">@val|Field|Description@</div>
		</dc.Link>
	]]></Template>
	<MissingTemplate><![CDATA[
		<dc.Link class="blog-entry">
			<div class="blog-content">There are no blogs at this time.</div>
		</dc.Link>
	]]></MissingTemplate>
</dcm.Feed>

Read from the Blog feed show the newest first, going back in time, starting with now. Show all blog entries (up to 100).

<dcm.Feed Channel="Announcements" Reverse="true" Start="-P1D" Max="12">
	<Template><![CDATA[
		<dc.Link class="announcement-entry" Page="/Announcements@val|Path@">
			<div class="announcement-title"><h3>@val|Field|Title@</h3></div>
			<div class="announcement-content">@val|Field|Description@</div>
		</dc.Link>
	]]></Template>
	<MissingTemplate><![CDATA[
		<dc.Link class="announcement-entry">
			<div class="announcement-content">There are no announcements at this time.</div>
		</dc.Link>
	]]></MissingTemplate>
</dcm.Feed>

Read from the Announcements feed show the oldest first, going forward in time, starting with yesterday. Show no more than 12 entries.

More details and examples of the dcm.Feed tag here. Overview of how feeds work here.

Embed an article from a feed in the current page, optionally declare the main article of the page.

• Channel: name of the feed to draw content from. No default.
• PageMain: true or false - copy the description, title, keywords, etc into the page meta data. In other words - is this the main article for the page.
• PathPart: part of the URL that holds the path to the Feed entry.
• AuthTags: comma list of who can edit this feed. Default authorizations are Editor, Admin and Developer.

<dcm.FeedDetail Channel="Announcements" PathPart="1" PageMain="true">
	<Template><![CDATA[
		<div class="announcement-title"><h2>@val|Field|Title@</h2></div>
		<dc.PagePart For="content" Channel="Announcements" Path="@val|Path@">
			<dc.Markdown class="announcement-content">*![CDATA[@val|Part|content@]]*</dc.Markdown>
		</dc.PagePart>
	]]></Template>
	<MissingTemplate><![CDATA[
		<div class="announcement-title"><h2>No Announcement Found</h2></div>
		<div class="announcement-content">The path you have selected does not link to an announcement.</div>
	]]></MissingTemplate>
</dcm.FeedDetail>

Read from the URL to get the page of the feed entry to show. For example /Announcements/Free-Beer will cause the article Free-Beer to load from the Announcements feed. This will be the main article for the page so load the page meta data from the article.

TODO more explanation required.

More details and examples of the dcm.Feed tag here. Overview of how feeds work here.

Includes an Instagram feed directly into the local document so that full styling is available.

• Alternate: Optional, defaults to Facebook. Name of the alternate account to use
• Count: number of items to list. Defaults to 3.

<dcm.Instagram />

Overview of how social media feeds work here. More details and examples of the dcm.Instagram tag here.

Provides an icon for some social media link, as is commonly found in the footer of a website. Icon's purpose is to open the social media page in a separate tab.

• For: social media service to link (Facebook, Twiiter, Instagram, Houzz, LinkedIn, Yelp, Google-Plus)
• Alternate: optional, defaults to For
• Icon: optional, override the default icon for the service

<dcm.SocialMediaIcon For="Instagram" />

TODO not coded

Includes an Twitter feed directly into the local document so that full styling is available.

• Alternate: Optional, defaults to Twitter. Name of the alternate account to use
• Count: number of items to list. Defaults to 3.

<dcm.Twitter />

Overview of how social media feeds work here. More details and examples of the dcm.Twitter tag here.

Unlike the Twitter tag this uses the Twitter Javascript library to load the feed - an easier approach to loading, but without the option to style the listing.

• Alternate: Optional, defaults to Twitter. Name of the alternate account to use

<dcm.TwitterTimelineLoader />

Overview of how social media feeds work here.