Skip to content

Conversation

@ThiloHettmer
Copy link
Contributor

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

With strapi 5 the url for responsive images has changed.

Strapi 5 now prefixes responsive images with "thumbnail_", "small_" and so on.

Additionally Strapi 5 won't create images for a certain breakpoint if the source image has a lower resolution than the breakpoint.

Strapi does return on the image request a "formats" object which contains all generated image (partial) urls.

This change will add a new provider "strapi5" with the following functionality:

  • Generates the correct image urls depending on the parameter modifiers.breakpoint (same parameter as before)
  • Accepts optional modifiers.formats and will pick the correct url for the provided breakpoint. If there is no image for the breakpoint it will return the next available image with a lower resolution.
  • Accepts optional modifiers.breakpoints to add custom breakpoints.

Example

const image = {
  url: 'test.jpg',
  formats: {
    thumbnail: {
      name: 'thumbnail_test.jpg',
      url: '/uploads/thumbnail_test.jpg',
    },
    small: {
      name: 'small_test.jpg',
      url: '/uploads/small_test.jpg',
    },
    medium: {
      name: 'medium_test.jpg',
      url: '/uploads/medium_test.jpg',
    },
    large: {
      name: 'large_test.jpg',
      url: '/uploads/large_test.jpg',
    },
  },
}

...

<NuxtImg :src="image.url" :modifiers={ breakpoint: 'medium', formats: image.formats } provider="strapi5" />

This is my first contribution ever, so please don't go hard on me ;)

@danielroe danielroe changed the title feat:strapi 5 provider with formats feat(strapi5): add new provider with formats Dec 20, 2024
@danielroe
Copy link
Member

in future we might adopt compatibilityDate to version strapi v4 vs v5 - cc: @pi0 in case you have ideas...

@danielroe danielroe merged commit 85eaaac into nuxt:main Jan 6, 2025
@github-actions github-actions bot mentioned this pull request Jan 6, 2025
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