Elevator Enhance Problems

Elevator Enhance How to Problem

Video link to trello

Trello summary: empty

Problems: How to

For describing problems and correct behaviour,
we must report

Default WP, Default Image Elevator:

1. HTML
2. the WordPress visual editor. for connecting media with post

Our Enhancement:
In addition we  3. and 4.

3. Our Quick toolbar for media

4. WordPress visual Editor: Media linked (after clicking on new button)

Point3 Quick Toolbar With New Button

. - Click to enlarge

Needed HTML

First part is the HTML from a working change.

• HREF
• SRC
• Caption
• Size

Needed HTML

. - Click to enlarge

Visual editor

Second the visual editor behind the image from working version

• Link to: Media File (not in HTML),
  this information is stored into wp_postmeta table as attachment meta information.
• Link to URL
• Custom Size: is not part of our code. It is a wordpress default functionality.

Visual Editor

. - Click to enlarge

Enhance caption

Elevator Enhance caption (dot)

Video link to trello

Trello summary: empty

WordPress Default Behavior

with our server

Add Media

HTML Part

• Caption: Empty
• HREF: Set to the image
• SRC: Set to the image

Real functionality:

When the media is uploaded, it goes trough many different processes.

1. The media is uploaded in temp folder on the server called /tmp

2. Then the media is checked for viruses or wrong filename.

3. After that the media is resized or renamed, if needed. Any other changes are applied here.

4. Then it is uploaded on the server into folder wp-content/uploads/current/date/. On this step the WP is creating a rows into the db with the image information like name, upload date and file name. Additionally here is putting meta information of the image like image size.

5. Then the backend upload process is ready. After that it is shown the visual editor.

Visual Editor part:

After the backend upload is finished, the visual editor is shown.

There we can fill up other default wordpress fields or our custom own. All this information is stored into wp_postmeta as meta information about the image.

Depends on the fileds, the html code is changed. The important fields, which change the code are:

– URL

– Title

– Caption

– ALT Text

– Alignment (not shown on the screen)

– Size (not shown on the screen)

– Media file (not shown on the screen)

And when you click on the button called “Insert into page” a javascript code is appending the generated html from the fields into the html of the page.

Example of output html:

<a href=”https://doc.e-llusion.org/wp-content/uploads/2018/03/Image-Enhancer-Broken-Images-After-Rename.png”><img class=”wp-image-69142″ src=”https://doc.e-llusion.org/wp-content/uploads/2018/03/Image-Enhancer-Broken-Images-After-Rename.png” alt=”M25c Image Enhancer Broken Images After Rename” width=”583″ height=”255″ /></a> .

Visual Editor Part

. - Click to enlarge

• Media File and not None
• Should we set Caption to . by default?

Image Elevator Default Behavior

HTML

Visual Editor

Custom Link

Image Elevator changes only

• Changes only SRC
• But not the HREF

Image Elevator + Our Enhancement

HTML Part

Actions: Copy Paste Image
Image Elevator with our enhancement:

• Caption missing
• HREF missing

Expected Behavior:

• Caption is Set to .
• HREF is set to image

By default the Image Elevator just upload the image without any parameters.

HTML Part

. - Click to enlarge

Visual Editor

Visual Editor part:

• Full Size correct: at the moment of upload must be Full Size
• Link to: None, did we change the code? –>  No, we didn’t
  
• Caption still empty

Visual Editor

. - Click to enlarge

Problems with new Image Elevator Enhanced

Image Enhancer Broken Images After Rename

Image Enhancer Broken Images After Rename

Problem: Image Enhancer Broken Images After Rename

- Click to enlarge

Enhance URL Test

Elevator Enhance URL Test

Video link to trello

Trello summary: empty

Video showing the problem

Video Link to Trello

Trello Summary: Empty