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

feat(default-theme): Improve SwImage component with srcset #1887

Merged
merged 3 commits into from
Jun 13, 2022

Conversation

quando1910
Copy link
Collaborator

@quando1910 quando1910 commented Jun 6, 2022

this PR closes #1884

Changes

  • add new prop srcset for SwImage component.
  • update srcset data of SwImage inside CmsElementImage component.

Checklist

  • implement computed property for src set
  • find all occurances of SwImage component used in default-theme
  • pass src set extracted from available data from the parent (ignore if it's not possible).
  • use breakpoints set as default coming with media object (400, 800, 1200?).

@vercel
Copy link

vercel bot commented Jun 6, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Updated
shopware-pwa-docs ⬜️ Ignored (Inspect) Jun 10, 2022 at 6:27AM (UTC)

Copy link
Collaborator

@patzick patzick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good start! :)
take a closer look at Optional Chaining and look more closely at Vue's Composition API, so we'll have logic inside the setup method

imgUrl() {
return getResizedImage(this.getMedia && this.getMedia.url)
imagesUrl() {
return this.getMedia ? this.getMedia.thumbnails : []
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return this.getMedia ? this.getMedia.thumbnails : []
return this.getMedia?.thumbnails ?? []

setup(props, { root }) {
const width = (props.imageWidth && props.imageWidth + "px") || "100%"
const height = (props.imageHeight && props.imageHeight + "px") || "100%"
return {
placeholder: getPlaceholderImage(width, height),
}
},
computed: {
srcsets () {
return this.srcset ? this.srcset.map(item => ({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's move these computed properties to setup method, example:

const srcsets = computed(() => props.srcset?.map(item => ({
   src: item.url,
   width: item.width,
   resolution: item.width
  }) ?? []
)

@quando1910 quando1910 force-pushed the feat/improve-swimage-with-srcset branch from 33b2600 to 7d02980 Compare June 7, 2022 03:30
@github-actions
Copy link

💙 shopware-pwa-test-europe-west1-gcp-storefrontcloud-io successfully deployed at https://4bcba761eed8f37e370250ddbda0f8bd9025f925.shopware-pwa-test.preview.europe-west1.gcp.storefrontcloud.io

Copy link
Collaborator

@patzick patzick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@patzick patzick merged commit 2189d66 into master Jun 13, 2022
@patzick patzick deleted the feat/improve-swimage-with-srcset branch June 13, 2022 08:57
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.

[FEATURE] Improve SwImage component with srcset
2 participants