Acorn Service Provider usage in blade template to load image path

sage
,
1

I created a service provider with wp acorn make:provider PatternsServiceProvider to add a helper to add an image to a pattern with a cover image similar to how WooCommerce seems to do it. So now I have wp-content/themes/cafejp/app/Providers/PatternsServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use App\Helpers\PatternsHelper;

class PatternsServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        $this->app->singleton('patternshelper', function () {
            return new PatternsHelper();
        });
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        //
    }
}

I also registered the provider in wp-content/themes/cafejp/config/app.php using

<?php

return [

    'providers' => [
        // Other service providers
        App\Providers\PatternsServiceProvider::class,
    ],

    // Other configurations...

];

loading this helper wp-content/themes/cafejp/app/Helpers/PatternsHelper.php

<?php

namespace App\Helpers;

class PatternsHelper
{
    public function get_image_url($image_name)
    {
        // Assuming images are stored in the `resources/images` directory.
        return get_template_directory_uri() . '/resources/images/' . $image_name;
    }
}

But how can I now load the image in wp-content/themes/cafejp/resources/views/block-patterns/drinks.blade.php:

@inject('patternsHelper', 'patternshelper')
<!-- wp:cover {"url":"<?php echo esc_url( App\Helpers\PatternsHelper::get_image_url('2402_3200_matthieu-joannon-6cilddtotgm-unsplash.webp') ); ?>","dimRatio":0,"overlayColor":"black","isUserOverlayColor":true,"isDark":false,"metadata":{"categories":["fandb"],"patternName":"cafejp/drinks","name":"Drinks Menu"},"align":"full","className":"cafejp-drinks-menu-pattern"} -->
<div class="wp-block-cover alignfull is-light cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="https://cafejpcoen.test/wp-content/uploads/2024/07/2402_3200_matthieu-joannon-6cilddtotgm-unsplash.webp" style="object-position:53% 46%" data-object-fit="cover" data-object-position="53% 46%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"6xl"} -->
<h2 class="wp-block-heading has-white-color has-text-color has-link-color has-6-xl-font-size">Drinks</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->
...

It seems things do not load properly as I get errors that the method is not static . But I thought things should load in just fine.

2

In the end I used a View Composer using wp acorn make:composer PatternsComposer and now have wp-content/themes/cafejp/app/View/Composers/PatternsComposer.php with

<?php

namespace App\View\Composers;

use Roots\Acorn\View\Composer;
use App\Helpers\PatternsHelper;

class PatternsComposer extends Composer
{
    /**
     * List of views served by this composer.
     *
     * @var string[]
     */
    protected static $views = [
        'block-patterns.drinks', // This corresponds to wp-content/themes/cafejp/resources/views/block-patterns/drinks.blade.php
    ];

    /**
     * Bind data to the view.
     *
     * @param  array  $data
     * @return array
     */
    public function with()
    {
        return [
            'imageUrl' => $this->getImageUrl(),
        ];
    }

    /**
     * Get the image URL from the PatternsHelper.
     *
     * @return string
     */
    protected function getImageUrl()
    {
        $patternsHelper = app(PatternsHelper::class);
        return $patternsHelper->get_image_url('matthieu-joannon-6ciLddToTgM-unsplash.jpg');
    }
}

and still wp-content/themes/cafejp/app/Helpers/PatternsHelper.php with

<?php

namespace App\Helpers;

class PatternsHelper
{
    public function get_image_url($image_name)
    {
        // Assuming images are stored in the `resources/images` directory.
        return get_template_directory_uri() . '/resources/images/' . $image_name;
    }
}

so now I can load the image wp-content/themes/cafejp/resources/images/matthieu-joannon-6ciLddToTgM-unsplash.jpg
and updated pattern wp-content/themes/cafejp/resources/views/block-patterns/drinks.blade.php:

<!-- wp:cover {"url":"{{ esc_url($imageUrl) }}","id":293,"dimRatio":0,"overlayColor":"black","isUserOverlayColor":true,"focalPoint":{"x":0.53,"y":0.46},"isDark":false,"metadata":{"categories":["fandb"],"patternName":"cafejp/drinks","name":"Drinks Menu"},"align":"full","className":"cafejp-drinks-menu-pattern"} -->
<div class="wp-block-cover alignfull is-light cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="{{ esc_url($imageUrl) }}" style="object-position:53% 46%" data-object-fit="cover" data-object-position="53% 46%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
...

to load the url with {{ esc_url($imageUrl) }} and that seems to work.

Update Using Sage built in @asset directory:<img src="@asset('images/example.jpg')"> should work just as well too reading Compiling Assets | Sage Docs | Roots but the path to image becomes wp-content/themes/cafejp/public/images/matthieu-joannon-6ciLddToTgM-unsplash.59ec12.jpg instead . Not sure why I did not think about that.