Problem adding an image to an Elements blog?

Hi all,

I’ve successfully set up a CMS blog in my existing Elements project (v2.1.1) following advice from this forum — thank you! I have a blog.php page with a Collection component, and a post.php template page with a Single Post/Item component. Posts are displaying correctly with title, date, author and body text.

However, I cannot get images to display in my posts. I’ve tried the following without success:

1. Markdown image syntax in the post body:

![Alison McGrath](https://www.campsiecoaching.com/images/ filename.jpg)

2. Plain HTML in the post body:

3. Image defined in YAML frontmatter:

image:

src: images/alison-mcgrath.jpg

alt: Alison McGrath

A few things I’ve confirmed:

- The body component on my post.php page is a Typography component (not Text)

- The image URL is valid and accessible in a browser

- The YAML frontmatter is correctly formatted with opening and closing —

- The Item component on post.php is connected to cms/posts

The image simply doesn’t appear in any of these cases. Is there something specific about how the post.php template needs to be configured to display images? Am I missing a component or a setting somewhere?

Thanks in advance!

If you share your project via Elements cloud we can take a look for you help get it all fixed up :slight_smile:

This might help. Here is what it looks like in my CMS files

Here is an example of embedding a left-aligned and top-aligned image hosted on an external warehouse server. Christ 2R Culture - Blog

THanks. I’ve uploaded the project which is called FINAL VERSION 11/03/26 and is at https://www.campsiecoaching.com I thought I had the blog sorted, but have found some issues with what shows on the Blog and Post pages,

Issue 1: Post template page won’t publish
My post template page (index.php, inside a /post/ folder) shows a white cloud with a cross in the sidebar and never publishes to the server. I’ve tried:

  • Renaming from post.php to index.php
  • Deleting all files from the post folder in Cyberduck and republishing
  • Using Publish All from the File menu
    The page simply never appears on the server. When I visit campsiecoaching.com/post/ I get a 403 Forbidden error.

Issue 2: Blog index showing full post content
My blog index page (index.php inside a /blog/ folder) is showing the complete post content instead of just the title and excerpt. The Body component on the blog page is a Typography component showing {{excerpt|truncate(240)}} on the canvas — identical to the Microblog template — but the full post content displays instead of a truncated excerpt.

Setup summary:

  • blog/index.php has a Collection component with Folder set to posts and Page set to post (the post template page)
  • post/index.php has a Single Post/Item component with Source set to cms/posts
  • PHP 8.4 is enabled on my 123-Reg hosting

That is the do not publish icon. Click to make it publishable. SHould just show a cloud with nothing on it.

Hi Dan,

Thank you so much for offering to take a look! I’ve been doing some more work on the blog but am still struggling. I’ve uploaded the updated project to Elements Cloud — it’s called ‘Campsie Coaching 25/3/26’ and can be downloaded here: elementsapp://downloadDocument/VAwa5RRrdEp6

The site is at https://www.campsiecoaching.com

To summarise the issues I’m currently experiencing:

  1. Images not displaying in blog posts — I’ve tried Markdown syntax, plain HTML, and YAML frontmatter, but nothing works. The body component is a Typography component.

  2. Post template page won’t publish — the Post page shows a white cloud with a cross (Steve mentions this is the ‘do not publish’ icon — I’ll check that). When I visit campsiecoaching.com/post/ I get a 403 Forbidden error.

  3. Blog index showing no posts — After rebuilding the blog page fresh with a new Collection component (rather than copying from the Microblog template, which didn’t work reliably), the Collection component is in the published PHP file but the item template inside it is empty, so no posts display.

  4. Full post content showing — Previously when posts were showing, they displayed the full content rather than a truncated excerpt, even though the Body component showed {{excerpt|truncate(240)}} on the canvas.

I’ve been working on this for a while and would really appreciate your help getting it all sorted!

Thanks again,
Alison

You haven’t actually referenced any CMS items in your Collection. You point to the items you want visible, like so:

Your Container is empty.

As for images, my preferred way to do it for a blog is to add them to resources and then point to the resource in the YAML frontmatter, like so:

image:
src: /images/news/bythom-provia.png
alt: Fujifilm Provia 100F

So when I added those things to your site, your blog worked just fine.

1 Like