### Example Asset File Extension Source: https://statamic.dev/variables/extension This is an example of what the file extension might look like when output. ```text jpg ``` -------------------------------- ### Example Filename Output Source: https://statamic.dev/variables/filename This is an example of the output when using the filename variable. ```text black-bear-cubs ``` -------------------------------- ### Example Order Type Output Source: https://statamic.dev/variables/order_type This example shows the output for a 'number' order type. ```html {{ number }} ``` -------------------------------- ### Example Date Output Source: https://statamic.dev/variables/has_timestamp This is an example of how a date might be formatted when the time is not included. ```plaintext January 1st, 2016 11:30 am ``` -------------------------------- ### Example URL Output Source: https://statamic.dev/variables/url The `url` tag outputs a relative path. This example shows a typical output for a blog post. ```text /posts/bacon ``` -------------------------------- ### Example MD5 Hash Output Source: https://statamic.dev/modifiers/md5 This is an example of the output generated by the MD5 modifier for the input 'hello'. ```html 5d41402abc4b2a76b9719d911017c592 ``` -------------------------------- ### Example Output Source: https://statamic.dev/modifiers/str_pad_left This is the expected output after applying the left padding. ```text 01 ``` -------------------------------- ### Static User Display Example Source: https://statamic.dev/fieldtypes/users An example of how user data might be hardcoded or displayed statically, showing avatar, name, and email. ```html
Avatar of David Hasselhoff

David Hasselhoff

thehoff@statamic.com

``` -------------------------------- ### Example Output of Collection Display Source: https://statamic.dev/fieldtypes/collections This is an example of how the rendered output might look after displaying entries from the selected collections. ```html ``` -------------------------------- ### Product Entry Example Source: https://statamic.dev/content-modeling/relationships This is an example of a Statamic entry for a product, demonstrating how relationship fields like 'photo', 'author', and 'related_products' are structured. ```yaml # /content/products/wayne-gretzky-pog-collection.md title: Wayne Gretzky Pog Collection price: 2495.00 template: products.show id: 123-1234-12-4321 photo: products/gretzky-pogs-FINAL-(2).jpg author: abc-abcd-ab-dcba related_products: - 789-7890-78-0987 - abc-1234-bc-4eba ``` -------------------------------- ### Install Nginx Web Server Source: https://statamic.dev/getting-started/installing/ubuntu Installs the Nginx web server, which will be used to serve your Statamic application. ```shell sudo apt install nginx -y ``` -------------------------------- ### Install PHP and Required Modules Source: https://statamic.dev/getting-started/installing/ubuntu Installs PHP along with essential modules required for Statamic and other web applications. ```shell sudo apt install php-common php-fpm php-json php-mbstring zip unzip php-zip php-cli php-xml php-tokenizer php-curl php-gd -y ``` -------------------------------- ### Install Composer Globally Source: https://statamic.dev/getting-started/installing/ubuntu Installs Composer, a dependency manager for PHP, and makes it available system-wide. ```shell curl -sS https://getcomposer.org/installer | php ``` ```shell sudo mv composer.phar /usr/local/bin/composer sudo chmod +x /usr/local/bin/composer ``` -------------------------------- ### Verify Composer Installation Source: https://statamic.dev/getting-started/installing/ubuntu Checks if Composer has been installed correctly and is accessible from the command line. ```shell composer ``` -------------------------------- ### Example Date Input Source: https://statamic.dev/modifiers/is_weekday This is an example of a date input that the `is_weekday` modifier would process. ```text date: December 25 2015 ``` -------------------------------- ### Alias for Start and Complete Source: https://statamic.dev/vue-components/progress The `progress.loading()` method serves as an alias for `start()` when passed `true` and for `complete()` when passed `false`. ```javascript progress.loading($name, true); // Alias of .start() - Useful for passing a boolean progress.loading($name, false); // Alias of complete() ``` -------------------------------- ### Example Dump Output Source: https://statamic.dev/modifiers/dump This is an example of the output you might see when using the dump modifier or function, showing the structure and contents of a variable. ```text array:2 [▼ "delicious" => array:2 [▶] ] ``` -------------------------------- ### Install Statamic CLI using Composer Source: https://statamic.dev/getting-started/installing/local Installs the Statamic command-line interface globally on your machine using Composer. This tool helps in quickly setting up Statamic projects. ```bash composer global require statamic/cli ``` -------------------------------- ### Example Data Structure Source: https://statamic.dev/modifiers/key_by This is an example of the data structure that the `key_by` modifier operates on. It's a numerically indexed array of items, each with a 'handle' and 'display' key. ```yaml fields: - handle: name display: 'Your Name' - handle: email display: 'Email Address' ``` -------------------------------- ### Example Output Source: https://statamic.dev/modifiers/ensure_left This shows the expected output after applying the ensure_left modifier to a list of links. ```HTML
  • http://statamic.com
  • http://wilderborn.com
    • ``` -------------------------------- ### Join Modifier Output Examples Source: https://statamic.dev/modifiers/join These examples demonstrate the resulting strings when the join modifier is applied with and without a custom delimiter. ```text take a shower, brush hair, clip toenails take a shower + brush hair + clip toenails = ready ``` -------------------------------- ### Start and Complete Progress Bar Source: https://statamic.dev/vue-components/progress Use `progress.start()` to initiate the progress bar and `progress.complete()` to instantly finish it and make it disappear. ```javascript import { progress } from '@statamic/cms/api'; progress.start($name); // Starts the progress bar progress.complete($name); // Instantly progress to 100% and disappear ``` -------------------------------- ### Example Asset Field Configuration Source: https://statamic.dev/knowledge-base/troubleshooting/assets-missing-urls The YAML structure for an asset field containing a file path. ```yaml my_asset_field: - path/to/image.jpg ``` -------------------------------- ### Serve Statamic Site with Built-in Server Source: https://statamic.dev/getting-started/installing/local Starts the local development server for your Statamic site. Use this if you don't have a specific development environment like Valet set up. The URL provided will be used to access your site. ```bash php artisan serve Starting Laravel development server: http://127.0.0.1:8000 ``` -------------------------------- ### Example Output Source: https://statamic.dev/tags/locales-count The expected integer output when using the locales:count tag. ```output 3 2 ``` -------------------------------- ### Running Statamic with Full Path Source: https://statamic.dev/knowledge-base/troubleshooting/command-not-found-statamic This command shows how to run the Statamic installer using its full binary path, bypassing the 'command not found' error. ```bash $ ~/.composer/vendor/bin/statamic new mysite Building a new statamic site. ``` -------------------------------- ### Update Ubuntu Packages Source: https://statamic.dev/getting-started/installing/ubuntu Ensures your package lists and installed packages are up-to-date before proceeding with installations. ```shell sudo apt-get update sudo apt-get upgrade ``` -------------------------------- ### Embeddable URL Examples Source: https://statamic.dev/modifiers/is_embeddable Demonstrates example URLs for YouTube, Vimeo, and a non-embeddable type. The `is_embeddable` modifier will return true for YouTube and Vimeo, and false for others. ```text youtube: https://www.youtube.com/watch?v=s9F5fhJQo34 vimeo: https://vimeo.com/22439234 other: http://example.com/video.mp4 ``` -------------------------------- ### Progress Bar Control Source: https://statamic.dev/vue-components/progress Methods to start and complete the progress bar. `start` increments the progress, and `complete` finishes it. ```APIDOC ## Progress Bar Control ### Description Methods to start and complete the progress bar. `start` increments the progress, and `complete` finishes it. ### Methods - `progress.start($name)`: Starts the progress bar for a given name. - `progress.complete($name)`: Instantly progresses the bar to 100% and makes it disappear. ### Parameters - `$name` (string): A unique identifier for the progress bar instance. ``` -------------------------------- ### Default Glide Path Example Source: https://statamic.dev/frontend/image-manipulation Illustrates the default directory structure for Glide-generated images based on an MD5 hash of manipulation parameters. ```text containers/assets/path/to/image.jpg/0638baede3a7fc1a91f605e095ab74cc/image.jpg ``` -------------------------------- ### Running Statamic Installer Source: https://statamic.dev/knowledge-base/troubleshooting/command-not-found-statamic This command demonstrates the 'command not found' error when the Statamic binary is not in the system's PATH. ```bash $ statamic new mysite Command not found: statamic ``` -------------------------------- ### Loop Through Blog Entries (Antlers) Source: https://statamic.dev/tags/collection Basic example to loop through entries in a 'blog' collection and link to each post. Ensure the 'blog' collection exists. ```antlers ``` -------------------------------- ### Check Nginx Service Status Source: https://statamic.dev/getting-started/installing/ubuntu Verifies that the Nginx service is running after installation. ```shell sudo systemctl status nginx ``` -------------------------------- ### Custom Hashed Glide Path Example Source: https://statamic.dev/frontend/image-manipulation Shows the resulting path for a Glide-generated image using the custom hash closure defined previously. ```text containers/assets/path/to/image.jpg/fit-crop-h-50-q-50-w-100/image.jpg ``` -------------------------------- ### Example Image Width Value Source: https://statamic.dev/variables/width This snippet shows a direct output of the image width, which will be a numerical pixel value. ```plaintext 900 ``` -------------------------------- ### Loop Through Blog Entries (Blade) Source: https://statamic.dev/tags/collection Basic example to loop through entries in a 'blog' collection and link to each post using Blade syntax. Ensure the 'blog' collection exists. ```blade ``` -------------------------------- ### Define a Vue Component Source: https://statamic.dev/vue-components/overview A standard Vue 3 script setup component structure. ```vue ``` -------------------------------- ### CDN Image Cache Configuration (S3 Example) Source: https://statamic.dev/frontend/image-manipulation Configures image caching to a CDN, such as Amazon S3. Requires a separate filesystem disk configuration. ```php // config/statamic/assets.php 'image_manipulation' => [ 'cache' => 'glide', ], ``` ```php // config/filesystems.php 'disks' => [ 'glide' => [ 'driver' => 's3', 'key' => env('AWS_ACCESS_KEY_ID'), 'secret' => env('AWS_SECRET_ACCESS_KEY'), 'region' => env('AWS_DEFAULT_REGION'), 'bucket' => env('AWS_BUCKET_GLIDE'), 'url' => env('AWS_URL_GLIDE'), 'endpoint' => env('AWS_ENDPOINT'), 'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false), 'visibility' => 'public', ], ] ``` -------------------------------- ### Example of rawurlencode output Source: https://statamic.dev/modifiers/rawurlencode This demonstrates the expected output after applying the rawurlencode modifier to a string containing spaces and a forward slash. ```html http://example.com/please%20and%20thank%20you%2FMommy ``` -------------------------------- ### Example of `is_yesterday` returning false Source: https://statamic.dev/modifiers/is_yesterday This example demonstrates a scenario where the `is_yesterday` modifier would evaluate to `false`, indicating the date is not yesterday. ```text false ``` -------------------------------- ### Example Output Source: https://statamic.dev/modifiers/is_weekday This shows the expected boolean output when the `is_weekday` modifier is applied to a date that is not a weekday. ```text true ``` -------------------------------- ### Utility Controller Action Source: https://statamic.dev/control-panel/utilities Example controller method for processing utility actions. It should handle the request and return a redirect, often with a success message. ```php public function process(Request $request) { // Do the processing... return redirect()->back()->with('success', 'Data has been wangjangled!'); } ``` -------------------------------- ### Define taxonomy terms in YAML Source: https://statamic.dev/content-modeling/taxonomies Example of how terms are structured in YAML format for Statamic taxonomies. ```yaml tags: - Star Wars - Tatooine - Droids We're Not Looking For ``` -------------------------------- ### Example of HTML with Absolute URL Source: https://statamic.dev/modifiers/full_urls This HTML snippet shows the result after a root-relative URL has been converted to an absolute URL. ```html I had this totally crazy dream last night and I know you want to hear all about it! ``` -------------------------------- ### Example Output of Collection Variable Source: https://statamic.dev/variables/collection The collection variable outputs the name of the collection, such as 'blog'. This is the direct result of using the variable. ```html blog ``` -------------------------------- ### Update Composer Dependencies Source: https://statamic.dev/getting-started/upgrade-guide/laravel-7-to-8 Run this command to update all Composer dependencies to their latest compatible versions before starting the upgrade process. ```bash composer update ``` -------------------------------- ### Start Queue Worker Locally Source: https://statamic.dev/knowledge-base/troubleshooting/email-not-sending Run this command in your local environment to ensure queued emails are processed. This helps diagnose if emails are failing to send because the queue is not actively processing jobs. ```bash php artisan queue:listen ``` -------------------------------- ### Progress Bar Aliases Source: https://statamic.dev/vue-components/progress Aliases for starting and completing the progress bar using a boolean value. ```APIDOC ## Progress Bar Aliases ### Description Aliases for starting and completing the progress bar using a boolean value. ### Methods - `progress.loading($name, true)`: Alias for `.start()`. Useful for passing a boolean to indicate loading is active. - `progress.loading($name, false)`: Alias for `.complete()`. Useful for passing a boolean to indicate loading is finished. ### Parameters - `$name` (string): A unique identifier for the progress bar instance. - `boolean` (boolean): `true` to start, `false` to complete. ``` -------------------------------- ### Ensure Left Modifier in Antlers Source: https://statamic.dev/modifiers/ensure_left Use the ensure_left modifier in Antlers to prepend a string if it doesn't already start with the specified prefix. This example ensures all links start with 'http://'. ```Antlers {{ links }}
  • {{ value | ensure_left('http://') }}
    • {{ /links }} ``` -------------------------------- ### Initialize and Deploy with Git Source: https://statamic.dev/getting-started/deploying/fortrabbit Steps to initialize a Git repository, add the fortrabbit remote, commit changes, and push to the main branch for initial deployment. Subsequent pushes only require `git push`. ```shell # 1. Initialize Git git init # 2. Add your Apps Git remote to your local repo git remote add fortrabbit {{appname}}@deploy.{{region}}.frbit.com:{{appname}}.git # 4. Add changes to Git git add -A # 5. Commit changes git commit -m 'My first commit' # 6. Initial push and upstream git push -u fortrabbit main # From there on only git push ``` -------------------------------- ### Ensure Left Modifier in Blade Source: https://statamic.dev/modifiers/ensure_left In Blade, you can use the ensureLeft modifier via the Statamic::modify helper to prepend a string if it doesn't start with the specified prefix. This example ensures all links start with 'http://'. ```Blade @foreach ($links as $link)
  • {{ Statamic::modify($link)->ensureLeft('http://') }}
    • @endforeach ``` -------------------------------- ### Override Date Preset Options Source: https://statamic.dev/vue-components/formatters Start with a preset and override specific Intl.DateTimeFormat options by including a 'preset' key in the options object. ```javascript dateFormatter.format('2026-03-26T20:24:21', { preset: 'datetime', timeZone: 'Australia/Sydney', }); dateFormatter.format('2026-03-26T20:24:21', { preset: 'datetime', month: 'short', }); ``` -------------------------------- ### Display Video Player with Antlers Source: https://statamic.dev/fieldtypes/video Use the `is_embeddable` modifier to check if a video can be embedded and `embed_url` to get the player source. This example shows conditional rendering for YouTube/Vimeo vs. HTML5 videos. ```antlers {{ if video | is_embeddable }} {{ else }} {{ /if }} ``` -------------------------------- ### Offset and Join Array Items (Antlers) Source: https://statamic.dev/modifiers/offset Use the offset modifier with the join filter to display array items starting from the second element, concatenated into a single string. Requires no special setup. ```antlers {{ playlist | offset(1) | join }} ``` -------------------------------- ### Example CSS Background Position Output Source: https://statamic.dev/modifiers/background_position This shows the resulting CSS `background-position` value after the focal point has been converted. It demonstrates the expected output format for use in stylesheets. ```css background-position: 50% 30%; ``` -------------------------------- ### Create a New Statamic Project Source: https://statamic.dev/getting-started/installing/local Initiates a new Statamic project in the current directory. You will be prompted to choose between a blank site or a Starter Kit. ```bash statamic new project_name ``` -------------------------------- ### Example URL Validation Results Source: https://statamic.dev/modifiers/is_url These are the expected boolean outputs when using the `is_url` modifier or `isUrl()` method on valid and invalid URL strings respectively. ```text true false ``` -------------------------------- ### Get Composer Global Bin Directory Source: https://statamic.dev/knowledge-base/troubleshooting/command-not-found-statamic Use this command to find the absolute path to Composer's global bin directory, which needs to be added to your PATH. ```bash composer global config bin-dir --absolute ``` -------------------------------- ### Set Up Git Remote and Track Branch Source: https://statamic.dev/control-panel/git-automation Commands to initialize a git repository, add a remote, fetch, track a branch, and reset HEAD. This is necessary if a remote and upstream are not already configured. ```bash git init git remote add origin git@github.com:your/remote-repository.git git fetch git branch --track master origin/master git reset HEAD ``` -------------------------------- ### Select Glide Image Driver Source: https://statamic.dev/frontend/image-manipulation Choose the image manipulation library for Glide. Options include 'gd' (default), 'imagick', or a custom driver class. Ensure the required PHP extension is installed for non-GD drivers. ```php 'driver' => 'gd', // or 'imagick', or a custom driver class name ``` -------------------------------- ### Statamic Deployment Script for Laravel Forge Source: https://statamic.dev/getting-started/deploying/laravel-forge This script outlines the commands executed during a Statamic deployment via Laravel Forge. It includes steps for pulling code, installing dependencies, optimizing the application, and warming caches. Adjustments for static caching or Eloquent driver are noted. ```shell cd /home/forge/forge-demo-znqnhr0d.on-forge.com git pull origin $FORGE_SITE_BRANCH $FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader # Prevent concurrent php-fpm reloads... touch /tmp/fpmlock 2>/dev/null || true ( flock -w 10 9 || exit 1 echo 'Reloading PHP FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9` and ``. ```blade
      @foreach ($items as $item)
    • {{ $item->name }}
      • @endforeach
    ``` -------------------------------- ### Laravel Standard Exception Rendering (Fails in Statamic) Source: https://statamic.dev/knowledge-base/tips/overriding-exception-rendering This example shows the standard Laravel approach to customizing exception rendering, which does not work for Statamic's HTTP exceptions due to their custom `render` methods. ```php ->withExceptions(function (Exceptions $exceptions) { $exceptions->render(function (NotFoundHttpException $e, Request $request) { return response()->redirectTo('/somewhere'); }); }) ``` -------------------------------- ### Set Permissions for Statamic Source: https://statamic.dev/getting-started/installing/ubuntu Grant read/write permissions to the web server user for Statamic and Laravel directories. Ensure 'www-data' is the correct user for your server setup. ```shell sudo chmod -R 755 /var/www/example.com sudo chown -R www-data:www-data /var/www/html/example.com ``` -------------------------------- ### Get Order Type in Blade Source: https://statamic.dev/variables/order_type Access the `order_type` variable in Blade templates. ```blade {{ $order_type }} ``` -------------------------------- ### Add Composer Bin to PATH (Linux) Source: https://statamic.dev/knowledge-base/troubleshooting/command-not-found-statamic Add Composer's bin directory to your PATH for Linux. Replace the path with the one identified in the previous step. ```bash # Replace the path below with the path identified in step 1 export PATH="$HOME/.config/composer/vendor/bin/":$PATH # Linux ``` -------------------------------- ### Nginx Server Block Configuration for Statamic Source: https://statamic.dev/getting-started/installing/ubuntu Configure Nginx to serve your Statamic site. Replace 'example.com' with your domain and ensure the PHP FPM socket path matches your PHP version. ```nginx server { listen 80; server_name example.com; // [tl! highlight:1] root /var/www/html/example.com/public; add_header X-Frame-Options "SAMEORIGIN"; add_header X-XSS-Protection "1; mode=block"; add_header X-Content-Type-Options "nosniff"; index index.html index.htm index.php; charset utf-8; set $try_location @static; if ($request_method != GET) { set $try_location @not_static; } if ($args ~* "live-preview=(.*)") { set $try_location @not_static; } location / { try_files $uri $try_location; } location @static { try_files /static${uri}_$args.html $uri $uri/ /index.php?$args; } location @not_static { try_files $uri /index.php?$args; } location = /favicon.ico { access_log off; log_not_found off; } location = /robots.txt { access_log off; log_not_found off; } error_page 404 /index.php; location ~ \.php$ { fastcgi_pass unix:/var/run/php/php8.3-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name; include fastcgi_params; } location ~ /\.(?!well-known).* { deny all; } } ``` -------------------------------- ### Manually Generate Presets Source: https://statamic.dev/frontend/image-manipulation Generate all configured image presets manually via the command line. This is useful after changing configuration or disabling generation on upload. ```bash php please assets:generate-presets ``` -------------------------------- ### Get Order Type in Antlers Source: https://statamic.dev/variables/order_type Use the `order_type` tag to retrieve the order type in Antlers templates. ```antlers {{ order_type }} ``` -------------------------------- ### Apply Nginx Configuration Changes Source: https://statamic.dev/getting-started/installing/ubuntu Create a symbolic link for the new Nginx configuration and reload the Nginx service to apply the changes. ```shell sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo systemctl reload nginx ``` -------------------------------- ### HTML Glide Tag Source: https://statamic.dev/frontend/image-manipulation Example of using the Glide HTML tag to generate an image with specific manipulation parameters. ```html ``` -------------------------------- ### Enable Git Integration Source: https://statamic.dev/control-panel/git-automation Add this to your .env file to enable Statamic's Git integration. ```env STATAMIC_GIT_ENABLED=true ``` -------------------------------- ### Set Filesystem Disk Visibility to Public Source: https://statamic.dev/knowledge-base/troubleshooting/asset-permissions Configure your filesystem disk in `config/filesystems.php` to `public` to allow public access to uploaded assets. ```php 's3' => [ 'driver' => 's3', 'key' => env('AWS_ACCESS_KEY_ID'), 'secret' => env('AWS_SECRET_ACCESS_KEY'), 'region' => env('AWS_DEFAULT_REGION'), 'bucket' => env('AWS_BUCKET'), 'url' => env('AWS_URL'), 'visibility' => 'public', // ← you're missing this ], ``` -------------------------------- ### Register a Basic Utility Source: https://statamic.dev/control-panel/utilities Register a new utility with a handle and an Inertia component. The closure provides props to the component. Ensure the Inertia page is registered separately. ```php use Statamic\Facades\Utility; public function boot() { Utility::extend(function () { Utility::register('data_wangjangler') ->inertia('my-addon::DataWangjangler', fn ($request) => [ 'items' => Item::all(), ]); }); } ``` -------------------------------- ### GET locales:count Tag Source: https://statamic.dev/tags/locales-count Retrieves the total count of localizations. Supports filtering via the self parameter. ```APIDOC ## locales:count Tag ### Description Returns the number of localizations configured in the system. ### Parameters #### Query Parameters - **self** (boolean) - Optional - Whether to include the current locale in the count. Defaults to true. ``` -------------------------------- ### Test Nginx Configuration Source: https://statamic.dev/getting-started/installing/ubuntu Verify that your Nginx configuration file has no syntax errors before applying changes. ```shell sudo nginx -t ``` -------------------------------- ### Antlers Blade Glide Tag Source: https://statamic.dev/frontend/image-manipulation Example of using the Glide Antlers tag to generate an image with specific manipulation parameters. ```antlers {{ glide:myimage width="100" height="50" fit="crop" quality="50" }} ``` -------------------------------- ### Access Asset File Extension in Blade Source: https://statamic.dev/variables/extension Use the `$extension` variable to get the file extension of the current asset in Blade. ```blade {{ $extension }} ``` -------------------------------- ### Create New Statamic Application Source: https://statamic.dev/getting-started/installing/ubuntu Creates a new Statamic project using the Statamic CLI within the default Nginx web root directory. ```shell cd /var/www/html ``` ```shell statamic new example.com ``` -------------------------------- ### Access Asset File Extension in Antlers Source: https://statamic.dev/variables/extension Use the `extension` variable to get the file extension of the current asset in Antlers. ```antlers {{ extension }} ``` -------------------------------- ### Generate Utility URLs Source: https://statamic.dev/control-panel/utilities Use the `cp_route` helper function to generate URLs to your Control Panel utility routes. ```php cp_route('utilities.data-wangjangler') // /cp/utilities/data-wangjangler ``` ```php cp_route('utilities.data-wangjangler.process') // /cp/utilities/data-wangjangler/process ``` -------------------------------- ### Sync Content Up with rsync Source: https://statamic.dev/getting-started/deploying/fortrabbit Use rsync to synchronize Statamic content and assets from your local environment to the fortrabbit remote server. ```shell # SYNC UP: from local to remote $rsync -avR ./content ./users ./resources/blueprints ./resources/fieldsets ./resources/forms ./resources/users ./storage/forms ./public/build ./storage/app ./public/assets {{appname}}@deploy.{{region}}.frbit.com:~/ ``` -------------------------------- ### Shorthand Loop Through Blog Entries (Blade) Source: https://statamic.dev/tags/collection Shorthand syntax for looping through entries in a 'blog' collection using Blade. This is the preferred style for simple collection loops. ```blade ``` -------------------------------- ### Count Entries in a Collection (Antlers) Source: https://statamic.dev/tags/collection-count Use this tag to directly output the count of entries in a specified collection. No setup or imports are needed. ```antlers There are {{ collection:count in="pogs" }} pogs in this site. ``` -------------------------------- ### Display Global Composer Configuration Source: https://statamic.dev/knowledge-base/troubleshooting/fixing-issues-with-global-composer-packages Use this command to view your global Composer configuration, including the location of the global composer.json file. This is useful for manually inspecting global dependencies for conflicts. ```bash composer config --list --global ``` -------------------------------- ### Handle Asynchronous Operations in Hooks Source: https://statamic.dev/vue-components/js-hooks When working with other promises, ensure you `resolve` or `reject` once the external promise is settled. This example uses `axios` to demonstrate. ```javascript Statamic.$hooks.on('entry.saving', (resolve, reject) => { return axios.get('/something') .then(resolve) .catch(() => reject('It broke')); }); ``` -------------------------------- ### Add Composer Bin to PATH (MacOS) Source: https://statamic.dev/knowledge-base/troubleshooting/command-not-found-statamic Add Composer's bin directory to your PATH for macOS. Replace the path with the one identified in the previous step. ```bash # Replace the path below with the path identified in step 1 export PATH="$HOME/.composer/vendor/bin/":$PATH # MacOS ``` -------------------------------- ### Example of HTML with Root-Relative URL Source: https://statamic.dev/modifiers/full_urls This HTML snippet demonstrates a root-relative URL within an `href` attribute, which would be converted by the `full_urls` modifier. ```html I had this totally crazy dream last night and I know you want to hear all about it! ``` -------------------------------- ### Shorthand Loop Through Blog Entries (Antlers) Source: https://statamic.dev/tags/collection Shorthand syntax for looping through entries in a 'blog' collection. This is the preferred style for simple collection loops. ```antlers
      {{ collection:blog }}
    • {{ title }}
      • {{ /collection:blog }}
    ``` -------------------------------- ### Get Content URL with Antlers Source: https://statamic.dev/variables/url Use the `url` tag within Antlers to output the relative URL of the current content. This tag is self-closing. ```antlers {{ url }} ``` -------------------------------- ### Resulting HTML after re-keying Source: https://statamic.dev/modifiers/key_by This HTML demonstrates the output after the array has been re-keyed and the specific fields accessed. ```html
    Your Name
    ``` -------------------------------- ### Unique Progress Bar Naming Source: https://statamic.dev/vue-components/progress Example of how to generate unique names for progress bars, especially when components might appear multiple times on a page. ```APIDOC ## Unique Progress Bar Naming ### Description Example of how to generate unique names for progress bars, especially when components might appear multiple times on a page. ### Example Usage ```javascript const uniqueId = crypto.randomUUID(); progress.start(`things-${uniqueId}`); ``` ### Notes Using `crypto.randomUUID()` ensures that each progress bar instance has a distinct name, preventing conflicts when multiple instances of the same component are rendered. ``` -------------------------------- ### Configuring Asset Container Disk Source: https://statamic.dev/knowledge-base/troubleshooting/assets-missing-urls Defining the disk for an asset container and adding the missing URL configuration in the filesystem. ```yaml # content/assets/my_container.yaml disk: assets ``` ```php // config/filesystems.php 'disks' => [ 'assets' => [ 'driver' => 'local', 'root' => public_path('assets'), 'visibility' => 'public', 'url' => '/assets', // 👈 you're missing this ], ] ``` -------------------------------- ### Register a Vue Component Source: https://statamic.dev/vue-components/overview Register a component within the Statamic.booting callback to make it available for use. ```js import MyComponent from './Components/MyComponent.vue'; Statamic.booting(() => { Statamic.$components.register('my-component', MyComponent); }); ``` -------------------------------- ### Vue Component Props from Controller Source: https://statamic.dev/control-panel/utilities A Vue component that receives props directly from a custom controller. This example shows how to define props that will be passed down from the controller. ```vue ``` -------------------------------- ### Configure Preset for Source Image Processing Source: https://statamic.dev/frontend/image-manipulation Define a preset in `config/statamic/assets.php` to process source images upon upload. This is useful for enforcing maximum dimensions to save disk space. ```php 'image_manipulation' => [ 'presets' => [ 'max_upload_size' => ['w' => 2000, 'h' => 2000, 'fit' => 'max'], ], ] ``` -------------------------------- ### Video Fieldtype Data Structure Example Source: https://statamic.dev/fieldtypes/video The Video field saves the URL of the entered video. It can also extract the URL from pasted embed code. ```yaml video: https://www.youtube.com/watch?v=s9F5fhJQo34 ``` -------------------------------- ### Get Collection Name in Blade Source: https://statamic.dev/variables/collection Access the `collection` variable in Blade templates using standard Blade syntax. Ensure you are within an entry context. ```blade {{ $collection }} ``` -------------------------------- ### Accessing Filename in Antlers Source: https://statamic.dev/variables/filename Use the `filename` variable to get the asset's name without the extension. It can be accessed directly or using the `$filename` syntax. ```antlers {{ filename }} ``` ```antlers {{ $filename }} ``` -------------------------------- ### Sync Content Down with rsync Source: https://statamic.dev/getting-started/deploying/fortrabbit Use rsync to synchronize specific Statamic content folders from the fortrabbit remote server back to your local environment. ```shell # SYNC DOWN: from remote to local one by one examples rsync -av {{appname}}@deploy.{{region}}.frbit.com:~/content ./ rsync -av {{appname}}@deploy.{{region}}.frbit.com:~/users ./ … ``` -------------------------------- ### Example Mailto HTML Output Source: https://statamic.dev/modifiers/mailto This is the resulting HTML when the mailto modifier is applied to an email address. It generates a standard anchor tag with a mailto: href attribute. ```html holler@example.com ``` -------------------------------- ### Format Numbers with Presets Source: https://statamic.dev/vue-components/formatters Format numbers using the 'decimal' (default) or 'percent' presets. The default locale is used for formatting. ```javascript import { numberFormatter } from '@statamic/cms/api'; numberFormatter.format(123456789.10); // en: 123,456,789.1 // de: 123.456.789,1 numberFormatter.format(0.25, 'percent'); // en: 25% ``` -------------------------------- ### Get Collection Name in Antlers Source: https://statamic.dev/variables/collection Use the `collection` variable within Antlers tags to access the current entry's collection name. No imports are needed. ```antlers {{ collection }} ``` -------------------------------- ### List All User Roles Source: https://statamic.dev/tags/user-roles Loop through all available user roles and display their handles. This is useful for listing all defined roles on your site. ```antlers
      {{ user_roles }}
    • {{ handle }}
      • {{ /user_roles }}
    ``` -------------------------------- ### Register Utility Routes Source: https://statamic.dev/control-panel/utilities Register custom routes for a utility to handle actions like form submissions. Use the `routes` method with a closure that defines the routes. ```php Utility::register('data_wangjangler')->routes(function ($router) { $router->post('/', [WangjanglerController::class, 'process'])->name('process'); }); ``` -------------------------------- ### Define Image Manipulation Presets Source: https://statamic.dev/frontend/image-manipulation Manage pre-configured image manipulation settings in `config/statamic/assets.php`. Presets allow referencing sets of parameters like width, height, and quality by name. ```php 'image_manipulation' => [ 'presets' => [ 'thumbnail' => [ 'w' => 300, 'h' => 300, 'q' => 75 ], 'hero' => [ 'w' => 1440, 'h' => 600, 'q' => 90 ], ], ] ``` -------------------------------- ### Get Order Key in Blade Source: https://statamic.dev/variables/order Access the order key using the `$order` variable in Blade templates. This provides the same functionality as the Antlers tag for retrieving the filename prefix. ```blade {{ $order }} ``` -------------------------------- ### Get Content URL via Variable with Antlers Source: https://statamic.dev/variables/url Access the relative URL of the current content using a variable in Antlers. This is useful when the URL needs to be stored or manipulated before output. ```antlers {{ $url }} ``` -------------------------------- ### Get Order Key in Antlers Source: https://statamic.dev/variables/order Use the `order` tag in Antlers to display the order key of the current content. This is useful for sorting or identifying content based on its filename prefix. ```antlers {{ order }} ``` -------------------------------- ### Import Formatters Source: https://statamic.dev/vue-components/formatters Import the date and number formatters from the Statamic API. ```javascript import { dateFormatter, numberFormatter } from '@statamic/cms/api'; ``` -------------------------------- ### Format Date with Custom ISO String Source: https://statamic.dev/modifiers/iso_format Use the iso_format modifier in Antlers to format a date string with a custom ISO format. This example shows a common date and time format. ```antlers {{ event_date | iso_format("MMMM Do YYYY, h:mm:ss a") }} ``` -------------------------------- ### JavaScript API - Basic Slugs Source: https://statamic.dev/vue-components/slugs Programmatically create slugs using the `slug.create()` method. You can also define a custom separator or use global aliases. ```APIDOC ## JavaScript API - Basic Slugs ### Description Generate slugs programmatically using the `slug.create()` method from `@statamic/cms/api`. You can specify a custom separator or use the global `str_slug` and `snake_case` functions. ### Methods - **slug.create(text)**: Creates a slug from the given text. - **slug.separatedBy(separator)**: Sets the separator character for slug generation. - **str_slug(text)**: Alias for `slug.create(text)`. - **snake_case(text)**: Alias for `slug.create(text).separatedBy('_')`. ### Examples ```js import { slug } from '@statamic/cms/api'; // Default separator slug.create('Hello World'); // 'hello-world' // Custom separator slug.separatedBy('_').create('Hello World'); // 'hello_world' // Global aliases str_slug('Hello World'); // 'hello-world' snake_case('Hello World'); // 'hello_world' ``` ``` -------------------------------- ### Retrieve Single Session Variable (Blade/PHP) Source: https://statamic.dev/tags/session Use Blade components or the `session()` helper in PHP to retrieve specific session variables. The `session()->get('key')` method is a common approach. ```blade {{-- Using Antlers Blade Components --}} {{-- Using session() helper --}} {{ session()->get('message') }} ``` -------------------------------- ### Resulting HTML Output Source: https://statamic.dev/knowledge-base/troubleshooting/assets-missing-urls The rendered HTML when the asset URL is missing. ```html An image ``` -------------------------------- ### Group Collection Entries by Date in Blade Source: https://statamic.dev/tags/collection Group collection entries by a formatted date in Blade using PHP's groupBy. This example demonstrates how to iterate over grouped entries and display their titles. ```blade @php $groupedEntries = $entries->groupBy(fn($entry) => $entry->date?->format('F Y')); @endphp @foreach ($groupedEntries as $group => $items)

    {{ $group }}

    @foreach ($items as $entry) {{ $entry->title }} @endforeach @endforeach     ``` -------------------------------- ### Conditional Date Formatting in Blade Source: https://statamic.dev/variables/has_timestamp Use the $has_timestamp variable to conditionally display the time in Blade templates. This example shows how to format a date with time if $has_timestamp is true, and without time otherwise. ```blade @if ($has_timestamp) {{ $date->format('F jS, Y g:i a' )}} @else {{ $date->format('F jS, Y') }} @endif ``` -------------------------------- ### Conditional Date Formatting in Antlers Source: https://statamic.dev/variables/has_timestamp Use the has_timestamp variable to conditionally display the time in Antlers templates. This example shows how to format a date with time if has_timestamp is true, and without time otherwise. ```antlers {{ if has_timestamp }} {{ date format="F jS, Y g:i a" }} {{ else }} {{ date format="F jS, Y" }} {{ /if }} ``` -------------------------------- ### Checking URLs in Antlers Source: https://statamic.dev/modifiers/is_url Use the `is_url` modifier in Antlers to conditionally render content based on whether a variable contains a valid URL. This example shows how to check both a valid and an invalid URL. ```antlers {{ if a_url | is_url }} {{ if not_a_url | is_url }} ``` -------------------------------- ### Simulate TTY for Statamic CLI Source: https://statamic.dev/getting-started/installing/ubuntu Provides a workaround for TTY errors when running the Statamic CLI non-interactively, useful in automated environments. ```shell script -q -c "statamic new --no-interaction example.com" ``` -------------------------------- ### Offset and Join Array Items (Blade) Source: https://statamic.dev/modifiers/offset Use the offset modifier with the join method to display array items starting from the second element, concatenated into a single string. Requires Statamic facade. ```blade {{ Statamic::modify($playlist)->offset(1)->join() }} ``` -------------------------------- ### Custom Cache Store Configuration (Database) Source: https://statamic.dev/frontend/image-manipulation Defines a custom cache store for Glide using the database driver. Requires specifying the connection and table. ```php 'glide' => [ 'driver' => 'database', 'connection' => 'mysql', 'table' => 'cache', ], ``` -------------------------------- ### Retrieve Single Session Variable (Antlers Blade) Source: https://statamic.dev/tags/session Access a specific session variable directly using the `session:variableName` tag syntax. This is a concise way to get a single piece of data. ```antlers {{ session:message }} ``` -------------------------------- ### Enable Pushing Changes Source: https://statamic.dev/control-panel/git-automation Configure Statamic to automatically push changes after committing by setting 'push' to true in config/statamic/git.php or via the .env file. ```php 'push' => env('STATAMIC_GIT_PUSH', true) ``` ```env STATAMIC_GIT_PUSH=true ``` -------------------------------- ### Offset and Loop Through Array Items (Antlers) Source: https://statamic.dev/modifiers/offset Use the offset modifier to skip the first item and then loop through the remaining items in an array. Each item is displayed within an `
  • ` tag. Requires no special setup. ```antlers {{ playlist | offset(1) }}
  • {{ value }}
    • {{ /playlist }} ```