2 problems with blog insert page

Wappler General How To
#1

Hi guys,

I made a small test blog here:
https://evira.be/blog.php

  1. I used medium editor for editing and inserting the blog, on the insert page, it works fine and renders nice, but on the resulting blog page the html code is not rendered, it is just in the text. I am trying to find a manual, but can not find it. should there be maybe some css added there?
  2. I uploaded and resized pictures that were vertical, on the blog they have become horizontal. How to handle this?

All help welcome.

Bart

#2

fixed nr1 with dynamic attributes, inner html
still question 2 is open.

#3

Hi Bart,

You need to display the data using a dynamic attribute (display > inner HTML). The result will be:
<span dmx-html="tekstblok"></span>
instead of
<span>{{tekstblok}}</span>

I’m not sure about the image problem, but it could be a result of the EXIF data being stripped out. This problem is typically caused by digital cameras/iPhones etc. writing orientation information into the image file EXIF header, rather than actually rotating the image (which requires a lot of processing). If this information is removed or not interpreted by the browser/program, it will appear to be rotated incorrectly.

#4

Thanks Tom,

The picture was made with a cellphone. (Samsung S8)

The original uploaded image remains with same orientation:

raam2_2.jpg2268×4032 3.49 MB

but the image after resize is rotated.

@George I think it is important to look into this.

#5

also in this blog it rotates, but click to see original…

#6

Do you know if the original (before you uploaded it) contained an EXIF header? I could have a look if you send me the image (but I’m not an expert in this area).

Vertical image upload possible bug
#7

There is an “auto orient” option in the image load step, which fixes the issues with images with bad EXIF data - please use it :slight_smile:

#8

Sorry, I didn’t notice the original image was included - as it wasn’t displaying correctly. The issue is the EXIF header, as Teodor has mentioned. However, I’m not sure if the image contains ‘bad’ EXIF data. The original image contains this in file header:

image

… which is the reason it appears ‘correctly’. If you strip this out, it will appear as it was taken.

Teodor: does this feature remove the EXIF data or change it in some way?

#9

auto orient is not fixing the issue

image
image.jpg1108×888 328 KB

#10

raam2_2
raam2_2.jpg2268×4032 3.49 MB

here is original I upload from my device.

#11

I will test with your image locally - please make sure you saved the server action, after enabling this option.

#12

yes, I saved and uploaded before test,
made sure and did it again

#13

I did 1 more test, edited the picture in photoshop and used save for web, in that case there is no rotation problem.

#14

I just tested locally with an upload field and it works as expected.
You should not be saving for web, that is why the auto orient option was added.

Can you zip and send as a private message the action file you are using?

#15

How do I utilise the ‘Add Load Image’ image processor with it’s ‘Auto Orient’ in a simple multi file upload Server Action?

Here are my Action Steps…

image

I am asking this because from a mobile, all the photos taken in portrait mode are ending up on their side when uploaded as shown above.

#16

Hi @UKRiggers,
Add load image step in the repeat stepa and also add save image step after it. Make sure to turn on Overwrite option, to overwrite the originally uploaded.
Both must be before the insert step.

1 Like
#17

@Teodor works perfectly after a little bit of fiddling. with getting paths right etc. Thanks.

1 Like
#18

When I switched the ‘Auto Orient’ on, my action file stopped working. With that option left blank, the action file completed normally. Am I missing a library?