Here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft CMS.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener('DOMContentLoaded', (event) => { | |
// Find all oembed elements | |
const oembedElements = document.querySelectorAll('oembed[url]'); | |
oembedElements.forEach(element => { | |
const url = element.getAttribute('url'); | |
let videoId: string | null; | |
if (!url) return; | |
videoId = extractYouTubeId(url); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"alignment": { | |
"options": [ | |
"left", | |
"center", | |
"right" | |
] | |
}, | |
"code": { | |
"indentSequence": " " |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
document.addEventListener('DOMContentLoaded', (event) => { | |
// Find all oembed elements | |
const oembedElements = document.querySelectorAll('oembed[url]'); | |
oembedElements.forEach(element => { | |
const url = element.getAttribute('url'); | |
const videoId = extractYouTubeId(url); | |
if (videoId) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img{% if image.title | kebab != image.slug %} alt="{{ image.title }}"{% endif %} src="{{ image.getUrl('thumb') }}"> | |
Example Usage: | |
{% if entry.images | length %} | |
{% for image in entry.images %} | |
<img{% if image.title | kebab != image.slug %} alt="{{ image.title }}"{% endif %} src="{{ image.getUrl('thumb') }}"> | |
{% endfor %} | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$channel = $_GET['id']; | |
$content = array(); | |
$fields_query = $this->EE->db->query("SELECT * FROM exp_channel_fields LEFT JOIN exp_channels ON exp_channel_fields.group_id = exp_channels.field_group WHERE exp_channels.channel_id = '$channel'"); | |
$entries_query = $this->EE->db->query("SELECT * FROM exp_channel_data cd INNER JOIN exp_channel_titles ct ON cd.entry_id = ct.entry_id WHERE cd.channel_id = '$channel'"); | |
$fields = $fields_query->result_array(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% set bannerBg %} | |
{% for bgImg in entry.bannerBg %} | |
{{ bgImg.url }} | |
{% endfor %} | |
{% endset %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Not shown here is the Grunt task that takes source SVGs, creates PNGs (later optimised by imageoptim) and minified SVGs | |
@mixin bg-image($image, $size: 16px, $repeat: no-repeat, $position: center) { | |
// SVG backgrounds with PNG fallback | |
// All browsers that support multiple backgrounds also support SVGs. Woohoo! | |
background-image: image-url("#{$image}.png"); | |
// inline-image requires Compass | |
background-image: inline-image("#{$image}.min.svg"), none; | |
background-size: $size; |
Key/Command | Description |
---|---|
Tab | Auto-complete files and folder names |
Ctrl + A | Go to the beginning of the line you are currently typing on |
Ctrl + E | Go to the end of the line you are currently typing on |
Ctrl + U | Clear the line before the cursor |
Ctrl + K | Clear the line after the cursor |
Ctrl + W | Delete the word before the cursor |
Ctrl + T | Swap the last two characters before the cursor |