Linux permissions - still confusing

Despite the helpful troubleshooting page, I’m still having issues with my website permissions. Currently my website “works” and all permissions are for the www-data user, but images are not showing up. Some more info:

  • All files are in /home/grav/www/html/.
  • There is a grav user, who is a member of the staff group (no sudo permissions).
  • There is a sudo user, call him sam, who is also part of staff.
  • www-data is also part of staff.
  • I use Nginx, and the output of ps aux | grep -v root | grep nginx | cut -d\ -f1 | sort | uniq is gobs and www-data.
  • I have followed both suggestions regarding the image cache.

Specifically this image is not appearing

I have also delete the images folder in the root directory. This did not help.

@gobs, To me it looks more like an incorrect src attribute of the image and not a matter of permissions.

This is img tag being used:

<img src="Artwork.jpg" ... >

The page’s url is https://gobs.brussels/linktree/fsml, which is interpreted by the browser as:

  • current folder: linktree
  • page: fsml(.html)

The src of the image being requested points at the relative location Artwork.jpg. The browser tries to find it in the current folder, which is linktree. However, file https://gobs.brussels/linktree/Artwork.jpg does not exist. It throws an 404 error (Not found) and not a 403 (Forbidden).

An image named ‘Artwork.jpg’ can however be found at location https://gobs.brussels/linktree/fsml/Artwork.jpg. The following img tag will be able to find that image:

<img src="fsml/Artwork.jpg" ... >

Would you mind sharing the relevant Twig code with which the page is created, or the relevant Markdown of the page?

1 Like

I can’t believe that it was that simple - I feel so stupid.

The reason this happened was because I was directly writing HTML (see below) so I could centre text.

Thank you for taking the time to help me with this! I can sleep easy at night again :smiley:

And thanks for the tip on looking at the error, that will definitely be helpful in the future.

<center>

​

   <a href="https://gobs.brussels/linktree/fsml"

      style="text-decoration:none">

      <img src="fsml/Artwork.jpg"

         alt="Funk Saved My Life Artwork"

         style="width: 35%; min-width:300px">

   </a>

​

<br><br>

​

    <p>Beatport exclusive from 13th of January 2022. <br> All other platforms on the 28th of January 2022.</p>

    

    <hr width="25%">

    <h1>Previews</h1>

   <hr width="25%">

    

    <a href="https://soundcloud.com/gobsaudio/sets/the-funk-saved-my-life"

      style="text-decoration:none">

      <img

         src="https://upload.wikimedia.org/wikipedia/fr/thumb/b/bb/SoundCloud_logo.png/1200px-SoundCloud_logo.png"

         alt="Soundcloud Previews"

         width="200">

   </a>

    

</center>

@gobs, Not sure why you are writing HTML inside Markdown, but that’s another topic…

It’s not possible to centre text in Markdown - right?

@gobs, True, but…

  • element <center> is already deprecated and might already have been removed by some browsers. Currently, according to caniuse, only 47% of users use browsers supporting it.
  • <center> is a block-level element and Markdown inside block-level elements are not being parsed. That’s probably why all of your content is written in pure HTML.
  • There are alternatives:
    • Plugin Shortcode-Core offers a way to center a block using:

      [center]
      Markdown
      [/center]
      

      All Mardown inside the [center]...[/center] will be parsed correctly.

    • Your non-blog pages seem to have commonalities:

      • The content is centered
      • The page starts with a link containing an image

      This means that the Twig template for these pages could be adapted to:

      • wrap the content in a div which centers its content
      • create the link with the image on top of content, with data derived from frontmatter of page
      {% block content %}
        <div class="centered">
           <a href="{{ page.header.link.url }}">
             {{ page.media[page.header.link.image].html(page.header.link.alt)|raw }}
           </a>
      
           {{ page.content|raw }}
        </div>
      {% endblock %}
      

Note (as much as possible):

  • Content in Markdown
  • Layout in Twig
  • Styling in css

Disclaimer: Of course, not knowing your situation, not all of above might be entirely feasible for your use case. Do what suits you best…

Thanks for the tips! For now I’m just happy that this works (more or less), I will try improving as per your suggestions when I find the time.