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

Cloudinary widget shows up in a very small unusable window #335

Open
anxious-coder-lhs opened this issue Aug 17, 2019 · 6 comments
Open

Comments

@anxious-coder-lhs
Copy link

Bug report

What is the current behavior?
The Cloudinary widget when integrated with the defined configuration shows up as a very small window. The behaviour is originating by picking the latest version of this starter package (v1.1.3) and adding the required configuration. Following is the view that appears due to bug.

image

If the current behavior is a bug, please provide the steps to reproduce.
The current behaviour is a bug/conflict of this starter package CSS with that of the Cloudinary Widget package. The steps to reproduce are as follows:

  • Clone this new repo.
  • Create a new Cloudinary account to get a new API key. Documentation for the same is available here.
  • Add/update the following configuration in the admin section of the Netlify CMS.
    media_library: name: cloudinary config: cloud_name: <Add your Cloud Name> api_key: <Add your API Key>
  • Start the gatsby engine and navigate to /admin page.
  • Click on the media page to open up the Cloudinary widget.

What is the expected behavior?
The expected behaviour is that the window shows up with a large height for accessing the widget. The following clip shows what's expected.

image

Other relevant information:
I tried reaching out to various community including CMS Gitter chat and the Cloudinary support and it appears that this issue has not be surfaced out till yet. Upon an initial investigation it appears that the starter package CMS is interfering with the Cloudinary widget iframe. The bulma package of this package introduce a minireset.saas that adds an auto height attribute to the widget which causes the issue. The above working example is displaying by forcefully disabling the attribute.

System:
OS: Linux 5.0 Zorin OS 15
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 8.10.0 - /usr/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 3.5.2 - /usr/bin/npm
Languages:
Python: 2.7.15+ - /usr/bin/python
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0.1
npmGlobalPackages:
gatsby-cli: 2.6.9

@erquhart
Copy link
Contributor

Fairly certain this is due to gatsbyjs/gatsby#15126

Sent with GitHawk

@anxious-coder-lhs
Copy link
Author

I guess so. I changed the starter example site to a different one and it started working. So I guess some CSS's are conflicting certainly.

@erquhart
Copy link
Contributor

Or the other starter doesn't have the latest version of Gatsby. If it does I'd be interested to know which starter.

@anxious-coder-lhs
Copy link
Author

It works with the latest version as well. I am using version 2.13.67 and it works. The starter package is StoryHub

@ZoltanVeres
Copy link
Collaborator

@love2dishtech, the link gives me a 404 http error page

@anxious-coder-lhs
Copy link
Author

Oops, sorry. Please find this. https://redq.io/storyhub but it's a paid theme, you won't be able to see the source, but certainly global css.

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

No branches or pull requests

3 participants