Skip to content
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

Img helper size config #10182

Merged
merged 20 commits into from
Dec 13, 2018
Merged

Img helper size config #10182

merged 20 commits into from
Dec 13, 2018

Conversation

allouis
Copy link
Contributor

@allouis allouis commented Nov 19, 2018

refs #10181
Given a theme with a package.json with an image_sizes object like this:
(N.B. the small key must have at least a height or a width, or both)

{
  "config": {
    "image_sizes": {
      "small": {
        "width": 300,
        "height": 200
      },
      "wide": {
        "width": 2000
      },
      "tall": {
        "height": 2000
      }
    }
  }
}

Using the img_url helper in the theme like

<img src="{{img_url profile_image}}">
<img src="{{img_url profile_image size="small"}}">
<img src="{{img_url profile_image size="wide"}}">
<img src="{{img_url profile_image size="tall"}}">
<img src="{{img_url profile_image size="unknown-size!!!"}}">

Will render to

<img src="/content/images/path/to/profile_image.ext">
<img src="/content/images/size/w300h200/path/to/profile_image.ext">
<img src="/content/images/size/w2000/path/to/profile_image.ext">
<img src="/content/images/size/h2000/path/to/profile_image.ext">
<img src="/content/images/path/to/profile_image.ext">

If the package.json of the theme does not define the image_sizes object or the requested size is not included in the image_sizes object, the original image will be served.

@allouis allouis mentioned this pull request Nov 19, 2018
4 tasks
@allouis allouis changed the title [WIP] Img helper size config Img helper size config Nov 26, 2018
@@ -40,6 +40,8 @@ module.exports = {
isPrivacyDisabled: config.isPrivacyDisabled.bind(config)
},

activeTheme: require('../services/themes/active'),

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

@ErisDS
Copy link
Member

ErisDS commented Nov 26, 2018

Additional note this PR has the ability to specify only widths/heights which conflicts with the spec and needs confirmation

@ErisDS
Copy link
Member

ErisDS commented Nov 26, 2018

We've agreed it is preferable to allow either width, height or both.

@allouis
Copy link
Contributor Author

allouis commented Dec 3, 2018

I've updated the PR description to reflect the new url structure i.e wXhX, wX and hX

return imagePath;
}

if (/https?:\/\//.test(imagePath)) {

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

@allouis
Copy link
Contributor Author

allouis commented Dec 13, 2018

@ErisDS This has been updated to work with absolute urls when they belong to the blog domain. Which means v2 content api compat ☺️

@allouis allouis merged commit c2275ed into TryGhost:master Dec 13, 2018
@allouis allouis deleted the img-helper-size-config branch December 13, 2018 12:14
@ErisDS ErisDS removed their assignment Jun 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants