Image Previews on Main Blog Page Not Found

[bld2104]

Hi,

I can't seem to get the preview images to show up on the blog page when I deploy to Heroku: https://www.boxplotanalytics.com/blog/

This works on my localserver, but won't work on the production site. I read the one help article that said to enable serving static files via amazon. I tried adding whitenoise but it just broke my site. Here are my relevant files let me know if I can provide any additional information to help get this solved.

By the way, if you can think of another way to do it (not using the Illustration upload button when creating the blog post) I'm fine with that too. I don't mind storing the files somewhere else I just can't figure out how to connect them to the correct blog posts in the loop.

Thank you,
Barb

settings.py:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
# STATICFILES_DIRS = [
#     os.path.join(PROJECT_ROOT, 'static'),
# ]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIAFILES_DIRS = (MEDIA_ROOT)

urls.py (project level):

urlpatterns = [
    path('admin/', admin.site.urls),
    path('dashboards/', include('dashboards.urls')),
    path('', include('stylesite.urls')),
    path('accounts/', include('accounts.urls')),
    path('accounts/', include('django.contrib.auth.urls')),
    path('newsletter/', include('newsletter.urls')),
    path('blog/', include('zinnia.urls')),
    path('comments/', include('django_comments.urls')),

]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

_entry_detail_base.html:
See this gist.

[bld2104]

Hoping for some help with this, my site looks significantly worse without the pics :) Also, I did get whitenoise successfully installed but the images still aren't appearing.

@Fantomas42 any idea why the images aren't showing up in Heroku?

[bld2104]

I'm making progress, but still hoping for help! I got an S3 bucket set up, and if I manually upload images to the bucket, it works (see the first post on the page, which has an image). However, if I try to click "Illustration" and upload one when making a new entry, it won't save the entry and redirects me to an error page. Any idea why?

[bld2104]

Another update in case this will help people in the future. I found a workaround, but it's a very manual one. Still hoping someone knows a better way to do this, but for now at least my images are appearing.

I removed all Amazon/whitenoise/whatever configurations from settings. In the html file (linked via Gist in my first post) I changed the image line from:
<img src="{{ object.image.url }}" alt="{{ object.image_caption|default:object.title }}" itemprop="contentUrl" />

to

<img src="https://[my-bucket-name].s3.amazonaws.com/media/public/{{ object.image }}" alt="{{ object.image_caption|default:object.title }}" itemprop="contentUrl" />

Then, I upload the image using the Illustration button when creating an entry, but then also have to upload the image manually to Amazon and set it to "Make Public" for it to work.

[pwnpanda]

Second this, I am having the same issue! I am running 'out-of-the-box' Zinnia and images uploaded through the Illustration button does not show up! (Not in preview nor in the post).
My configurations files are available here!
Running:
Python 2.7.12
Django 1.11
Newest version of Zinnia (0.19.1)