Use govuk-image-url helper for search button image

[simonwo]

You recently introduced a new search button and it has a cute magnifying glass image. Thanks!

But you haven't passed the image through a call to govuk-image-url which means that downstream users who need finer-grained control over how the image URLs are formed are broken. In my case that means our (Department for International Trade's) documentation currently doesn't display the magnifying glass and we just have an empty box.

(To give some context to why, we override govuk-image-url-function to add a prefix to the root of the URL as we serve our pages from GitHub Pages.)

Would you be able to add that call please? A la:

background-image: govuk-image-url('/images/search-button.png');

[lfdebrux]

Hi @simonwo, thanks for raising this issue, sorry it's taken us a while for us to look into it.

I'm not sure using the govuk-image-url function here would do what you want, because the search button image is not an image from govuk-frontend, it's actually part of this gem, and in a built site it is kept in a different location, /images instead of /assets/govuk/assets/images.

I'm curious though why serving from GitHub pages isn't working for you; is it because you have a path prefix?

[lfdebrux]

This might be addressed by PR https://github.com/alphagov/tech-docs-gem/pull/197.

[simonwo]

Hi @lfdebrux, you are quite right that govuk-image-url is not the right answer – I was definitely too quick to solutionise!

The problem is indeed that we are currently serving pages from Github Pages at e.g. https://uktrade.github.io/my-repository/. As the assets are expected to be at the root they aren't found.

The workaround we used was (in source/screen.css.scss.erb):

$prefix: "<%= (ENV['GITHUB_REPOSITORY'] || '').partition('/')[-2..-1].join %>";

@function add-github-prefix-fonts($filename) {
  @return url($prefix + $govuk-fonts-path + $filename)
}
$govuk-font-url-function: add-github-prefix-fonts;

@function add-github-prefix-images($filename) {
  @return url($prefix + $govuk-images-path + $filename)
}
$govuk-image-url-function: add-github-prefix-images;

@import "govuk_tech_docs";

and then at the end of the build we do a search/replace:

sed -i 's:url("/images/:url("my-repository/images/:' build/stylesheets/*.css

[m-green]

Hi @simonwo - as this seems to be covered by the existing issue and PR that @lfdebrux mentioned, I'll close this but add a note about it to https://github.com/alphagov/tech-docs-gem/pull/197. Hope that's ok - let me know if not.