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

UHF-8670 Hero image author #1051

Merged
merged 13 commits into from
Sep 24, 2024
Merged

UHF-8670 Hero image author #1051

merged 13 commits into from
Sep 24, 2024

Conversation

khalima
Copy link
Contributor

@khalima khalima commented Sep 20, 2024

UHF-8670

What was done

  • Added figure and figcaption elements to Hero template if the image_author variable is set.
  • Added positioning styles for the Hero image author field.

How to install

  • Make sure your instance is up and running on latest dev branch.
    • git pull origin dev
    • make fresh
  • Update the Helfi Platform config and the HDBT theme
    • composer require drupal/helfi_platform_config:dev-UHF-8670 drupal/hdbt:dev-UHF-8670
  • Run make drush-updb drush-cr

How to test

  • Go to some page with Hero and check that the image author text has appeared. See screenshot below.

    image

  • Check that code follows our standards

Continuous documentation

  • This feature has been documented/the documentation has been updated
  • This change doesn't require updates to the documentation

Translations

  • Translations have been added to .po -files and included in this PR

Other PRs

Copy link

⚠️ Visual regression found! Please check if this change is wanted or accidental. You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt/pull/1051/html_report/

Copy link
Contributor

@Arkkimaagi Arkkimaagi left a comment

Choose a reason for hiding this comment

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

Looks quite good, but I did find some potential issues.

templates/component/hero.twig Outdated Show resolved Hide resolved
}

.hero__image-author {
position: absolute;
Copy link
Contributor

Choose a reason for hiding this comment

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

This position: absolute can be dangerous. What's the maximum limit for photographer field? I mean, it could go bad sideways if there's a long photographer info.
image

// Hero image author styles.
.hero__image-author {
// Arrow element width.
margin-left: 100px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of a comment I'd put this value into a descriptive css variable (custom property) like --arrow-element-width: 100px, so that I could use it both in the regular and in the [dir="rtl"] cases.

… text-align:end doesn't work in our case. The fallback language [dir=ltr] will make the text appear on the 'wrong' side.
Copy link
Contributor

@Arkkimaagi Arkkimaagi left a comment

Choose a reason for hiding this comment

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

Works as it should, Approved! 🌹

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.

2 participants