Skip to content
This repository was archived by the owner on Jun 22, 2023. It is now read-only.

Removed tilde from asset paths, update to differentiate between CSS and template files #1080

Open
Blackbaud-AlexKingman wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Removed tilde from asset paths, update to differentiate between CSS and template files #1080

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
127b4b0
Removed tilde from asset paths
Feb 10, 2022
90e2555
using absolute
Feb 10, 2022
2cf3398
Merge branch 'master' into assets-path-remove-tilde
blackbaud-johnly Feb 11, 2022
da07551
updated to reflect document vs root-relative paths
Feb 17, 2022
d1e7b2e
Merge branch 'master' into assets-path-remove-tilde
Feb 17, 2022
6e00b42
Merge branch 'assets-path-remove-tilde' of https://github.com/blackba…
Feb 17, 2022
8e35df5
Merge branch 'master' into assets-path-remove-tilde
Blackbaud-AlexKingman Feb 17, 2022
db1cf51
Update src/app/learn/get-started/advanced/include-static-assets/index…
Blackbaud-AlexKingman Feb 17, 2022
de45338
Update src/app/learn/get-started/advanced/include-static-assets/index…
Blackbaud-AlexKingman Feb 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 27 additions & 8 deletions src/app/learn/get-started/advanced/include-static-assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</stache-page-summary>

<stache-page-anchor>
Include a static asset on a page
Include a static asset from a component's template or style sheet
</stache-page-anchor>

<ol>
Expand All @@ -20,25 +20,22 @@
</li>
<li>
<p>
On the file where you want to include the static asset, reference the static asset with <sky-code>&#126;/assets/</sky-code> before the filename and path.
</p>
<p>
References to static assets must start with <sky-code>&#126;/assets/</sky-code> for the <sky-code>SkyAppAssetsService</sky-code> to retrieve the assets from the <sky-code>src/assets</sky-code> folder because the filenames are updated at build time to include hashes that represent the content of the files.
On the file where you want to include the static asset, reference the static asset with a root-relative path, such as <sky-code>/assets/img/example.jpg</sky-code>.
</p>
<p>
For example, you can display an image on a page.
</p>
<sky-code-block>
<p>
<img src="&#126;/assets/img/example.jpg" alt="Photo" />
<img src="/assets/img/example.jpg" alt="Photo" />
</p>
</sky-code-block>
<p>
Or you can insert an image in the background.
</p>
<sky-code-block languageType="typescript">
<div [ngStyle]="{
'background-image': 'url(&#126;/assets/img/example.jpg)',
'background-image': 'url(/assets/img/example.jpg)',
'height': '500px',
'width': '500px'
}">
Expand All @@ -48,6 +45,28 @@
</li>
</ol>

<stache-page-anchor>
Include a static asset from a global style sheet
</stache-page-anchor>

<ol>
<li>
Copy link
Copy Markdown
Contributor

@blackbaud-johnly blackbaud-johnly Feb 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need an initial step like in the previous section telling users to store the statics asset in src/assets? The example here is still using /assets/img/, so it seems like they'd still need to add the image to that folder path.

<p>
On the style sheet where you want to include the static asset, reference the static asset with a document-relative path, such as <sky-code>assets/img/example.jpg</sky-code>.
</p>
<p>
For example, you can display an image on a page.
</p>
<sky-code-block languageType="typescript">
.foo-global {
height: 500px;
width: 500px;
background-image: url(assets/img/example.jpeg);
}
</sky-code-block>
</li>
</ol>

<stache-page-anchor>
Retrieve a static asset with <sky-code>SkyAppAssetsService</sky-code>
</stache-page-anchor>
Expand All @@ -71,7 +90,7 @@
</li>
<li>
<p>
In the <sky-code>getUrl</sky-code> method, specify the path and file name for the static asset. Do not include the <sky-code>~/assets</sky-code> prefix, and note that param is case-sensitive.
In the <sky-code>getUrl</sky-code> method, specify the path and file name for the static asset. Do not include the <sky-code>/assets</sky-code> prefix, and note that param is case-sensitive.
</p>
<sky-code-block>
skyAppAssetsService.getUrl('json/example.json')
Expand Down