Consistent blog image links across multiple URLs

#1

Hi there,

It seems like there are a lot of image-related issues people are having, and everyone wants to configure things differently, so everyone seems to have their own specific requirements. I wasn’t able to find anything that applied to my case, so my apologies if I’m just missing something and duplicating content.

Here’s what I’m trying to do.

I’ve got a blog set up using the middleman-blog extension. The URL structure of that blog is (intended to be) as follows:

  • Homepage: /
  • Article: /year/mm/article-title/
  • Pages: /page/n/
  • Images: /year/mm/article-title/image.jpg

Before building, I’m storing all images and articles as follows:
/content/post_title.md
/content/post_title/image.jpg

I’m specifying my images in markdown as follows:
[pic]: post_title/image.jpg “Image”

The result I’m seeing is that on the actual direct link to the article page, the image shows correctly, but on any other pages, the links point to the following invalid URL:
/img/post_title/image.jpg

What I want is for all links to become absolute links to the same location (in /year/mm/article_title/) throughout the site.

I suppose I could use the helper from this thread: Full image URLs in generated site – which would require me to convert all my URLs to the format /year/mm/article_title/image.jpg and just prefix the appropriate hostname depending on whether I’m in development mode or in production.

But that seems like an awfully wonky way to make something that feels like it should be a pretty basic scenario work. Is there something I’m missing here? What is the expected way to achieve this?

To be clear, I’m not enabling any sort of relative links or assets in my config.rb.

Thanks in advance!

#2

For what it’s worth, I ultimately gave up and used the workaround I mentioned. Still not thrilled but at least it’s now working.

#3

I just visited forum after many days, sorry for digging this out. First: check your config.rb for :images_dir variable. Your /img prefix is probably from this. I assume you have your blog.permalink and blog.sources variables set accordingly to required file structure. Are your image links constructed as described in the Article subdirectory section of the blogging-extension docs?

#4

They were until I implemented the workaround as I described.

Here’s an actual example of what it is now: https://bitbucket.org/elepsis/arcadiydotorg/src/6084fea3b83e8e7c7a6b09ac2e8864ca6a92dea5/source/content/2012-12-adding-the-delicious-bookmarklet-to-opera.html.md.erb?at=master

Here’s what it was before I implemented the workaround:
https://bitbucket.org/elepsis/arcadiydotorg/raw/e2e8f7a0982fae570bf38cd8462f79db13226cac/source/content/2012-12-adding-the-delicious-bookmarklet-to-opera.html.md

Yes, the /img prefix is from my config.rb, but I would have expected that the image link in a blog would actually follow the blog article-specific URL generation rules regarding of where that article appears, not just blindly generate one under /img.

#5

Yes, and it should, if you follow the docs:

Wrong: [My Photo](photo.jpg)
Right: [My Photo](2011-10-18-middleman/photo.jpg)

Unfortunately I cannot confirm it, because my blog has a separate photos folder, which I access via an absolute path:

[My Photo](/photo-folder/photo.jpg)

And it works OK, not using the :images_dir variable, which is set to site_images and contains design-related files only.

#6

Thanks for the help. Unfortunately in my case that doesn’t seem to be the case, and as far as I can tell I’ve followed the documentation exactly in the sample post I linked.

I’m not following how the path is absolute in your example. What is the URL for your actual posts?

#7

my config.rb relevant fragments:

activate :blog do |blog|
  blog.permalink = "{year}/{month}-{day}-{title}.html"
  blog.sources = "{year}/{year}-{month}-{day}-{title}.html"
  blog.taglink = "tagi/{tag}.html"
  blog.tag_template = "tag.html"
  blog.year_template = "calendar.html"
  blog.page_link = "strona{num}"

  # Custom collection
  blog.custom_collections = {
    category: {
      link: '/kategorie/{category}.html',
      template: '/category.html'
    }
  }
end

set :css_dir, 'css'
set :js_dir, 'js'
set :images_dir, 'site_images' # in my blog this is used for common design images only, not for blog post images
set :partials_dir, 'partials'

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

My source tree structure:

  • source/
  • source/2014/
  • source/2014/2014-11-10-this-post-title.md
  • source/2014/2014-11-11-another-post-title.md
  • source/2014/…
  • source/2014-foto/
  • source/2014-foto/RK1411_7D_4922.jpg
  • source/2014-foto/RK1411_7D_4926.jpg
  • source/2014-foto/…

And post’s relevant fragment:

Simplified example:
![A photo](/2014-foto/RK1411_7D_4926.jpg "Title")
Which means the URL is from the site’s root.

Actual link from the real blog, with styling, link to Lightbox variant, etc:
[![Fotografia bezglutenowego ciasta czekoladowego z gruszkami](/2014-foto/RK1411_7D_4926.jpg "Bezglutenowe ciasto czekoladowe z gruszkami"){: .retina.lazy.w630}](/2014-foto/960px/RK1411_7D_4926.jpg){: data-lightbox="apetyt" data-title="Bezglutenowe ciasto czekoladowe z gruszkami"}
{: .blog_photo}

Generated HTML of the real thing, with relative links, as per config:

<p class="blog_photo">
  <a data-lightbox="apetyt" data-title="Bezglutenowe ciasto czekoladowe z gruszkami" href="../2014-foto/960px/RK1411_7D_4926.jpg">
    <img alt="Fotografia bezglutenowego ciasta czekoladowego z gruszkami" title="Bezglutenowe ciasto czekoladowe z gruszkami" class="retina lazy w630" src="../2014-foto/RK1411_7D_4926.jpg" />
  </a>
</p>
#8

The important idea is to understand, that URLs used in the source (those in ERB, HAML, MD, …) are based on source structure, which means it follows the source directory tree, can be relative (to page/post) or absolute (to source), etc. Generated URLs (those in HTML) are based on the config – if you enable :relative_links and/or :relative_assets then all generated URLs will be relative, otherwise they will start with \.