-
-
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
- How to get help
- Getting started with the project
- How the codebase is organized
- Making your first PR
- Debugging
- Testing
- Codebase policies and processes
- Guidelines for launching new features
- Guidelines for making an urgent fix (hotfix)
- Testing jobs and other features on production
- Guidelines for Developers with Write Access to oppia/oppia
- Release schedule and other information
- Revert and Regression Policy
- Privacy aware programming
- Code review:
- Project organization:
- QA Testing:
- Design docs:
- Team-Specific Guides
- LaCE/CD:
- Developer Workflow:
Developer Reference
- Oppiabot
- Git cheat sheet
- Frontend
- Backend
- Backend Type Annotations
- Writing state migrations
- Calculating statistics
- Storage models
- Coding for speed in GAE
- Adding a new page
- Adding static assets
- Wipeout Implementation
- Notes on NDB Datastore transactions
- How to handle merging of change lists for exploration properties
- Instructions for editing roles or actions
- Protocol buffers
- Webpack
- Third-party libraries
- Extension frameworks
- Oppia-ml Extension
- Mobile development
- Performance testing
- Build process
- Best practices for leading Oppia teams
- Past Events