Move assets

config/general.php

@@ -17,6 +17,7 @@
     '*' => [
         'aliases' => [
             '@web' => App::env('DEFAULT_SITE_URL'),
+            '@assetBaseUrl' => App::env('S3_BASE_URL') ?: App::env('DEFAULT_SITE_URL'),
         ],
         'allowAdminChanges' => true,
         'autoLoginAfterAccountActivation' => true,

config/project/volumes/images--994a420b-cb3e-4813-be6a-dd7ac7f55c6b.yaml

@@ -62,7 +62,7 @@ settings:
   region: $AWS_REGION
   secret: ''
   storageClass: ''
-  subfolder: assets/images
+  subfolder: assets/volumes/images
 sortOrder: 1
 titleTranslationKeyFormat: null
 titleTranslationMethod: null

config/twigpack.php

@@ -21,7 +21,7 @@
         ],
         // Public server config
         'server' => [
-            'manifestPath' => '@webroot/dist',
+            'manifestPath' => '@webroot/assets/dist',
             'publicPath' => App::env('S3_BASE_URL') ?: '/',
         ],
         // webpack-dev-server config
@@ -40,7 +40,7 @@
         // Local files config
         'localFiles' => [
             'basePath' => '@webroot/',
-            'criticalPrefix' => 'dist/criticalcss/',
+            'criticalPrefix' => 'assets/dist/criticalcss/',
             'criticalSuffix' => '_critical.min.css',
         ],
     ],
@@ -49,4 +49,4 @@
         // If `devMode` is on, use webpack-dev-server to all for HMR (hot module reloading)
         'useDevServer' => true,
     ],
-];
+];

templates/_guide/01-welcome.twig

@@ -3,7 +3,7 @@
 
 Spoke & Chain is a fully-custom ecommerce site for a fictitious bike shop, built with [Craft CMS](https://craftcms.com) and [Craft Commerce](https://craftcms.com/commerce), with fabulous product imagery thanks to the friendly folks at [Marin Bikes](https://www.marinbikes.com).
 
-![](/guide/homepage.png)
+![]({{ alias('@assetBaseUrl/assets/guide/homepage.png') }})
 
 This guide you’re reading—courtesy of the [Guide](https://plugins.craftcms.com/guide) Craft CMS plugin—is here to offer a tour of the build.
 
@@ -19,7 +19,7 @@ We know you’re probably not looking to build a website for a fake bike shop, s
 
 You can jump straight to [the front end]() from anywhere in the Craft control panel by clicking **Spoke & Chain** in the main navigation:
 
-![](/guide/site-link.png)
+![]({{ alias('@assetBaseUrl/assets/guide/site-link.png') }})
 
 The front end is built with Twig, Craft’s native templating system, with modern CSS and JavaScript.  
 
@@ -44,15 +44,15 @@ You’ve clearly made it to the control panel, which is where developers configu
 
 Before we go any further, you may want to visit your [account preferences]({{ cpUrl('myaccount#prefs') }}) to make the control panel a little more comfortable. Select the profile menu in the top right corner and click your username. Your **Preferences** tab includes language, formatting and accessibility options that might improve your demo experience:
 
-![](/guide/my-account.png)
+![]({{ alias('@assetBaseUrl/assets/guide/my-account.png') }})
 
 You’re looking at a current version of Craft CMS Pro with a minimal set of plugins since we want to emphasize what Craft does out of the box.
 
 The main navigation is off to your left, and depending on your browser width you may need to press the menu button to expand it.
 
 You’re looking at the Craft control panel as an admin so we can see everything all at once; this is the kitchen-sink view:
 
-![](/guide/dashboard.png)
+![]({{ alias('@assetBaseUrl/assets/guide/dashboard.png') }})
 
 Normally we wouldn’t see **Settings** or **Plugin Store** in production, and each user would see only the things allowed by the [permissions groups]({{ cpUrl('settings/users') }}) you’ve created and assigned.
 {% endset %}

templates/_guide/02-content.twig

@@ -3,62 +3,62 @@ Let’s take a look at the main places you can organize content in Craft CMS. (M
 
 ## Common Elements
 
-![](/guide/common-elements.png)
+![]({{ alias('@assetBaseUrl/assets/guide/common-elements.png') }})
 
 This site doesn’t have a lot of content, but it’s built with the main types you might utilize in your own project.
 It’s where most editors would spend their time in the control panel managing content.
 
 ### Entries
 
-![](/guide/entries.png)
+![]({{ alias('@assetBaseUrl/assets/guide/entries.png') }})
 
 The [Entries]({{ cpUrl('entries') }}) section is where most content is likely to live. Click **Entries** in the main navigation, and the **All entries** submenu will list everything in this area.
 
 The submenu is further broken down into Craft’s major sections we call “Section Types.”
 
 #### Channels
 
-![](/guide/channels.png)
+![]({{ alias('@assetBaseUrl/assets/guide/channels.png') }})
 
 Channels are what you’ve probably seen in any CMS: dated posts that follow a common format. Spoke & Chain has an “Articles” channel with timely fake announcements, “Emails” and “PDFs” channels for managing customer notification and invoice content, an “Error Pages” channel for custom error page messaging, a “Reviews” channel with demo entries that could have been imported or synced from an outside system for a live site, and a “Plans” channel for managing subscription plan content.
 
 #### Structures
 
-![](/guide/structures.png)
+![]({{ alias('@assetBaseUrl/assets/guide/structures.png') }})
 
 Structures are like Channels with one key difference: instead of a flat, date-centric list, you can drag and drop structure entries into whatever order you’d like.
 
 If you’ve ever used a CMS where you’ve had to edit a bunch of individual post dates to get things to appear in a specific order on the site, this is exactly what you’d use a structure for instead. You set the explicit order things should appear in by dragging them into place.
 
 #### Singles
 
-![](/guide/singles.png)
+![]({{ alias('@assetBaseUrl/assets/guide/singles.png') }})
 
 Singles are great for one-off pages, where you know there will only ever be one. They’re a special single-entry section type, used here for pages like home, about, contact, and landings for articles and services.
 
-![](/guide/custom-source.png)
+![]({{ alias('@assetBaseUrl/assets/guide/custom-source.png') }})
 
 For this project, we’ve also used a few lines of code to add a custom source called “Checkout Pages.” This isolates the Singles used for the checkout process for ease of editing.
 
 ### Globals
 
-![](/guide/globals.png)
+![]({{ alias('@assetBaseUrl/assets/guide/globals.png') }})
 
 [Globals]({{ cpUrl('globals') }}) are for content that may not be specific to any one entry, but used across multiple pages or throughout the site. Click **Globals** in the main navigation and you’ll see three sets of fields labeled “Shop,” “Bikes,” and “Footer.”
 
 This is where you can edit things like the store hours and address, the site-wide bike geometry diagram, and footer navigation and copyright info.
 
 ### Categories
 
-![](/guide/categories.png)
+![]({{ alias('@assetBaseUrl/assets/guide/categories.png') }})
 
 [Categories]({{ cpUrl('categories') }}) are hierarchical taxonomies you can establish to organize content. Click **Categories** in the main navigation and you’ll see four groups of categories used for products: “Bike Types,” “Colors,” “Equipment Types,” and “Material.”
 
 Each category has a handle you can grab to drag it into a different position. These categories are all configured to exist in a single, flat listing—but each could allow however many levels of nesting required by the site’s content model.
 
 ### Assets
 
-![](/guide/assets.png)
+![]({{ alias('@assetBaseUrl/assets/guide/assets.png') }})
 
 [Assets]({{ cpUrl('assets') }}) are files users can upload to Craft. Click **Assets** in the main navigation and you’ll see the single “Images” asset volume.
 
@@ -68,7 +68,7 @@ An important part for developers is that each asset volume can use its own stora
 
 #### Asset Editor
 
-![](/guide/asset-editor.png)
+![]({{ alias('@assetBaseUrl/assets/guide/asset-editor.png') }})
 
 Click any image file. You’ll see a detail view that includes custom **Image Alt** and **Image Caption** fields, along with the uploader and other details. Hover over the thumbnail and click the **Edit** button at the top right of the image preview.
 
@@ -80,7 +80,7 @@ You can double-click an asset preview anywhere in Craft CMS to jump to the edito
 
 ### Users
 
-![](/guide/users.png)
+![]({{ alias('@assetBaseUrl/assets/guide/users.png') }})
 
 [Users]({{ cpUrl('users') }}) are the last major content type, even though it might seem odd to think of people as content.
 Click **Users** in the main navigation to see the “All users” list with a submenu of admins and groups.
@@ -99,7 +99,7 @@ You can create as many users and user groups as you’d like for your project.
 
 ## Custom Fields
 
-![](/guide/custom-fields.png)
+![]({{ alias('@assetBaseUrl/assets/guide/custom-fields.png') }})
 
 Each of these content types—Entries, Globals, Categories, Assets, and Users—has a critical thing in common, and it’s one of the key features of Craft CMS: each one can have its own custom field layout.
 
@@ -115,7 +115,7 @@ As a site’s body of content grows and evolves, it’s important to be able to
 
 ### Search
 
-![](/guide/search.png)
+![]({{ alias('@assetBaseUrl/assets/guide/search.png') }})
 
 You can quickly search through content anywhere you see a search field. You can tailor any search with Craft’s [advanced syntax](https://craftcms.com/docs/3.x/searching.html) and optionally have a developer configure your site to make global customizations to search behavior with Craft’s [defaultSearchTermOptions setting](https://craftcms.com/docs/3.x/config/config-settings.html#defaultsearchtermoptions).
 
@@ -125,13 +125,13 @@ Listings of Entries, Categories, Assets, and Users can all be customized with an
 
 Click on **Entries**, for example, and then click the gear icon directly beneath the submenu. This opens a customization modal you can use to adjust your listings:
 
-![](/guide/table-customization.png)
+![]({{ alias('@assetBaseUrl/assets/guide/table-customization.png') }})
 
 ### Quick Export
 
 The bottom right of each listing table has an **Export...** button you can use to export the listings to CSV, JSON, or XML format:
 
-![](/guide/quick-export.png)
+![]({{ alias('@assetBaseUrl/assets/guide/quick-export.png') }})
 
 This can be useful for content audits and planning where you might need to take a step back from your content and see it in a spreadsheet or another tool.
 {% endset %}

templates/_guide/03-authoring.twig

@@ -5,7 +5,7 @@ Click **Entries** → **Articles** and click any title in the list to have a loo
 
 ## Common Fields
 
-![](/guide/common-fields.png)
+![]({{ alias('@assetBaseUrl/assets/guide/common-fields.png') }})
 
 Most entries have the same basic required fields you’ll see in any CMS:
 
@@ -23,59 +23,59 @@ Let’s look at some of Spoke & Chain’s custom fields and some content editing
 
 ### Plain Text
 
-![](/guide/plain-text.png)
+![]({{ alias('@assetBaseUrl/assets/guide/plain-text.png') }})
 
 Plain Text fields, like this **Heading** on the homepage, are for simple, unstyled text. They can be single- or multi-line and optionally have character limits.
 
 ### Assets
 
-![](/guide/assets-field.png)
+![]({{ alias('@assetBaseUrl/assets/guide/assets-field.png') }})
 
 Assets fields make it easy to upload or select files. Each field can be configured to specify how many files are allowed, where files can be uploaded to and chosen from, what types of files are acceptable, etc. This **Main Image** field on the homepage is re-used in a few other places (like the Services page) where it has the exact same effect on the front end.
 
 You can double-click a file to edit its details in place and use the asset editor we saw earlier. Since this is a relational field, any changes you make to assets will be maintained across the entire site.
 
 ### Categories
 
-![](/guide/categories-field.png)
+![]({{ alias('@assetBaseUrl/assets/guide/categories-field.png') }})
 
 Our bicycle products (**Commerce** → **Products**) use multiple Categories fields for establishing relationships to the categories managed in the **Categories** section of the control panel. Each field can designate whichever category groups should be available for the content author to select. In this case, the **Colors** field only allows selection from the “Colors” category group, while the **Material** field limits selection to the “Material” category group.
 
 Like the Assets field above, you can double-click any category to edit its name and fields in a slideout panel. Any changes you make will be maintained for that category across the site.
 
 ### Matrix
 
-![](/guide/matrix-add-block.png)
+![]({{ alias('@assetBaseUrl/assets/guide/matrix-add-block.png') }})
 
 You can pick any page in **Entries** → **Landing Pages** to see an example of a Matrix field.
 
 Matrix is a powerful, complex field type that works great with modular design systems. You’d configure a Matrix field with any number of blocks, which are specific named groupings of whatever fields you want. Content authors can add and arrange these blocks to compose content, and developers get clean, predictable data to work with building the front end.
 
-![](/guide/matrix-menu.png)
+![]({{ alias('@assetBaseUrl/assets/guide/matrix-menu.png') }})
 
 Matrix blocks can be easily rearranged, collapsed, and even individually disabled if their content isn’t ready to be published.
 
 You’ll see a rich text Redactor field and lightswitch field in the **Body** block here as well, which you could use outside of Matrix blocks. Any fields that are available can be used on their own and inside Matrix blocks—how you choose to use them is totally up to you.
 
 ## Preview
 
-![](/guide/preview.png)
+![]({{ alias('@assetBaseUrl/assets/guide/preview.png') }})
 
 To see what a page is going to look like before publishing it, press the **Preview** button.
 
 This slides open a pane that displays whatever content you’re currently editing, and it will update as you make changes. You can preview the page content in desktop, tablet, and mobile formats as well.
 
 ### Preview Targets
 
-![](/guide/preview-targets.png)
+![]({{ alias('@assetBaseUrl/assets/guide/preview-targets.png') }})
 
 It makes sense that you’d want to see an entry or product’s detail page, but you might also want to see what your edits will look like somewhere else on the site. This is exactly what Craft’s Preview Targets are for. You can configure whatever preview options you’d like for each section, maybe to see an item on the homepage or in product listings.
 
 A third-party plugin called [SEOmatic](https://plugins.craftcms.com/seomatic) programmatically adds its own **Social Media Preview** target here as well, so you can see how the article would appear in Google search results, and on Twitter or Facebook.
 
 ### Sharing Previews
 
-![](/guide/sharing-previews.png)
+![]({{ alias('@assetBaseUrl/assets/guide/sharing-previews.png') }})
 
 Any of those preview targets we just looked at can be shared easily.
 
@@ -85,7 +85,7 @@ This is a convenient way of sharing content for review with people that may not
 
 ### Drafts and Versioning
 
-![](/guide/drafts-versioning.png)
+![]({{ alias('@assetBaseUrl/assets/guide/drafts-versioning.png') }})
 
 Click on the dropdown menu just to the right of the page title. Any time you publish changes, create a draft, or make edits, this is where you’ll be able to get back to them. You can use **Preview** and **View** the same way with anything in this menu, and Craft will prompt you to decide what to do with any unsaved edits.
 

templates/_guide/04-commerce.twig

@@ -5,7 +5,7 @@ So far we’ve strictly looked Craft CMS, but Craft Commerce adds a wealth of fe
 
 If you haven’t already, have a look at [Commerce]({{ cpUrl('commerce') }}) in the primary control panel navigation:
 
-![](/guide/commerce.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce.png') }})
 
 Where Craft CMS empowers content authors, Craft Commerce is for store managers. Your own project can separate or blend those roles however you’d like.
 
@@ -17,29 +17,29 @@ On the [Content]({{ cpUrl('guide/page/content') }}) page we looked at Craft’s
 
 Navigate to **Commerce** → **Products** to see a list of the site’s bikes.
 
-![](/guide/commerce-products.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce-products.png') }})
 
 In a larger store, you might choose to add more Product Types in the same way you could have any number of Craft Entry Types.
 
 Products are the things for sale, each with common fields related to shipping, promotions, and tax as well as the custom fields you add to the layout.
 
-![](/guide/commerce-product.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce-product.png') }})
 
 An important aspect of products are its [Variants](https://craftcms.com/docs/commerce/3.x/products-variants.html)—from a product detail page click the **Variants** tab. There may be one or several variants, and there will always be a single default.
 
-![](/guide/commerce-product-variants.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce-product-variants.png') }})
 
 The site is configured with subscription plans you’ll see in **Commerce** → **Subscriptions**, and could also take advantage of donations that could be configured at **Commerce** → **Store Settings** → **Donations**.
 
 ### Orders
 
-![](/guide/commerce-orders.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce-orders.png') }})
 
 Your demo was created with a bunch of fake [orders]({{ cpUrl('commerce/orders') }}) so you can see what they look like in the control panel.
 
 Each [order](https://craftcms.com/docs/commerce/3.x/orders-carts.html) is an element, built by a customer on the front end or by a store manager in the control panel. An order starts its life as a cart until it’s completed via checkout or manual action by a store manager. Every order is visible from the control panel, and can be configured with custom statuses, bespoke email and PDF invoice templates, and paid for—partially or in full—with [one of several available payment gateways](https://craftcms.com/docs/commerce/3.x/payment-gateways.html#first-party-gateway-plugins).
 
-![](/guide/commerce-order.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce-order.png') }})
 
 ## Custom Field Types
 
@@ -49,11 +49,11 @@ Commerce includes field types you can use in any custom layout to easily relate
 
 One example is the _Products_ field you’ll see in an article’s content blocks. You can use it to choose up to three products to promote within the content of a post:
 
-![](/guide/products-field.png)
+![]({{ alias('@assetBaseUrl/assets/guide/products-field.png') }})
 
 ## Store Management
 
-![](/guide/commerce-store-settings.png)
+![]({{ alias('@assetBaseUrl/assets/guide/commerce-store-settings.png') }})
 
 It would be excessive to cover every configurable Commerce option here. Consider exploring the Commerce submenus and settings and we’ll hit on some of the big ones.
 
@@ -71,7 +71,7 @@ In **Commerce** → **Promotions**, you can manage site-wide sales and cart-spec
 
 That “VIP Customers” group we mentioned earlier is used for the `VIP25` discount, which makes 25% off available only to members of that user group:
 
-![](/guide/vip-discount.png)
+![]({{ alias('@assetBaseUrl/assets/guide/vip-discount.png') }})
 
 ### Shipping