Make the hero image smaller staying responsive and center position

🔧 Integrations 🔧 Next.js
#1

Hiya,

I am customizing for the “Next.js i18n blog” repository.

But I am not able to make the image smaller[1]. Also, I rounded the image on the home by editing cover-image.js2 but it is not effective on the post. Would you please help me to find where I should fix ?

[1]: imges of home and post.

スクリーンショット 2022-02-15 5.11.24
スクリーンショット 2022-02-15 5.11.241920×484 143 KB 

import { Image } from 'react-datocms'
import cn from 'classnames'
import Link from 'next/link'
import { useRouter } from "next/router";


export default function CoverImage({ title, responsiveImage, slug }) {
  const router = useRouter();
  console.log(router)
  console.log(router.pathname)
  const image = (
    <Image
      data={{
        ...responsiveImage,
        alt: `Cover Image for ${title}`,
      }}
      className={cn('shadow-small', {
        'rounded-3xl hover:shadow-medium transition-shadow duration-200': slug,
      })}
    />
  )
  return (
    <div className="rounded-3xl -mx-5 sm:mx-0">
      {slug ? (
        <Link as={`/posts/${slug}`} href="/posts/[slug]">
          <a aria-label={title}>{image}</a>
        </Link>
      ) : (
        image
      )}
    </div>

  )
}
1 Like
#2

Hello @JJ

You can edit how the image looks by adding CSS styles to your image.
You can create a CSS file, import it, and use it by specifying a class on the <Image> component through the className attribute.
You can read a bit more on how to do this here: Adding a Stylesheet | Create React App
For the rounded corners you can use border-radius and for the size you can alter the width and height.

#3

Hi @JJ

I found that with the DatoCMS image component you have to apply sizing to the inner actual img element (also applies to other image wrapping components like <ReactSVG>). The className on applies to the outer container.

With classic className Tailwind you cannot do that component-local. You have to declare a global class for the image (where you can then use @apply with img element), import the CSS file in _app and apply this global class to className of the <Image> of DatoCMS. (as @m.finamor wrote)

But you also can

  1. Use CSS Modules (Basic Features: Built-in CSS Support | Next.js). You would then need a cover-image.module.css alongside the cover-image.js component

  2. Use Tailwind with a CSS-in-JS framework via twin.macro. I prefer that option as I like to have components with 100% locality independent of external assets., I use it with Stitches, There you have a tw and css prop and can do something like this:

const image = (
  <Image
    data={{
      ...responsiveImage,
      alt: `Cover Image for ${title}`,
    }}
    //Tailwind classes for outer responsive image container element
    tw="rounded-3xl"
    css={{
      img: {
         // what you want apply directly to the inner img element. 
        ...slug ? tw`rounded-3xl hover:shadow-medium transition-shadow duration-200` : {},
      },
    }}
  />
);

So it’s essentially doing an @apply scoped to a React component subtree. I needed this capability tons of times, This is the most common styling issue with Tailwind and such external components I believe.

A great article that brought me on this path is this: Why I Love Tailwind. There is some learning curve with this but it really will pay off.

1 Like