[j4] Template/article images don't render

crystalenka commented 3 years ago

Steps to reproduce the issue

Create a new social image template in J4 with a new template image of your choice.
Set it to include an image (article intro or full text).
Visit a page on the front end using this template.

Expected result

An OG image should have generated using the images selected.

Actual result

Neither image renders, leaving the background as full black.

System information

Mandatory information

Joomla! version: 4.0.2 PHP version: 8.0.9 Server Operating System: Linux The URL to the page where you are having a problem: https://www.whatt.eu/en/blogs-podcasts/blog-1 as reported by @woluweb Are you using GD, Imagick or don't know?: GD Imagick and GD versions as reported by phpinfo() on your site: GD 2.2.5

Good to have information

N/A

Additional comments

Initially reported by @woluweb.

woluweb commented 3 years ago

Txs Crystal for this very precise description. Nothing urgent, note. But I'll be happy to help and test the next version :)

nikosdion commented 2 years ago

I cannot reproduce this. Joomla 4, PHP 8.0 and GD library work together just fine. My version of GD is 2.3.3. I don't have a server with an older version.

I used the Cassiopeia sample images for article intro and full text images and the PNGs we ship as the overlay image. I also tried a PNG overlay image I've created myself and it would still render just fine.

If you see all black it means that GD failed to load the images correctly. This may be an incompatibility between your server's GD version and the images you are using.

woluweb commented 2 years ago

Hi Nicholas, Txs a lot for the follow-up.

I think there is something else at hand here.

I created a new test page here: https://www.whatt.eu/en/social-magick

Actually if I use the original "cutout" profile having plugins/system/socialmagick/images/cutout.png it works fine (ie no black image).

If I edit that "cutout" profile in order to select a duplicate of cutout.png which I have put in the /images folder, then (in J4) the url of that image is the following in Social Magick plugin: images/cutout.png#joomlaImage://local-images/cutout.png?width=1200&height=640 and I get a black image.

Then I played directly with the database: I searched for images\/cutout.png#joomlaImage:\/\/local-images\/cutout.png?width=1200&height=640 and replaced by my own personal image images\/opengraph.png

and now

no black image any more
and my image opengraph/png is used on https://www.whatt.eu/en/social-magick for the first time ever

So I guess that the extra parameters added by J4 when selecting an image are the cause of that black image issue. At least that the is conclusion we can draw from my little experimentation above.

FYI, I have also made another test:

this is another website with Social Magick, but running J3: https://salussanguinis.be/maladies
I have just changed the PHP version to 8.0 (with same GD version as the J4 website above) Here everything works fine (text, my png for the cutout, the article full image for the background).

For the rest, but that is another issue, I don't understand why

the wrong text is taken on the og-image
and why it changes at (almost) every refresh
- sometimes my name
- sometimes another author's name (the author of the article mentioned hereafter)
- sometimes "The windmills on the banks of the Brussels canal" which is the Title of https://www.whatt.eu/en/quotes/the-windmills-on-the-banks-of-the-brussels-canal, which is an article in a Latest Article Module on Position "Right"

nikosdion commented 2 years ago

Thank you! This is actually very useful.

Joomla normally inserts images from the media selection field as images/assets/example.png?width=1200&height=640. If you have multiple locations set up in the Local Filesystem plugin you instead get something like images/assets/example.png#joomlaImage://local-images/assets/example.png?width=1200&height=640

We were looking for the question mark, not the hash sign. So in this particular use case the cleaned up image would be images/assets/example.png#joomlaImage://local-images/assets/example.png instead of images/assets/example.png causing this problem.

I have now changed this to use HTMLHelper::cleanImageURL which handles all of that automatically. If not, it'd be a Joomla bug.

About the other issue, it's already fixed: https://github.com/lucid-fox/social-magick/commit/1826dd70963251e01f506ddd7a9e1cf6ff3c99da

woluweb commented 2 years ago

Happy I could somehow help :)

I have just checked my "FileSystem - Local" plugin: I only have "images" (and I don't think I have never modified that ever bc I only discovered the existence of this possibility very recently, following a Facebook question. That's a handy feature of the plugin btw, being able to either modify or add folders for the Media Manager)

Sorry, I had missed the fact that the other issue was solved (probably bc I am still using the 1.0.0.b4 which is the latest official release, while the fix was done a few days after).

lucid-fox / social-magick