michelson/dante2

Images not displayed

Closed this issue · 12 comments

NicolasDrapier commented

Hi there,

Following this issue, I followed the doc and used it with my cloud service (Cloudinary). The image is well uploaded, and I recover well the url that updates in the block as you can see.

image

Unfortunately, when I save the content and display it on another page with <Dante content={my_content}/ retrieved from the database, everything is displayed except the images.

My code :

const Editor = () => {
  return <Dante
    body_placeholder={'Try to write'}
    onChange={editor => { myEditor = editor }}
    widgets={[
      ImageBlockConfig({
        options: {
          upload_url: "my_special_url_that_works_well",
          upload_callback: (ctx, img) => {
            alert('file uploaded: ' +
              ctx.data.url)
          },
          upload_error_callback: (ctx,
            img) => {
            console.log(ctx)
          },
        },
      }),
    ]} />;
};

Need some help?

Thank you very much.

michelson commented

Hi Nicholas, what happens when you inspect the block on chrome dev tools? is the image tag shown ?
what happens on react dev tools ? did the block get the proper props ?

NicolasDrapier commented

Hi !
Thank you for your answer !

First, when I upload an image using the widget, it prints an alert with the URL as expeted. And if I check my cloud service, the image is uploaded.

If I display the content:
image

And the console log of blocks:
image

In my cloud service:
image

And the block props with the react dev tools :
image

I can't see what looks wrong :(
Nicolas

michelson commented
NicolasDrapier commented

In the src property of image, I replace my cloud bucket with "mycloud" before paste it

<div data-contents="true">
   <h1 class="graf graf--h2 is-selected" data-block="true" data-editor="3in64" data-offset-key="ar27o-0-0">
      <div data-offset-key="ar27o-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="ar27o-0-0"><span data-text="true">This is a test for images</span></span></div>
   </h1>
   <figure class="graf graf--figure  " data-block="true" data-editor="3in64" data-offset-key="3qajd-0-0" contenteditable="false">
      <div>
         <div class="aspectRatioPlaceholder is-locked">
            <div class="aspect-ratio-fill"></div>
            <img src="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg" class="graf-image" contenteditable="false" alt="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg">
            <div></div>
         </div>
         <figcaption class="imageCaption">
            <div data-offset-key="3qajd-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="3qajd-0-0"><span data-text="true">This is the image caption</span></span></div>
         </figcaption>
      </div>
   </figure>
</div>

If I paste just the tag generated in a new html file , the image is shown:
image

Is it a bug in my project ?

EDIT:
If I wrap the image inside the div, it does not work. Is the css broke for me ?

<div class="aspectRatioPlaceholder is-locked">
            <img src="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg"
                class="graf-image" contenteditable="false"
                alt="http://res.cloudinary.com/mycloud/image/upload/v1601197005/grlencrfccjmyzeuhulj.jpg">
        </div>

EDIT 2:
aspectRatioPlaceholder alone works, is-locked alone works, but both does not work.

michelson commented

thing is, there is an aspect ratio div that should have a height value: like this:

image

the block must have this state :

image

which version of dante2 are you using ?

NicolasDrapier commented

I'm using Dante2 v0.5.0-rc9

michelson commented

ok, try 0.5.0-rc26 , let me know how it goes

NicolasDrapier commented

It still doesn't work :(
When I hovered my mouse on the image link, it displayed this
image

I think the 0px is the problem

michelson commented

do you have some link where I can see your implementation ?

NicolasDrapier commented

My repo is private, is it ok if I add you temporarily as a collaborator ?

michelson commented

sure , no problem

NicolasDrapier commented

Hum after reflexion that's not a good idea. I have som config files with passwords :|

But here is my implementation

Content admin page:

const Editor = () => {
  return <Dante
    body_placeholder={'Start typing'}
    onChange={editor => { myEditor = editor }}
    widgets={[
      ImageBlockConfig({
        options: {
          upload_url: "myurl",
          upload_callback: (ctx, img) => {
            alert('file uploaded: ' +
              ctx.data.url)
          },
          upload_error_callback: (ctx,
            img) => {
            console.log(ctx)
          },
        },
      }),
    ]} />;
};

Print page

const Focus_Editor = () => {
    //Get route param
    const id = FlowRouter.getParam('_id');
    //Search document in mongodb
    const doc = Focus.find({ '_id': id }).fetch();

    if (typeof doc !== 'undefined' && doc.length > 0) {
        return <Dante content={doc[0].content} read_only={true} />;
    }
    return null;
};