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.

Sign up for GitHub

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

Jump to bottom

Set height attribute #2132

Merged
merged 1 commit into from
Oct 26, 2020
Merged

Set height attribute #2132

merged 1 commit into from
Oct 26, 2020

Conversation

rocramer
Copy link
Contributor

The image tags do not contain a height attribute (only the width). This can lead to layout shifts while rendering. Google recommends adding the width and height attributes so modern browsers can calculate the aspect ratio automatically: https://web.dev/optimize-cls/#modern-best-practice

@freekmurze freekmurze merged commit 0381b91 into spatie:v9 Oct 26, 2020
@freekmurze
Copy link
Member

Thanks!

@rocramer rocramer deleted the v9 branch October 26, 2020 11:47
freekmurze added a commit that referenced this pull request Oct 30, 2020
@freekmurze @AdrianMrn
@sebastiandedeyne @willemvb @rocramer @Nielsvanpach
[WIP] v9 (#2098)
0730227 
* wip

* wip

* wip

* wip

* fix case

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* update javascript docs

* update javascript docs

* wip JS components documentation

* wip javascript components documentation

* wip

* wip

* wip

* Update handling-uploads-with-vue-or-react.md

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* remove translations

* wip

* wip

* wip

* Fix styling

* update props

* improve conversions (#2101)

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* wip

Co-authored-by: freekmurze <[email protected]>

* update

* document maxSizeForPreviewInBytes

* wip

* wip

* Rework frontend docs

* Rework frontend docs

* Restore data code blocks

* wip

* wip

* Update general upload guide

* Words

* Words

* Doc updates

* wip

* Fix styling

* wip

* wip

* wip

* use v9 links

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* v9

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* correct year

* wip

* docs: css installation

* wip

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* docs: update JS UI components

* wip js docs

* wip

* wip

* update validation property name

* update for Vue 3

* updates for Vue 3

* Set height attribute (#2132)

* update naming

* typo

* wip

* reorder sections

* capitalize CSS

* wip

* wip

* wip

* add jsonSerialize to MediaCollection

* update slot usage for Vue 3

* fix getting old values

* Fix styling

* fix last commit

* File namer#1784 (#2114)

* support a custom file namer for responsive images

* Fix styling

* apply code review suggestions

* let conversions use a new file namer class

* add documentation

* cleanup last conversion file namer parts

* apply code review suggestions

* split up conversion & responsive file namer

* remove get prefix on FileNamer methods

* Update naming-generated-files.md

* Update naming-generated-files.md

Co-authored-by: Nielsvanpach <[email protected]>
Co-authored-by: Freek Van der Herten <[email protected]>

* wip

* wip

* update docs with new endpoints

* wip

* wip

* drop laravel 6

* wip

* update vapor config

* wip

* update upload endpoint

* update paths

* allow PHP 8

* wip

* remove notice

* add enable_vapor_uploads option + restructure config file

* wip

* wip

* wip

* find last occurence of starting characters (#2140)

* find last occurence of starting characters

if a filename ends with _, the responsive image will have four underscores in its name. We used to trim at the first occurence, so the collection name starts with an underscore. This way responsive image will not get rendered as expected. Now, we will trim on the last occurence and the collection name will not start with an underscore in this case.

* fix test case

Co-authored-by: Adriaan <[email protected]>
Co-authored-by: freekmurze <[email protected]>
Co-authored-by: Sebastian De Deyne <[email protected]>
Co-authored-by: Willem Van Bockstal <[email protected]>
Co-authored-by: Robin Cramer <[email protected]>
Co-authored-by: AdrianMrn <[email protected]>
Co-authored-by: Niels Vanpachtenbeke <[email protected]>
Co-authored-by: Nielsvanpach <[email protected]>
ivoberg pushed a commit to ivoberg/laravel-medialibrary that referenced this pull request Mar 26, 2021
@freekmurze @AdrianMrn
@sebastiandedeyne @willemvb @rocramer @Nielsvanpach @ivoberg
[WIP] v9 (spatie#2098)
68fae82 
* wip

* wip

* wip

* wip

* fix case

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* update javascript docs

* update javascript docs

* wip JS components documentation

* wip javascript components documentation

* wip

* wip

* wip

* Update handling-uploads-with-vue-or-react.md

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* remove translations

* wip

* wip

* wip

* Fix styling

* update props

* improve conversions (spatie#2101)

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* wip

Co-authored-by: freekmurze <[email protected]>

* update

* document maxSizeForPreviewInBytes

* wip

* wip

* Rework frontend docs

* Rework frontend docs

* Restore data code blocks

* wip

* wip

* Update general upload guide

* Words

* Words

* Doc updates

* wip

* Fix styling

* wip

* wip

* wip

* use v9 links

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* v9

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* correct year

* wip

* docs: css installation

* wip

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* docs: update JS UI components

* wip js docs

* wip

* wip

* update validation property name

* update for Vue 3

* updates for Vue 3

* Set height attribute (spatie#2132)

* update naming

* typo

* wip

* reorder sections

* capitalize CSS

* wip

* wip

* wip

* add jsonSerialize to MediaCollection

* update slot usage for Vue 3

* fix getting old values

* Fix styling

* fix last commit

* File namer#1784 (spatie#2114)

* support a custom file namer for responsive images

* Fix styling

* apply code review suggestions

* let conversions use a new file namer class

* add documentation

* cleanup last conversion file namer parts

* apply code review suggestions

* split up conversion & responsive file namer

* remove get prefix on FileNamer methods

* Update naming-generated-files.md

* Update naming-generated-files.md

Co-authored-by: Nielsvanpach <[email protected]>
Co-authored-by: Freek Van der Herten <[email protected]>

* wip

* wip

* update docs with new endpoints

* wip

* wip

* drop laravel 6

* wip

* update vapor config

* wip

* update upload endpoint

* update paths

* allow PHP 8

* wip

* remove notice

* add enable_vapor_uploads option + restructure config file

* wip

* wip

* wip

* find last occurence of starting characters (spatie#2140)

* find last occurence of starting characters

if a filename ends with _, the responsive image will have four underscores in its name. We used to trim at the first occurence, so the collection name starts with an underscore. This way responsive image will not get rendered as expected. Now, we will trim on the last occurence and the collection name will not start with an underscore in this case.

* fix test case

Co-authored-by: Adriaan <[email protected]>
Co-authored-by: freekmurze <[email protected]>
Co-authored-by: Sebastian De Deyne <[email protected]>
Co-authored-by: Willem Van Bockstal <[email protected]>
Co-authored-by: Robin Cramer <[email protected]>
Co-authored-by: AdrianMrn <[email protected]>
Co-authored-by: Niels Vanpachtenbeke <[email protected]>
Co-authored-by: Nielsvanpach <[email protected]>
ivoberg pushed a commit to ivoberg/laravel-medialibrary that referenced this pull request Mar 26, 2021
@freekmurze @AdrianMrn
@sebastiandedeyne @willemvb @rocramer @Nielsvanpach @ivoberg
[WIP] v9 (spatie#2098)
c2263f3 
* wip

* wip

* wip

* wip

* fix case

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* update javascript docs

* update javascript docs

* wip JS components documentation

* wip javascript components documentation

* wip

* wip

* wip

* Update handling-uploads-with-vue-or-react.md

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* remove translations

* wip

* wip

* wip

* Fix styling

* update props

* improve conversions (spatie#2101)

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* wip

Co-authored-by: freekmurze <[email protected]>

* update

* document maxSizeForPreviewInBytes

* wip

* wip

* Rework frontend docs

* Rework frontend docs

* Restore data code blocks

* wip

* wip

* Update general upload guide

* Words

* Words

* Doc updates

* wip

* Fix styling

* wip

* wip

* wip

* use v9 links

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* v9

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* correct year

* wip

* docs: css installation

* wip

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* docs: update JS UI components

* wip js docs

* wip

* wip

* update validation property name

* update for Vue 3

* updates for Vue 3

* Set height attribute (spatie#2132)

* update naming

* typo

* wip

* reorder sections

* capitalize CSS

* wip

* wip

* wip

* add jsonSerialize to MediaCollection

* update slot usage for Vue 3

* fix getting old values

* Fix styling

* fix last commit

* File namer#1784 (spatie#2114)

* support a custom file namer for responsive images

* Fix styling

* apply code review suggestions

* let conversions use a new file namer class

* add documentation

* cleanup last conversion file namer parts

* apply code review suggestions

* split up conversion & responsive file namer

* remove get prefix on FileNamer methods

* Update naming-generated-files.md

* Update naming-generated-files.md

Co-authored-by: Nielsvanpach <[email protected]>
Co-authored-by: Freek Van der Herten <[email protected]>

* wip

* wip

* update docs with new endpoints

* wip

* wip

* drop laravel 6

* wip

* update vapor config

* wip

* update upload endpoint

* update paths

* allow PHP 8

* wip

* remove notice

* add enable_vapor_uploads option + restructure config file

* wip

* wip

* wip

* find last occurence of starting characters (spatie#2140)

* find last occurence of starting characters

if a filename ends with _, the responsive image will have four underscores in its name. We used to trim at the first occurence, so the collection name starts with an underscore. This way responsive image will not get rendered as expected. Now, we will trim on the last occurence and the collection name will not start with an underscore in this case.

* fix test case

Co-authored-by: Adriaan <[email protected]>
Co-authored-by: freekmurze <[email protected]>
Co-authored-by: Sebastian De Deyne <[email protected]>
Co-authored-by: Willem Van Bockstal <[email protected]>
Co-authored-by: Robin Cramer <[email protected]>
Co-authored-by: AdrianMrn <[email protected]>
Co-authored-by: Niels Vanpachtenbeke <[email protected]>
Co-authored-by: Nielsvanpach <[email protected]>
ivoberg pushed a commit to ivoberg/laravel-medialibrary that referenced this pull request Mar 26, 2021
@freekmurze @AdrianMrn
@sebastiandedeyne @willemvb @rocramer @Nielsvanpach @ivoberg
[WIP] v9 (spatie#2098)
74d7767 
* wip

* wip

* wip

* wip

* fix case

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* update javascript docs

* update javascript docs

* wip JS components documentation

* wip javascript components documentation

* wip

* wip

* wip

* Update handling-uploads-with-vue-or-react.md

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* remove translations

* wip

* wip

* wip

* Fix styling

* update props

* improve conversions (spatie#2101)

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* wip

Co-authored-by: freekmurze <[email protected]>

* update

* document maxSizeForPreviewInBytes

* wip

* wip

* Rework frontend docs

* Rework frontend docs

* Restore data code blocks

* wip

* wip

* Update general upload guide

* Words

* Words

* Doc updates

* wip

* Fix styling

* wip

* wip

* wip

* use v9 links

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* v9

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* correct year

* wip

* docs: css installation

* wip

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* docs: update JS UI components

* wip js docs

* wip

* wip

* update validation property name

* update for Vue 3

* updates for Vue 3

* Set height attribute (spatie#2132)

* update naming

* typo

* wip

* reorder sections

* capitalize CSS

* wip

* wip

* wip

* add jsonSerialize to MediaCollection

* update slot usage for Vue 3

* fix getting old values

* Fix styling

* fix last commit

* File namer#1784 (spatie#2114)

* support a custom file namer for responsive images

* Fix styling

* apply code review suggestions

* let conversions use a new file namer class

* add documentation

* cleanup last conversion file namer parts

* apply code review suggestions

* split up conversion & responsive file namer

* remove get prefix on FileNamer methods

* Update naming-generated-files.md

* Update naming-generated-files.md

Co-authored-by: Nielsvanpach <[email protected]>
Co-authored-by: Freek Van der Herten <[email protected]>

* wip

* wip

* update docs with new endpoints

* wip

* wip

* drop laravel 6

* wip

* update vapor config

* wip

* update upload endpoint

* update paths

* allow PHP 8

* wip

* remove notice

* add enable_vapor_uploads option + restructure config file

* wip

* wip

* wip

* find last occurence of starting characters (spatie#2140)

* find last occurence of starting characters

if a filename ends with _, the responsive image will have four underscores in its name. We used to trim at the first occurence, so the collection name starts with an underscore. This way responsive image will not get rendered as expected. Now, we will trim on the last occurence and the collection name will not start with an underscore in this case.

* fix test case

Co-authored-by: Adriaan <[email protected]>
Co-authored-by: freekmurze <[email protected]>
Co-authored-by: Sebastian De Deyne <[email protected]>
Co-authored-by: Willem Van Bockstal <[email protected]>
Co-authored-by: Robin Cramer <[email protected]>
Co-authored-by: AdrianMrn <[email protected]>
Co-authored-by: Niels Vanpachtenbeke <[email protected]>
Co-authored-by: Nielsvanpach <[email protected]>
ivoberg pushed a commit to ivoberg/laravel-medialibrary that referenced this pull request Mar 26, 2021
@freekmurze @AdrianMrn
@sebastiandedeyne @willemvb @rocramer @Nielsvanpach @ivoberg
[WIP] v9 (spatie#2098)
51105d3 
* wip

* wip

* wip

* wip

* fix case

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* update javascript docs

* update javascript docs

* wip JS components documentation

* wip javascript components documentation

* wip

* wip

* wip

* Update handling-uploads-with-vue-or-react.md

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* remove translations

* wip

* wip

* wip

* Fix styling

* update props

* improve conversions (spatie#2101)

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* wip

Co-authored-by: freekmurze <[email protected]>

* update

* document maxSizeForPreviewInBytes

* wip

* wip

* Rework frontend docs

* Rework frontend docs

* Restore data code blocks

* wip

* wip

* Update general upload guide

* Words

* Words

* Doc updates

* wip

* Fix styling

* wip

* wip

* wip

* use v9 links

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* v9

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* correct year

* wip

* docs: css installation

* wip

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* docs: update JS UI components

* wip js docs

* wip

* wip

* update validation property name

* update for Vue 3

* updates for Vue 3

* Set height attribute (spatie#2132)

* update naming

* typo

* wip

* reorder sections

* capitalize CSS

* wip

* wip

* wip

* add jsonSerialize to MediaCollection

* update slot usage for Vue 3

* fix getting old values

* Fix styling

* fix last commit

* File namer#1784 (spatie#2114)

* support a custom file namer for responsive images

* Fix styling

* apply code review suggestions

* let conversions use a new file namer class

* add documentation

* cleanup last conversion file namer parts

* apply code review suggestions

* split up conversion & responsive file namer

* remove get prefix on FileNamer methods

* Update naming-generated-files.md

* Update naming-generated-files.md

Co-authored-by: Nielsvanpach <[email protected]>
Co-authored-by: Freek Van der Herten <[email protected]>

* wip

* wip

* update docs with new endpoints

* wip

* wip

* drop laravel 6

* wip

* update vapor config

* wip

* update upload endpoint

* update paths

* allow PHP 8

* wip

* remove notice

* add enable_vapor_uploads option + restructure config file

* wip

* wip

* wip

* find last occurence of starting characters (spatie#2140)

* find last occurence of starting characters

if a filename ends with _, the responsive image will have four underscores in its name. We used to trim at the first occurence, so the collection name starts with an underscore. This way responsive image will not get rendered as expected. Now, we will trim on the last occurence and the collection name will not start with an underscore in this case.

* fix test case

Co-authored-by: Adriaan <[email protected]>
Co-authored-by: freekmurze <[email protected]>
Co-authored-by: Sebastian De Deyne <[email protected]>
Co-authored-by: Willem Van Bockstal <[email protected]>
Co-authored-by: Robin Cramer <[email protected]>
Co-authored-by: AdrianMrn <[email protected]>
Co-authored-by: Niels Vanpachtenbeke <[email protected]>
Co-authored-by: Nielsvanpach <[email protected]>
ivoberg pushed a commit to ivoberg/laravel-medialibrary that referenced this pull request Mar 26, 2021
@freekmurze @AdrianMrn
@sebastiandedeyne @willemvb @rocramer @Nielsvanpach @ivoberg
[WIP] v9 (spatie#2098)
4ccbf8b 
* wip

* wip

* wip

* wip

* fix case

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* update javascript docs

* update javascript docs

* wip JS components documentation

* wip javascript components documentation

* wip

* wip

* wip

* Update handling-uploads-with-vue-or-react.md

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* remove translations

* wip

* wip

* wip

* Fix styling

* update props

* improve conversions (spatie#2101)

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* Fix styling

* wip

* wip

* wip

* wip

* wip

* wip

* Fix styling

* wip

Co-authored-by: freekmurze <[email protected]>

* update

* document maxSizeForPreviewInBytes

* wip

* wip

* Rework frontend docs

* Rework frontend docs

* Restore data code blocks

* wip

* wip

* Update general upload guide

* Words

* Words

* Doc updates

* wip

* Fix styling

* wip

* wip

* wip

* use v9 links

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* v9

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* correct year

* wip

* docs: css installation

* wip

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* Custom CSS

* docs: update JS UI components

* wip js docs

* wip

* wip

* update validation property name

* update for Vue 3

* updates for Vue 3

* Set height attribute (spatie#2132)

* update naming

* typo

* wip

* reorder sections

* capitalize CSS

* wip

* wip

* wip

* add jsonSerialize to MediaCollection

* update slot usage for Vue 3

* fix getting old values

* Fix styling

* fix last commit

* File namer#1784 (spatie#2114)

* support a custom file namer for responsive images

* Fix styling

* apply code review suggestions

* let conversions use a new file namer class

* add documentation

* cleanup last conversion file namer parts

* apply code review suggestions

* split up conversion & responsive file namer

* remove get prefix on FileNamer methods

* Update naming-generated-files.md

* Update naming-generated-files.md

Co-authored-by: Nielsvanpach <[email protected]>
Co-authored-by: Freek Van der Herten <[email protected]>

* wip

* wip

* update docs with new endpoints

* wip

* wip

* drop laravel 6

* wip

* update vapor config

* wip

* update upload endpoint

* update paths

* allow PHP 8

* wip

* remove notice

* add enable_vapor_uploads option + restructure config file

* wip

* wip

* wip

* find last occurence of starting characters (spatie#2140)

* find last occurence of starting characters

if a filename ends with _, the responsive image will have four underscores in its name. We used to trim at the first occurence, so the collection name starts with an underscore. This way responsive image will not get rendered as expected. Now, we will trim on the last occurence and the collection name will not start with an underscore in this case.

* fix test case

Co-authored-by: Adriaan <[email protected]>
Co-authored-by: freekmurze <[email protected]>
Co-authored-by: Sebastian De Deyne <[email protected]>
Co-authored-by: Willem Van Bockstal <[email protected]>
Co-authored-by: Robin Cramer <[email protected]>
Co-authored-by: AdrianMrn <[email protected]>
Co-authored-by: Niels Vanpachtenbeke <[email protected]>
Co-authored-by: Nielsvanpach <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sebastiandedeyne sebastiandedeyne sebastiandedeyne approved these changes

@willemvb willemvb willemvb approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@rocramer @freekmurze @willemvb @sebastiandedeyne