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

Image Captions #199

Merged
merged 5 commits into from
Oct 25, 2023
Merged

Image Captions #199

merged 5 commits into from
Oct 25, 2023

Conversation

dnbute
Copy link

@dnbute dnbute commented Oct 24, 2023

Please always provide the GitHub issue(s) your PR is for, as well as test URLs where your change can be observed (before and after):

Fixes #196

Changelog

  • Made auto image captions not be italic
  • Changed said caption color
  • Changed muted text color to match captions

Test URLs:

@aem-code-sync
Copy link

aem-code-sync bot commented Oct 24, 2023

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

  • Re-run PSI Checks

@aem-code-sync

This comment was marked as outdated.

@github-actions

This comment was marked as outdated.

@aem-code-sync
Copy link

aem-code-sync bot commented Oct 24, 2023

Page Scores Audits Google
/about/history PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@github-actions
Copy link

🔸 4 visual differences detected

  • /career/yuya-yoshisue (main vs branch)
    109753 pixels (ratio 0.02 of all image pixels) are different.
  • /about/history (main vs branch)
    Expected an image 1280px by 14103px, received 1280px by 14124px. 447200 pixels (ratio 0.03 of all image pixels) are different.
  • /sidekick/blocks/columns (main vs branch)
    Expected an image 1280px by 8841px, received 1280px by 8840px.
  • /sidekick/blocks/carousel (main vs branch)
    104382 pixels (ratio 0.06 of all image pixels) are different.

The diff images are attached in the artifact

@aem-code-sync
Copy link

aem-code-sync bot commented Oct 24, 2023

Page Scores Audits Google
/about/history PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@github-actions
Copy link

🔸 5 visual differences detected

  • /career/yuya-yoshisue (main vs branch)
    106269 pixels (ratio 0.02 of all image pixels) are different.
  • / (main vs branch)
    371173 pixels (ratio 0.08 of all image pixels) are different.
  • /about/history (main vs branch)
    Expected an image 1280px by 14103px, received 1280px by 14124px. 452057 pixels (ratio 0.03 of all image pixels) are different.
  • /sidekick/blocks/columns (main vs branch)
    Expected an image 1280px by 8841px, received 1280px by 8840px.
  • /sidekick/blocks/carousel (main vs branch)
    102284 pixels (ratio 0.06 of all image pixels) are different.

The diff images are attached in the artifact

@aem-code-sync
Copy link

aem-code-sync bot commented Oct 24, 2023

Page Scores Audits Google
/about/business-performance PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/about/history PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@aem-code-sync
Copy link

aem-code-sync bot commented Oct 24, 2023

Page Scores Audits Google
/about/business-performance PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/about/history PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@github-actions
Copy link

🔸 5 visual differences detected

  • /career/yuya-yoshisue (main vs branch)
    102536 pixels (ratio 0.02 of all image pixels) are different.
  • / (main vs branch)
    290157 pixels (ratio 0.06 of all image pixels) are different.
  • /about/history (main vs branch)
    Expected an image 1280px by 14103px, received 1280px by 14124px. 452057 pixels (ratio 0.03 of all image pixels) are different.
  • /sidekick/blocks/columns (main vs branch)
    Expected an image 1280px by 8841px, received 1280px by 8840px.
  • /sidekick/blocks/carousel (main vs branch)
    108076 pixels (ratio 0.06 of all image pixels) are different.

The diff images are attached in the artifact

@dnbute dnbute requested a review from ehrro October 24, 2023 11:51
@dnbute
Copy link
Author

dnbute commented Oct 24, 2023

@ehrro I also took the liberty of changing the muted text block color to match the captions, you can take a look at the business performance page to check that as well (FY 2020 for example, under the 2 piecharts)
Thanks!

@@ -150,7 +150,11 @@ export function splitChildDiv(div, from, to) {
}

function buildImageCollageForPicture(picture, caption, buildBlockFunction) {
const newBlock = buildBlockFunction('image-collage', { elems: [picture, caption] });
const captionText = caption.textContent;

Choose a reason for hiding this comment

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

Should you use innerHTML here instead of textContent to retain any HTML tags inside it.

Copy link
Author

@dnbute dnbute Oct 25, 2023

Choose a reason for hiding this comment

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

Well I want to get rid of the <em> tag so the captions aren't italic anymore, so i just need the actual text

@aem-code-sync
Copy link

aem-code-sync bot commented Oct 25, 2023

Page Scores Audits Google
/about/business-performance PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/about/history PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@github-actions
Copy link

🔸 2 visual differences detected

  • /about/history (main vs branch)
    Expected an image 1280px by 14103px, received 1280px by 14124px. 452057 pixels (ratio 0.03 of all image pixels) are different.
  • /sidekick/blocks/columns (main vs branch)
    Expected an image 1280px by 8841px, received 1280px by 8840px.

The diff images are attached in the artifact

@dnbute dnbute merged commit ddff0cd into main Oct 25, 2023
4 checks passed
@dnbute dnbute deleted the i-196 branch October 25, 2023 09:07
@sdmcraft sdmcraft added this to the Milestone-6 milestone Oct 26, 2023
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.

About > History > Captions
3 participants