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

Homepage Posts: Add image shape classes to the front end #473

Merged
merged 1 commit into from
May 12, 2020
Merged

Homepage Posts: Add image shape classes to the front end #473

merged 1 commit into from
May 12, 2020

Conversation

laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

This PR makes sure the 'image shape' classes are actually being output on the front-end of the block (right now they only work in the editor). It also simplifies the classes a bit, from image-shape[shapename] to just is-[shapename], to shorten them, and make them match other class formats.

These classes can be used to change the image aspect ratio a bit with CSS only -- so if someone wanted their landscape images to be 16:9 rather than 4:3 on the front end, they could use CSS like the example in #472 to adjust them.

Closes #472.

How to test the changes in this Pull Request:

  1. Apply the PR and run npm run build.
  2. Add four homepage posts blocks to the editor; one with the default image shape, one with portrait, once with square and one with no crop.
  3. Inspect each and confirm that a class for each shape is output on the main block element, with the wpnbha class.
  4. Publish your page.
  5. Confirm that those classes are also showing up on the homepage.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@laurelfulford laurelfulford changed the title feat: add image shape classes to the front end Homepage Posts: Add image shape classes to the front end May 11, 2020
@jeffersonrabb jeffersonrabb self-requested a review May 11, 2020 22:13
@laurelfulford
Copy link
Contributor Author

Thanks!

@laurelfulford laurelfulford merged commit c90df2e into master May 12, 2020
@laurelfulford laurelfulford deleted the feat/adds-image-shape-class branch May 12, 2020 20:31
matticbot pushed a commit that referenced this pull request May 19, 2020
@semantic-release-bot
chore(release): 1.6.0 [skip ci]
a82108d 
# [1.6.0](v1.5.0...v1.6.0) (2020-05-19)

### Bug Fixes

* decode entities in categories when shown ([#474](#474)) ([5347ba3](5347ba3))
* decode entities in categories when shown in carousel ([#475](#475)) ([20dcfd3](20dcfd3))
* disallow 0 as post to show value ([80db497](80db497))
* initializing swiper for multiple blocks ([#476](#476)) ([f480d54](f480d54))

### Features

* add border style to group block ([#463](#463)) ([1c1f89d](1c1f89d))
* add image shape classes to the front end ([#473](#473)) ([c90df2e](c90df2e))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jeffersonrabb jeffersonrabb jeffersonrabb approved these changes

Assignees
No one assigned
Labels
released [Status] Approved
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Homepage Posts: Add or move image size classes
3 participants
@laurelfulford @matticbot @jeffersonrabb