Gatsby: [gatsby-remark-images] Images cannot be left-aligned

[Jakst]

Description

There is no way to apply style to images so that they are left-aligned. Mainly due to margin-left: auto; maring-right: auto; coming after custom wrapperStyle in inline.

If the image has a title and showCaptions is set to true, the situation is even worse, because the style is applied on a wrapper outside the one applying the centering.

Steps to reproduce

In gatsby-remark-images options, add wrapperStyle: 'margin-left: 0; margin-right: 0;',

Expected result

Images should be left-aligned

Actual result

Image is still centered, because the custom styles get applied before the hardcoded styles.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.9.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.81
    Firefox: 59.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.255 => 1.9.277 
    gatsby-link: ^1.6.41 => 1.6.46 
    gatsby-plugin-catch-links: ^1.0.24 => 1.0.24 
    gatsby-plugin-manifest: ^1.0.27 => 1.0.27 
    gatsby-plugin-offline: ^1.0.18 => 1.0.18 
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48 
    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11 
    gatsby-plugin-typescript: ^1.4.20 => 1.4.20 
    gatsby-remark-autolink-headers: ^1.4.17 => 1.4.19 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^1.5.67 => 1.5.67 
    gatsby-remark-prismjs: ^2.0.2 => 2.0.5 
    gatsby-remark-responsive-iframe: ^1.4.20 => 1.4.20 
    gatsby-remark-smartypants: ^1.4.12 => 1.4.12 
    gatsby-source-filesystem: ^1.5.34 => 1.5.39 
    gatsby-transformer-remark: ^1.7.40 => 1.7.44 

[kakadiadarpan]

Hi @Jakst, would it be possible for you to provide a demo project? This makes your issue much easier to diagnose.

[Jakst]

@kakadiadarpan Sure, here is a sample repo: https://github.com/Jakst/remark-images-left-align

[Jakst]

Notice that the border works perfectly fine, but attempting to reset auto margins makes no difference

[kakadiadarpan]

Hi @Jakst, currently margin-left: auto; maring-right: auto; is hardcoded in the source code. I was able to overcome this issue using !important, and align the image to the left. This is how my config for gatsby-remark-images look:

{
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
              wrapperStyle:
                'border: 5px solid red; margin-left: 0!important; margin-right: 0!important;',
            },
          },

[Jakst]

@kakadiadarpan Right. I tried !important in my global CSS, but never in wrapperStyle. Thanks

But this certainly raises the question: is there any good reason for delivering centered image by default at all? I'm thinking it's a tossup between people wanting centered images and left-aligned images, and the current approach provides very little flexibility.

Wouldn't it be better to just leave the wrapper completely unstyled?

[iljapanic]

For me adding !important in wrapperStyle doesn't work.

I have managed to fix the alignment by adding following to my global CSS:

.gatsby-resp-image-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

Hope it helps to whoever is having the same issue.

[gazpachu]

Hi, using !important to remove the hardcoded styles is not a valid option for me, as it leaves me with little possibilities to style different types of images in my blog posts.

Would it be possible to remove those hardcoded styles? @kakadiadarpan

[chryw]

This closed without a good solution. Is there any plan to remove the style?

[leifniem]

This is still an issue. I understand that it might be necessary for blur-up and SVG placeholders, but i find myself in the position where i only require the srcSet-property to be set and can not get rid of the styling nor the wrapper itself in any way.

[citypaul]

I'm not sure why this issue was closed. Doesn't this comment make the most sense: https://github.com/gatsbyjs/gatsby/issues/7917#issuecomment-421389519

It does seem odd to me that the wrapper provides any styling at all. Surely no styling but the option to add styles is the way to go?

[i-bsd]

This issue needs to be kept open. I'm having the same problem applying alignment styling to images in posts.

[mihaimetal]

<Img imgStyle={{objectPosition: 'left'}} />
This worked for my case.