search

TylerBarnes / gatsby-wordpress-inline-images

Fluid images for gatsby-source-wordpress inline images in post_content
57 stars 25 forks source link

Some settings stopped working in v1 #4

Open fsgreco opened 5 years ago

fsgreco commented 5 years ago

Unfortunately after the upgrade the images are all at 1024. I set "maxWidth: 550," but the plugin is still showing images at max size.

This is my code inside gatsby-config.js

    {
    resolve: `gatsby-source-wordpress`,
    options: {
        baseUrl: `URL`,
        protocol: "https",
        hostingWPCOM: false,
        useACF: true,
        verboseOutput: false,
        plugins: [
            {
                resolve: `gatsby-wordpress-inline-images`,
                options: {
                    baseUrl: `URL`,
                    protocol: `https`,
                    quality: 90,
                    maxWidth: 550,
                    tracedSVG: true,
                }
            }],
        excludedRoutes: [
            "/wp/v2/users", "/wp/v2/users/me", "/acf/v2/options", "/wp/v2/settings", "/yoast/v1/configurator", "/yoast/v1/reindex_posts", "/yoast/v1/statistics", "/yoast/v1/ryte"
        ],
    }
},
fsgreco commented 5 years ago

I think that the problem derives from the fix that you have done in the responsive styles. Now my max width is setted as inline style with 1024 by default, instead of 650px, and seems that the srcset sizes are not working. (I have a main layout with css grid with a max-width of 1000px, but now the images max-width are messing with the main layout)

cseebach-tpc commented 5 years ago

@anonimoconiglio Not a great workaround, but are you okay doing a selective !important in your stylesheet until this gets fixed or adjusted?

fsgreco commented 5 years ago

@cseebach-tpc Thanks, it works although the main layout remains compromised for the mobile version: I think that since the width 1024 is inserted through an inline-style (inside the html structure) it extends the dimension of the main div (It's like there is still a div inside that tells the browser that it will take 1024px, and maybe since it's inline style it wins most of the css specificity?).

With your solution the image will be rendered at 650 and worked fine for the desktop, but it will not stretch when going mobile. Besides, I just realized that it's not centered any more (In the wordpress version I get the image centered on the html content, now it starts at left).

This is the grid structure of my site (it's a simple main and sidebar website) 

main {
  max-width: 1068px; /* 960 + 6rem (make up for padding) */
  margin: 0 auto;
  padding: 1.45rem 1rem 1.45rem;

  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
}

/* TEMPORAL FIX FOR IMAGES-INLINE-CSS */
main div.gatsby-image-wrapper {
    max-width: 650px !important; 
    margin: 0 auto; 
}

Anyway, for the moment I just don't updated the package (I'm still using the alpha, that worked fine for me).

TylerBarnes commented 5 years ago

v1.0.1--beta.2 should fix this problem. Let me know if you're still having issues after updating.

fsgreco commented 5 years ago

v1.0.1--beta.2 should fix this problem. Let me know if you're still having issues after updating.

Hi, thanks for the answer. Unfortunately the issue is still there :( My repo is private but is there a way to share it with you?

Anyway this is the result on the html:

immagine

and this are the packages installed in the project (aka my package.json): 

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@emotion/core": "^10.0.10",
    "@emotion/styled": "^10.0.10",
    "core-js": "^2.6.5",
    "formik": "^1.5.2",
    "gatsby": "^2.3.25",
    "gatsby-image": "^2.0.39",
    "gatsby-plugin-emotion": "^4.0.6",
    "gatsby-plugin-google-analytics": "^2.0.18",
    "gatsby-plugin-htaccess": "^1.1.1",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-netlify": "^2.0.14",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-robots-txt": "^1.4.0",
    "gatsby-plugin-sharp": "^2.0.35",
    "gatsby-plugin-sitemap": "^2.0.12",
    "gatsby-source-filesystem": "^2.0.29",
    "gatsby-source-wordpress": "^3.0.54",
    "gatsby-transformer-sharp": "^2.1.18",
    "gatsby-wordpress-inline-images": "1.0.1--beta.2",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-burger-menu": "^2.6.8",
    "react-dates": "^20.1.0",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-with-direction": "^1.3.0"
  },
  "devDependencies": {
    "prettier": "^1.17.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

PS: I also realize now that neither the blurring up feature is on (should I set this on the config?)

TylerBarnes commented 5 years ago

Ok my bad! haha.. I'm used to this repo not having a build process. I was editing the compiled file by accident. Just tested beta.2 on a new install and saw it wasn't working, then moved my changes to the right file and tried installing from npm again and it's working as expected. Apologies for that blunder.

I'm confident 1.0.1--beta.4 fixes the issue!

fsgreco commented 5 years ago

Ok my bad! haha.. I'm used to this repo not having a build process. I was editing the compiled file by accident. Just tested beta.2 on a new install and saw it wasn't working, then moved my changes to the right file and tried installing from npm again and it's working as expected. Apologies for that blunder.

I'm confident 1.0.1--beta.4 fixes the issue!

It works! Thanks :)

I usually do a "radical" clean when testing, something like

rm -rf node_modules && rm package-lock.json && rm -rf .cache

after that I do npm install and then test :D

PS: just a note: maxWidth works, but neither blurring up feature, nor tracedSVG (or quality settings) seems to work. Besides, the image is still positioned on the left and not centered any more (as with the Alpha), but maybe I could open a new issue for this, since it seems off topic.

TylerBarnes commented 5 years ago

Hmmm yeah probably a couple other things need to be tweaked then. I think we can keep this issue open for settings that stopped working after v1. I'll rename it

fsgreco commented 5 years ago

Perfect.

This is what I mean with centered images.

This is the image on the Wordpress post. As you can see there is an "aligncenter" class that has margin: 5px auto; that centers the image:

wordpress-image-example

With the Alpha this rule was "respected" (with a margin-left and margin-right set to "auto"):

alpha-image-example

It seems that they are missing on the new version:

immagine

TylerBarnes commented 5 years ago

Cool, thanks for the detailed description and screenshots! I think I know what's going on.

fsgreco commented 5 years ago

Other issues founded:

Blurring up: it's like the blurred image (its actually a little version of the image) has opacity: 0 from the beginning. Maybe it should have opacity: 1 and then switch to 0 I guess (?)

tracedSVG and quality options, don't know why but they don't work when I set them on options.

Cool, thanks for the detailed description and screenshots! I think I know what's going on.

Thanks to you! Unfortunately still don't get too much javascript, nor don't know how to do a pull request so I can only help with bug reports :(

TylerBarnes commented 5 years ago

No worries, your bug report contribution is appreciated. I didn't do enough QA on the PR for v1. I'll go over all the options and test all of them out and get it all working. Once that works it should be good!

fsgreco commented 5 years ago

Hi, sorry for bothering, are there any updates with this plugin? Just let me now if you have some new beta and need a beta tester :+1:

killua99 commented 4 years ago

Hi,

idk if this issue still relevant but I found figcaption be on top on the image without any other rather than apply !important to styles to unchain the padding-bottom that a top sibling element has.

Any option to edit the layout or gatsby image take control of it and throw the best layout possible for it ? I'm working with plain images from WordPress gutenberg elements.

TylerBarnes commented 4 years ago

Hi all, I'm currently doing a full major version rewrite of gatsby-source-wordpress to use WPGraphQL instead of the REST api. This feature will be part of the core source plugin. For that reason I wont be supporting this extension as I'm putting all my time/effort into the official source plugin.

killua99 commented 4 years ago

That's reasonable. I found myself using this plugin along with source wordpress and graphql to fully support multilingual and others resources from WordPress.

The Gatsby-source-wordpress will handle Gutenberg block as individuals?