Post images in blog posts are not displayed (wrong path)

So, those routes are the correct routes for the images; however, you may not have a library installed that is needed to show those images.

The images on the blog layout are using the Glide Library to do on-demand image manipulation. This way you could easily create an image of 100x100px and cache that image.

Can you enable debug mode and open that image in a new tab and see what error message you receive and I can help you troubleshoot it further from there :)

Thanks.

How do I enable debug mode? I have this in my .env file:

APP_DEBUG=true APP_LOG_LEVEL=debug

is my debug mode enabled and where do I check the debug log? this? /storage/logs/laravel.log?

or I should check my server's website error/access logs?

If you've enabled debug mode you should be able to right-click one of the broken images and then say 'Open in New Tab' that new page will show the error message.

Additionally, if you wanted to share your URL here I can help investigate this issue further :)

Thanks.

I'm just getting a 404 not found error. I guess this has something to do with my nginx server configuration. I have followed all laravel's guide to config this nginx setup. For example pretty urls are working ok.

Have you tested GeekShop on nginx server?

Sorry, website is not publicly available yet. I'm working on a remote server by changing my local hosts records. If you want I can email you IP address for DNS.

I've read Glide library uses GD library or imagick, I have checked with my php.ini and php info, and both of them are installed and enabled on my server.

Yeah, that's strange. I've tested this on Homestead which uses Nginx and it was working just fine on my end.

Were you able to get an error message by right clicking on the image and showing in new tab. Let me know :)

Thanks.

There is no any laravel debug error message. There is just plain 404 not found browser error. I've made website public. can you please check what's wrong.

Awesome, thanks for getting it up on a server. So, I found this article: url, which it looks like someone else was having this issue with nginx and the glide library. If you scroll down to the bottom it looks like someone posted a solution to this which was to add the following nginx rules in your nginx config:

# Pass request to Laravel if static image can not be found
location ~ ^/(img|photos)/ {
  location ~* \.(?:jpg|jpeg|gif|png)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";

    try_files $uri $uri/ /index.php?$query_string;
  }
}

If you could add that to your nginx config and restart nginx, I think that might resolve it :)

But if it does not can you go ahead and send me a message with your server info and I can login and try and help you further.

Thanks!

Hi, thank you so much for a great support, but this did not help :(

Also, I cannot share the server info... my company prohibits this practice.

I was Googling this issue, but could not find anything related to nginx and this Glide library. I'm not demanding anything, to be honest I'm really thankful for your amazing support, but if you will find solution to this problem in near future, please let me know.

Ok, we can just bypass using those dynamic image processig URL's. As a solution I can provide you with some updated files. So if you are using the white theme. You will want to replace the contents of resources/views/themes/white/posts/browse.blade.php with:

@extends('themes.white.layouts.app')

@section('content')

<div id="blog" class="container">
    <div class="row">
        <div class="col-md-8">
        	<div class="post_list">
                @foreach($posts as $post)
                	<section>
                        <div class="thumbnail">
                            <a href="{{ $post->link() }}" rel="bookmark" title="{{ $post->title }}" style="background:url('{{ Voyager::image($post->image) }}'); display:block; width:150px; height:150px; background-position:center center; background-size:cover;">
                            </a>
                        </div>
                        <div class="post_details">
                            <h3><a href="{{ $post->link() }}" rel="bookmark" title="{{ $post->title }}">{{ $post->title }}</a></h3>
                            <time datetime="{{ $post->created_at }}">{{ date('F j, Y', strtotime($post->created_at)) }}</time>
                            <div class="excerpt">
                                {{ $post->excerpt }}
                            </div>
                        </div>
                    </section>
                @endforeach
        	</div>
            <div id="pagination-container">
                {{ $posts->links() }}
            </div>
        </div>
        <div class="col-md-4 sidebar">
            <?= setting('sidebar_ad ') ?>
            <h4>Latest Products</h4>
            @foreach($products as $product)
                <a href="/product/{{ $product->slug }}" target="_blank">
                    <img src="{{ Voyager::image($product->image) }}?w=325&h=150&fit=crop-center&dpr=2" width="100%" height="auto">
                    <span>{{ $product->title }}</span>
                </a>
            @endforeach
        </div>
    </div>
    <div style="clear:both"></div>
</div>

@endsection

Then, you will want to replace resources/views/themes/white/posts/read.blade.php with this:

@extends('themes.white.layouts.app')

@section('content')

<div id="post" class="container">
    <div class="row">
        <div class="col-md-8">
        	<div class="post_body">
        		<h1>{{ $post->title }}</h1>
                <time datetime="{{ $post->created_at }}">Posted on {{ date('F j, Y', strtotime($post->created_at)) }}</time>
        		<img id="post_image" src="{{ Voyager::image($post->image) }}" style="width:100%; height:auto;" alt="{{ $post->title }}">
        		@include('themes.white.includes.social_share', ['share_title' => $post->title, 'share_image' => Voyager::image($post->image)])
                <?= $post->body ?>
        	</div>
            @include('themes.white.includes.comments', ['slug_id' => $post->slug])

        </div>
        <div class="col-md-4 sidebar">
            <?= setting('sidebar_ad ') ?>
            <h4>Other Posts You May Like</h4>
            @foreach($random_posts as $random_post)
                <a href="/blog/{{ $random_post->slug }}">
                    <img src="{{ Voyager::image($random_post->image) }}" width="100%" height="auto">
                    <span>{{ $random_post->title }}</span>
                </a>
            @endforeach
        </div>
    </div>
    <div style="clear:both"></div>
</div>

@endsection

And your images will now show :)

Let me know if that helps. Thanks.

Hi Admin,

Thank you so much!! Now everything works!