Add support for thumbnails using <thumbnail>#881
Merged
Conversation
Contributor
Author
|
Just realized there's a conflict, I'll wait for the PR on vue-strap first |
Chng-Zhi-Xuan
requested changes
May 29, 2019
Contributor
There was a problem hiding this comment.
Most of the review comments is on vue-strap repo, however there are corrections that need to be made here as well:
- Commit titles should not be prefixed with
<thumb>. - Commit titles should be more descriptive (eg. Add thumbnail in "Using Components")
- Author a proposed commit message, summarising the intent / use case for this new feature.
- Use the full component name in commit messages and titles
- Your feature does not warrant a separate test site folder. Authoring a stand-alone
test-thumbnail.mdwithintest_siteis sufficient. - Since the PR on the vue-strap repo is [WIP], this should be as well.
alyip98
changed the title
alyip98
force-pushed
the
876-thumb-vue
branch
2 times, most recently
from
56e82f9 to
d96d627
Compare
alyip98
changed the title
alyip98
changed the title
alyip98
changed the title
Chng-Zhi-Xuan
requested changes
May 30, 2019
Contributor
|
Have to update + review this PR before approval for MarkBind/vue-strap#107 can be given. |
alyip98
force-pushed
the
876-thumb-vue
branch
5 times, most recently
from
5241497 to
9b35644
Compare
Chng-Zhi-Xuan
requested changes
Jun 3, 2019
alyip98
force-pushed
the
876-thumb-vue
branch
3 times, most recently
from
c6b06f8 to
15242a3
Compare
Contributor
|
|
Chng-Zhi-Xuan
requested changes
Jun 3, 2019
To use an image as a thumbnail, we have to crop and rescale the image by wrapping it in a div and using CSS. This can be especially cumbersome with multiple images with different dimensions. Let's add a built in feature that supports convenient creation of thumbnails using a <thumb> tag. It only accepts one dimension attribute `size`, rather than a separate `width` and `height`, and crops the supplied image into a square or optionally a circle with minimal hassle from the author. Let's also extend that feature to also allow the author to supply text, icons or emojis in place of an image.
alyip98
force-pushed
the
876-thumb-vue
branch
3 times, most recently
from
8c090a2 to
3e24b99
Compare
| <thumbnail text="blue" border='1px solid black' font-color="#669" circle /> | ||
| <thumbnail text="maroon" border='1px solid black' font-color="maroon" font-size="25" circle /> | ||
|
|
||
| {{test}} |
Contributor
There was a problem hiding this comment.
What is this {{test}} variable used for?
Contributor
Author
There was a problem hiding this comment.
I probably added it very early on when testing something else and forgot about it, will remove
Chng-Zhi-Xuan
changed the title
Chng-Zhi-Xuan
approved these changes
Jun 4, 2019
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Resolves #876
Related PR on vue-strap:
MarkBind/vue-strap/pull#107
What is the rationale for this request?
What changes did you make? (Give an overview)
Added a new Vue component that allows authors to create thumbnails using images easily. Tests and user documentation included.
Is there anything you'd like reviewers to focus on?
Testing instructions:
The components section in the user guide contains a demo of the feature.
Proposed commit message: (wrap lines at 72 characters)
To use an image as a thumbnail, we have to crop and rescale the image
by wrapping it in a div and using CSS. This can be especially
cumbersome with multiple images with different dimensions.
Let's add a built in feature that supports convenient creation of
thumbnails using a tag. It only accepts one dimension attribute
size, rather than a separatewidthandheight, and crops thesupplied image into a square or optionally a circle with minimal
hassle from the author.
Let's also extend that feature to also allow the author to supply text,
icons or emojis in place of an image.