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

refactor: replace <img> tags #119

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

refactor: replace <img> tags #119

wants to merge 1 commit into from

Conversation

anantJjain
Copy link
Contributor

Fixes: #116

  • Through this commit I try to change the custom img tags with Image component from next/image to optimize images.
  • Previously height="auto" and width="auto" were the attributes being used with the img tag which are now replaced with width={ } and height={ } pixel values as per the Next.js Image component conventions.
  • Used tailwind media queries(responsive modifiers) to fit the images into different viewport sizes(specially smaller ones).
  • Also added the corresponding domains in the next.config.js file for the images being fetched from external urls.

@vercel Vercel
Copy link

vercel bot commented Feb 26, 2024

@anantJjain is attempting to deploy a commit to the elixir-cloud-aai Team on Vercel.

A member of the Team first needs to authorize it.

@vercel Vercel
Copy link

vercel bot commented Feb 28, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
landing-page ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 28, 2024 11:02am

@uniqueg uniqueg changed the title fix: image-tag refactor: replace <img> tags Feb 29, 2024
@uniqueg uniqueg requested review from JaeAeich and SalihuDickson and removed request for omarY23 and valens200 February 29, 2024 23:32
@JaeAeich
Copy link

JaeAeich commented Mar 6, 2024

Hey @anantJjain where are you getting these numbers from in height and width??

@anantJjain
Copy link
Contributor Author

anantJjain commented Mar 6, 2024 •
edited
Loading

Hi @JaeAeich, I tested them for various viewport sizes to ensure responsiveness since next Image component don't accept "auto" values

@anantJjain
Copy link
Contributor Author

Hi @JaeAeich ,continuing on our previous discussion,would you suggest any other fix for this ?

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

@anuragxxd anuragxxd Awaiting requested review from anuragxxd

@JaeAeich JaeAeich Awaiting requested review from JaeAeich

@SalihuDickson SalihuDickson Awaiting requested review from SalihuDickson

At least 1 approving review is required to merge this pull request.

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

Successfully merging this pull request may close these issues.

refactor: replace <img> tags
2 participants
@anantJjain @JaeAeich