XF 2.2 Abstract file system and display image url

[AndrewSimm]

I have an articles add-on that I am using with @digitalpoint Cloudflare add-on. Thus far my add-on correctly uploads the article image file to R2 without any change of code. Where I am stuck is how to display the image in the template. Below is my php code. Any insight on how to display this correctly in my template so the URL is correct?

    $abstractedPath = \XF::app()->config('externalDataPath');
        $abstractedThumbPath = \XF::app()->config('externalDataPath');
        $upload = $this->request->getFile('image', false);

        if($upload)
        {
            $abstractedPath .= '://articles/'. $thread_id . '/' . $upload->getFileName();
            \XF\Util\File::copyFileToAbstractedPath($upload->getTempFile(), $abstractedPath);

            //Upload articles image
            $tempFile = $upload->getTempFile();
            $image = \XF::app()->imageManager()->imageFromFile($tempFile);
            if($image->getheight() / $image->getwidth() > 0.75)
            {
                throw $this->exception($this->error(\XF::phrase('andrew_articles_image_ratio_not_supported')));
            }
            $maxWidth = $this->options()->andrewArticlesImageWidth;
            $image->resize($maxWidth, $maxHeight = null);
            $image->save($tempFile, $format = null, $quality = null);
            \XF\Util\File::copyFileToAbstractedPath($tempFile, $abstractedPath);

            //Create thumbnail that displays in profile
            $abstractedThumbPath .= '://articles/'. $thread_id . '/' . '/thumb-' . $upload->getFileName();
            $maxWidth = $this->options()->andrewArticlesImageThumbWidth;
            $image->resizeAndCrop($maxWidth, $maxHeight = null);
            $image->save($tempFile, $format = null, $quality = null);
            \XF\Util\File::copyFileToAbstractedPath($tempFile, $abstractedThumbPath);

            //Save files
            $save->image_url = $thread_id . '/' . $upload->getFileName();
            $save->thumb_url = $thread_id . '/thumb-' . $upload->getFileName();

            unlink($tempFile);

 

[digitalpoint]

Is it just an issue with generating the HTML in a template for the URL of the image?

Does each article have just one possible image?

Does each article require an image (would there be a case where it didn't have one)?

 

[AndrewSimm]

Is it just an issue with generating the HTML in a template for the URL of the image?

Does each article have just one possible image?

Does each article require an image (would there be a case where it didn't have one)?

Every article requires an image and it is uploaded when the article is promoted.

It is the article image I display on my main page. Currently I modified the template to always start with https://data.canesinsight.com but I know that isn't the right answer.

CanesInSight

www.canesinsight.com

 

[digitalpoint]

For sake of making an example, let's say the file in your data area is, /articles/123/filename.jpg.

If you are doing it purely in templates and not in a PHP method, $xf.app.config.externalDataUrl is the template variable you are looking for (that variable defaults to "data").

So if you prefix the URL you are making with $xf.app.config.externalDataUrl, and are using the default local file system adapter, the URL would be: data/articles/123/filename.jpg... In the case of R2 (or whatever else you want to use), it also works because that variable is going to be https://data.canesinsight.com. So either way, you end up with the correct URL regardless of filesystem being used:

Relative URL works for default setup:

data/articles/123/filename.jpg

... and it also works for R2 (and any others coded properly):

https://data.canesinsight.com/articles/123/filename.jpg

 

[AndrewSimm]

For sake of making an example, let's say the file in your data area is, /articles/123/filename.jpg.

If you are doing it purely in templates and not in a PHP method, $xf.app.config.externalDataUrl is the template variable you are looking for (that variable defaults to "data").

So if you prefix the URL you are making with $xf.app.config.externalDataUrl, and are using the default local file system adapter, the URL would be: data/articles/123/filename.jpg... In the case of R2 (or whatever else you want to use), it also works because that variable is going to be https://data.canesinsight.com. So either way, you end up with the correct URL regardless of filesystem being used:

Relative URL works for default setup:

data/articles/123/filename.jpg

... and it also works for R2 (and any others coded properly):

https://data.canesinsight.com/articles/123/filename.jpg

So when I use the word data disappears but isn't replaced with https://data.canesinsight.com/

<div class="article-image" style="background: url('data/articles/{$article.image_url}') center center / cover no-repeat;">

 

[digitalpoint]

Assuming it's a "standard" template and the $xf variable is available (it normally is), this should do it:

<div class="article-image" style="background: url('{$xf.app.config.externalDataUrl}/articles/{$article.image_url}') center center / cover no-repeat;">

 

[AndrewSimm]

Assuming it's a "standard" template and the $xf variable is available (it normally is), this should do it:

<div class="article-image" style="background: url('{$xf.app.config.externalDataUrl}/articles/{$article.image_url}') center center / cover no-repeat;">

Oh wow, that is it! Works on in my prod template (using R2) and my localhost.

Thanks @digitalpoint!

 

[digitalpoint]

Yep, that’s the magic variable you are looking for. Like I said, will work with default local filesystem adapter and will work with any other properly coded filesystem adapter that XenForo can use.