-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Host image assets within package #722
Comments
So we've got a couple of options here:
Ref: #442 |
Thanks for looking into this! I don't have a strong opinion about the best way to address it, but less configuration (or sensible defaults) would be ideal. For the record, our project is not actually using any of the styles that have the missing images. We only discovered the problem by running an exhaustive link checker on the site. It looks like they're all spinners or ajax-related images:
|
It looks like we don't serve any CORS headers that would prevent these from working anywhere if we qualified them with
So I wonder if the best solution is to have a map of image URLs that can be selectively overridden? For instance: $image-url-base: "https://github.com" !default;
$image-urls: (
spinner-1x: "#{$image-url-base}/images/spinners/octocat-spinner-16px.gif",
spinner-2x: "#{$image-url-base}/images/spinners/octocat-spinner-32.gif",
// etc.
) !default; and you could override them in your stylesheet with: // override the url base, but preserve the paths
$image-url-base: "https://some-other-domain.com";
@import "@primer/css/support/index.scss";
// _or_ merge new values into the global $image-urls map after importing
$image-urls: map-merge($image-urls, (
spinner-1x: "/path/to/spinner@1x.gif"
)) !global;
// then this picks up the variables we've set, because !default
@import "@primer/css/index.scss"; |
Transform those images to base64 could be an option? 🤔 |
@ocarreterom It's an option, but that would significantly increase the size of our CSS bundles. We already do it for the ▼ in dropdown menus, but the base64 version of that image is very small. |
👋 I just ran into this on a personal project using a |
cross-platform snippet (win and *nix) to download the missing images. open a cmd or shell and cd to the dir where you want the images folder to be created and download the missing images with this script:note: windows users should have wget installed via> choco install wget (https://chocolatey.org/)
|
Perhaps the picture references should be removed from the code. As a css library, the ideal situation should be that there is only css in the source code, such as bootstrap. Users who want to use pictures as a background should write this part of the code by themselves. |
cross-platform snippet (win and *nix) to download the missing images. open a cmd or shell and cd to the dir where you want the images folder to be created and download the missing images with this script:
based on @scriptmaster's code |
@beary perhaps we should introduce more problems to an unsolved simple/defined problem, by suggesting cross-referenced/inspired solution via text, and not via code or pull-request. Or I'd focus on what I had to with primer css to deliver to the customers. |
Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days. |
This is not done. Please reopen the issue. |
FYI: @abdounikarim created a PR #1932 to add the images linked in Below a cross-post about the reason why we are trying to move away from using images and an example how you can override the image path if you still like to keep them in your own app/site. I'm gonna close this (#1932) as a If the current paths don't work for your app, you could override it to your own file structure. For example add the .my-app .form-group > .form-group-body {
.form-control {
&.is-autocheck-loading {
background-image: url('../images/spinners/octocat-spinner-16px.gif');
}
&.is-autocheck-successful {
background-image: url('../images/modules/ajax/success.png');
}
&.is-autocheck-errored {
background-image: url('../images/modules/ajax/error.png');
}
}
} |
Thanks for the update @simurai 💛 |
I've used |
Is your feature request related to a problem? Please describe.
Describe the solution you'd like
/images
folder to primer/css or host the images somewhere and provide full urls to themAdditional context
@gladwearefriends brought this up as the missing assets were causing her builds to fail on a project outside of github/github
The text was updated successfully, but these errors were encountered: