Vuetify: [Feature Request] add srcset support to VParallax

[ram-you]

Hi,
any plan for using v-parallax with srcset and sizes ?
thanks

[johnleider]

When creating an issue you should be provided with boilerplate for the ticket. This is important for myself and others to properly address your issue. Please reopen this with the required information, thank you.

[johnleider]

That is because the issue board is for feature requests and bugs, not for questions. When creating an issue, you are supplied with boilerplate that says this:

Have a feature request?

• Remove the template from below and provide thoughtful commentary.

• Answer those questions:

  • What will it allow you to do that you can't do today?
  • How will it make current work-arounds straightforward?
  • What potential bugs and edge cases does it help to avoid?

Do not create new features based on a problem that will only solve edge cases for your project.

Every time you create an issue, you are refusing to follow these guidelines, and because of that, the issues are closed. If you can take the time to fill out the proper requirements, I will be more than happy to consider your requests.

[ram-you]

v-parallax with srcset, heights and sizes
was not a question, it was a Feature-Request

[johnleider]

If it was a feature request, then you should follow the feature request boilerplate, provided above, and that exists when you go to create an issue.

[johnleider]

Can you just clarify to me what it is that you are wanting to add? We can take it from there. Thank you for your patience.

[ram-you]

v-parallax have only src and height options. After compilation generated an I'd like to generate a responsive image with srcse & sizes so we should simply add srcset and sizes as options.

Thank you again

[johnleider]

So essentially instead of applying an image to a background automatically for you, you'd like to be able to just use your own tag within the carousel?

[ram-you]

in VParallax.vue src/components/VParallax I suggest this changes:

.....
    props: {
      height: {
        type: [String, Number],
        default: 500
      },
      src: String,
      srcset: String,  
      sizes: String
    },
......
    render (h) {
      const container = h('div', {
        staticClass: 'parallax__image-container'
      }, [
        h('img', {
          staticClass: 'parallax__image',
          style: this.styles,
          attrs: {
            src: this.src?this.src:"",
            srcset: this.srcset?this.srcset:"", 
            sizes: this.sizes?this.sizes:"",
          },
          ref: 'img'
        })
      ])

........

[ram-you]

FYI: W3C HTML 5 specifications for using srcset
http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset

[johnleider]

Thank you!

On Oct 8, 2017 3:53 PM, "Ramzi Youssef" [e-mail] wrote:

FYI: W3C HTML 5 specifications for using srcset
http://w3c.github.io/html/semantics-embedded-content.
html#element-attrdef-img-srcset

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/1535#issuecomment-335033307,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgkWFVG3txW_q96sVoAkqYq8Wj_ZAks5sqSg2gaJpZM4PHoQo
.

[stbaer]

👍 Could also use this.

[johnleider]

We are definitely going to support this! Will come with some cool new features as well.

[johnleider]

This will still be implemented but is just very low on triage.

[TGRBTRFLY]

Let me know when it gets implemented! :)

[KazakovKirill]

@TGRBTRFLY @ram-you Please check my commit #10915 — it working for me now

[KazakovKirill]

@TGRBTRFLY @ram-you, as temporary solution you can use this:

mounted() {
    // I have only one parallax image
    const imgs = document.getElementsByClassName('v-parallax__image') 

    // Here is your srcset attribute value
    const srcset = require('~/assets/img/parallax.jpg').srcSet

    if (imgs && imgs.length > 0)
      Array.prototype.forEach.call(imgs, (img) => img.setAttribute('srcset', srcset))
  }

[johnleider]

resolved in e72e78f3e9872c65589cfbdd197d23c214c8426e