Images not appearing

[clarknelson]

I'm not entirely sure the process I took to add the guides, but everything should be set up correctly.

{% set foo = craft.assets.filename('index-dashboard.png').one() %}
<img src="{{ foo.url }}"/>
{{ craft.guide.component('image', { asset: foo }) }}

The image shows up fine, it's in my asset folder, but the guide component does not load. Any ideas?

[wbrowar]

Hi Clark, I'm able to view a test asset from the example code you provided, so I'm wondering if it has something to do with the volume settings or something to do with the environment. Can you please answer these questions to help narrow down the issue:

Are you getting any console errors when trying to load this image?

Is the asset volume a local volume or is it connected to external storage (like S3 or Azure blob)?

Are you able to transform the image (something like the code below)?

{% set foo = craft.assets.filename('content-section-types.png').one() %}

{% set transform = { mode: 'fit', format: 'jpg', quality: 90, width: 700 } %}

<img src="{{ foo.getUrl(transform) }}"/>

[darylknight]

I'm getting the same thing. Just installed Guide for the first time, installed the demo templates. The assets are in the Asset Volume I set during setup, but they aren't showing up in the guides.

No console errors. This is in a local environment - Valet, PHP 7.4. Same issue on DigitalOcean/ServerPilot, PHP 7.3.

[wbrowar]

Thanks, Daryl! I think I'll take off the old, JS-based lazy loading setup and switch to the new loading attribute-based method. This will rule out Javascript being the issue here, and I was planning on doing that at some point anyway, so we'll see if that helps here.

[wbrowar]

Hey @clarknelson and @darylknight, would you please try changing your version of guide in your composer file to dev-master and see if that version fixes the issue?

[darylknight]

No change here, sorry!

"wbrowar/guide": "dev-master"

[wbrowar]

Hmm.. would you mind copying the HTML that's generated as you see it in DevTools?

For example, my local test version looks like this (after fixing spacing):

<figure class="guide_c_image">
  <picture>
    <img srcset="http://plugin-guide-dev.test/u/guide/_700xAUTO_fit_center-center_90_none/18/assets-list.jpg 700w, http://plugin-guide-dev.test/u/guide/_1400xAUTO_fit_center-center_90_none/18/assets-list.jpg 1400w" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" loading="lazy" width="2880" height="880" sizes="100vw" alt="">
  </picture>
</figure>

[darylknight]

Yeah - there's actually nothing in there at all:

<div class="c_resize_container c_grid" style="grid-template-columns: 1fr 1fr;">
    <div>
        <p>The first thing you’ll see when logging into Craft’s Control Panel (CP) is the Dashboard. This page is home to helpful widgets that offer information about your website. The Dashboard is customizable for each user, so you may add, remove, and re-arrange the layout of the widgets you find most useful.</p>
    </div>
    <div></div>
</div>

[wbrowar]

Hey @darylknight, I'm still having trouble replicating this issue. If you wouldn't mind, would you please answer the questions I have above for Clark? #26 (comment)

In the mean time, I'm currently testing on PHP 7.3 so I'll try testing on 7.4 to see if there's any difference there.

[darylknight]

Yep - I get a null variable error.

Line 25 in that screenshot is the code that comes from Guide for using an image, then trying to do my own transform on it below that on lines 27-29

EDIT: Ignore everything above, the image didn't exist on my machine. Now that I've re-downloaded the images, using the same code it still renders the page without the image and I'm seeing this:

Second Edit: Ok, so now I've changed the asset volume URL to have public URLs (previously it was set to only have a file system path) I can see the image I'm adding with this:

{% set asset = craft.assets.filename('users-activate.png').one() %}
{% set transform = { mode: 'fit', format: 'jpg', quality: 90, width: 700 } %}
<img src="{{ asset.url(transform) }}"/>

But the default code of

{{ craft.guide.component('image', { asset: craft.assets.filename('users-activate.png').one() }) }}

Still outputs nothing at all:

[wbrowar]

Thanks for doing such a thorough test. I'll keep looking into it and I'll see if there's something going on in that component.

[clarknelson]

Thanks for looking into this, I am experiencing a similar issue where it seems like the macro doesn't run. I have been busy, but I should be able to run my own tests sometime over the next couple days.

[wbrowar]

Quick update: I've updated my testing version of PHP to 7.4 and did a fresh composer install, but I'm still not able to re-create the issue. Next, I can try doing a fresh install of Craft and the dev-master version of Guide and can see if I have any luck. Thanks for your patience so far with this.

[clarknelson]

I created this bug by moving the twig files to another repo. Downloading the assets, but not the templates or creating the guides. Hope this helps you get close, thanks for all the help

[peteeveleigh]

I had this same issue when using the Lite version. I switched to the full version then deleted and reimported the guide templates. The images now show up.
Incidentally I'm using PHP 7.3.1

[wbrowar]

Ah, I completely forgot to ask which edition you are using and now it makes sense (thanks for the comment, @fantasticmachine). The components are a PRO feature and when they’re used in your templates in the LITE edition they don't output anything.

When I was about to release Guide 2, someone talked me out of adding a deprecation error in this situation, but I wonder if it would it be better if instead of a blank output that the components displayed an error in place of the image? What do you think?

If you guys were planning on upgrading to the PRO edition, then you should be fine to leave the component code as-is, but if you plan on using the LITE edition, I would swap them out with something like this:

<img src="{{ craft.assets.filename('content-section-types.png').one() }}"/>

[darylknight]

Yep I'm on the Lite version too. That's fine to put in something else as I expect to hand-code the stuff anyway. That being said, perhaps it's worth either noting somewhere that images don't work from the downloaded guides on the Lite edition to stop this popping up again, or something similar?

[darylknight]

If the root cause of this is that components aren't available to Lite licenses, this can probably be closed - but it is causing confusion with people as the Lite version allows you to download guides which only include Pro features.