-
-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Adding static assets
Oppia uses cache slugs with static resources to cut down on bandwidth requirements for a user. This requires a developer to use appropriate methods (depending on the static resource required) defined in /core/templates/domain/utilities/UrlInterpolationServiceSpec.js
.
Common steps to use these methods:
- Include/import
UrlInterpolationServiceSpec.js
in the corresponding html and controller files. - Expose the method to the html using
$scope
, eg.$scope.getStaticResourceUrl = (UrlInterpolationService.getStaticResourceUrl);
- Call the method using angular tags in the html,
eg.
<link rel="stylesheet" type="text/css" ng-href="<[getStaticResourceUrl('/path-to-resource')]>">
Depending on the static resource type we have the following methods:
-
getStaticResourceUrl(resourcePath): For css, js and extension resources. Usage:
<link rel="stylesheet" type="text/css" ng-href="<[getStaticResourceUrl('/path-to-resource')]>">
Example:<link rel="stylesheet" type="text/css" ng-href="<[getStaticResourceUrl('/extensions/gadgets/AdviceBar/static/css/adviceBar.css')]>">
-
getStaticImageUrl(imagePath): This method should be used to reference image files present in
/assets/images
andimagePath
passed in the method should be relative to/assets/images
and start with a forward slash. Example:<img ng-src="<[getStaticImageUrl('/logo/288x128_logo_white.png')]>">
-
getGadgetImgUrl(gadgetType): This method given a gadget type, returns the complete url path to that gadget type image. Example:
<img ng-src="<[getGadgetImgUrl(gadgetType)]>">
-
getInteractionThumbnailImageUrl(interactionId): This method given an interaction id, returns the complete url path to the thumbnail image for the interaction. Example:
<img ng-src="<[getInteractionThumbnailImageUrl(interactionId)]>">
Have an idea for how to improve the wiki? Please help make our documentation better by following our instructions for contributing to the wiki.
Core documentation
Developing Oppia
- FAQs
- Installing Oppia
- Getting started with the codebase
- Making your first PR
- Learning resources for developers
- Codebase Overview
- Coding Guidelines
- Coding style guide
- Guidelines for creating new files
- How to add a new page
- How to write frontend type definitions
- How to write design docs
- Revert and Regression Policy
- Server errors and solutions
-
Debugging
- If your presubmit checks fail
- If CI checks fail on your PR
- Finding the commit that introduced a bug
- Interpreting GitHub Actions Results
- Debugging Docs
- Debugging datastore locally
- Debugging end-to-end tests
- Debugging backend tests
- Debugging frontend tests
- Debug frontend code
- Debugging custom ESLint check tests
- Debugging custom Pylint check tests
- Debugging Stories
- Guidelines for launching new features
- Guidelines for making an urgent fix (hotfix)
- Lint Checks
- Oppia's code owners and checks to be carried out by developers
- Privacy aware programming
- Backend Type Annotations
- Bytes and string handling in Python 3
- Guidelines for Developers with Write Access to oppia/oppia
- Testing
- Release Process
Developer Reference
- Oppiabot
- Frontend
- Backend
- Translations
- Webpack
- Third-party libraries
- Extension frameworks
- Oppia-ml Extension
- Mobile development
- Mobile device testing
- Performance testing
- Build process
- Team structure
- Triaging Process
- Playbooks
- Wiki
- Past Events