Markdown image location

#1

so I have:

blog.prefix = "blog"
set :relative_links, true
activate :relative_assets
set :images_dir, 'img'

in config file

everything works good: eg, css and so. but images wont.

i have markdown:

![Funny git commit](git_commit.jpg)

I can see pic in /blog/index.html (src="…/img/git_commit.jpg" is correct)
but not able to see in /blog/2014/08/11/my-post.html (src="…/img/git_commit.jpg" is the same, but not correct)

what I do to fix is: <img alt="Funny git commit" src="/img/git_commit.jpg" > but that doesn’t seems right.

you can see it in here: https://github.com/hovancik/hovancik.github.io/blob/f068db4ee91d89537902cd9fc1b5d4510ba0705b/blog/2014/08/11/i-wish-i-was-double-checking-my-commit-messages.html

change to develop branch if you want to see all my config and so.

#2

In /blog/2014/08/11/my-post.html the link src="../img/git_commit.jpg"will point to /blog/2014/08/img/git_commit.jpg

Not sure how to fix this, but here are some things to try:

  • Do not use relative links/assets, if you can manage without

  • Use image_tag

  • “When using RedCarpet, Middleman will handle links and image tags with its own helpers, meaning things like :relative_links and :asset_hash will do what you expect. However, the default Markdown engine is Kramdown because it’s easier to install.” ( http://middlemanapp.com/basics/templates/ )

(This was editied while hovancik wrote his answer below. His answer only refers to the suggestion to not use relative links)

#3

yes, I need. because there is no such a folder /blog/2014/08/img/.

the same like there is no /blog/2014/08/css/ or /blog/2014/08/js/ and middleman uses relatives for css and js files (as any other framework does). the same it should work with images.

imagine you want to reuse some image, you would need to copy it again, or use the way I am using right now and specify full path. that’s not good for sure.

#4

When on Kramdown, Middleman will also use its own helpers and :relative_links work. But in my opinion using :images_dir for storing blog graphics is not a good idea. I use this folder for site-wide graphics only (design elements for template). For blog-content I’m using a separate folder along with blog entries. So in my case its:

source/2014/*.md
source/2014-foto/*.jpg

(next year there will be a new set of 2015 and 2015-foto folders)

My config:

set :css_dir, 'css'
set :js_dir, 'js'
set :images_dir, 'site_images'
set :partials_dir, 'partials'

set :relative_links, true
activate :relative_assets
set :strip_index_file, true

My Markdown source (inside 2014 folder):

![My image description](/2014-foto/image.jpg "My image description")

Middleman HTML output (with relative link):

<img alt="My image description" title="My image description" src="../2014-foto/image.jpg">

This also works with nested image-in-a-link construct required for Lightbox and CSS-styling:

[![My image description](/2014-foto/image.jpg "My image description")](/2014-foto/960px/image.jpg){: data-lightbox="apetyt" data-title="My image description"}
{: .blog_photo}
1 Like
#5

so how does full link to article looks like?

2014/article-name.html ?

because my dir structure is created by middleman. don’t like the idea that one pic will be copied many times: right now, the img tag for that one pic is in like more than 5 files in different locations (3 tags, year,month, day, category,index, page and etc…) with different depth

#6

Yes, exactly. The part of the config for this:

activate :blog do |blog|
  blog.permalink = "{year}/{month}-{day}-{title}.html"
  blog.sources = "{year}/{year}-{month}-{day}-{title}.html"
  }
end

The image files are not copied many times! Relative links are working correctly for Markdown/Kramdown, so the main http://myblog.com/index.html (article previews) links to:

<img src="2014-foto/image.jpg">

The article page http://myblog.com/2014/article.html links to:

<img src="../2014-foto/image.jpg">

I don’t have article images on tags/categories/archive pages, but I have a sidebar with small previews and they are never copied from their /2014-foto/previews/ location, they are always referenced relatively with the proper use of ../ when needed.

#7

oh well, i tried a lot of stuff and the only thing that works for me is either to use < img > with full path or image_tag…

#8

@hovancik, just to be sure – is your middleman-blog copying image files (JPGs) to multiple locations on build? Or generated links are broken? My blog is using:

middleman (3.3.3)
middleman-blog (3.5.3)
kramdown (1.3.3)

I also have

redcarpet (3.1.2)

in my Gemfile.lock but I don’t use it (not enabled in config). Relative links are working as expected, all JPGs are stored once, but just to remind you – I don’t keep them in :images_dir folder but in a separate location, so I reference article images as /my-blog-images-folder-name-here/image.jpg which is referenced as /source/my-blog-images-folder-name-here/image.jpg and built HTML correctly uses relative URLs.

#9

generated links are broken. i tried to put images in blog/img but the same.

#10

No, Middleman does not unless you specifically configure it to. Nor does other frameworks. The normal thing is to use root-relative paths, starting with a ’/’.

Relative paths is only needed in some special cases, for example when you need to browse your site from the file system instead of using a server.

I think the easiest approach to start solving your problems would be to not use relative links, thus eliminating an unneeded complication.

#11

yes, you are right. got confused, i though I have to use relative links. I’ve seen it as solution for this kind of problem (http://stackoverflow.com/questions/23434719/middleman-paths-not-working-on-subdirectory)

anyway, setting to false doesn’t solve it. still images are available only on blog index page if i use markdown syntax. i guess i should just use < img > and that’s it.

#12

But I’m pretty sure that it works correctly in Middleman-blog environment, I’m using it in my wife’s blog. Up and running, no problems, no complications and no hacks on my side. The only suspect is not using the default permalink path {year}/{month}/{day}/{title}.html. I’m using {year}/{month}-{day}-{title}.html both for permalink and sources – maybe this is crucial.

#13

I’m also confident that it works in Middleman. It’s just that it is an unneeded complication and that I think it will be easier for hovancik to sort out his installation without it.

#14

might be, because it works in index page, but when i go deeper in tree it stops (links are the same).

#15

Perhaps you have the directory_index option disabled?

When using directory indexes, calling assets (e.g. image files) by their filename only will fail. They need to be called with their full absolute path, like this:

![Amazing picture](/posts/2013-09-23-some-interesting-post/amazing-image.png)