Images in partial footer file are broken in nested directory

#1

I created a nested directory one level deep and now the images in my _footer.erb file are broken. Is there a helper that can fix this so I won’t have to hard code the path?

Thank you.

#3

OK, so it worked until I ran middleman build and now all image links are broken if not at the root level of the site.

I have these settings in my config file but images are still broken. Any thoughts?

set :relative_links, true
activate :relative_assets

Thank you.

#4

Can you post the offending _footer.erb ?

#5

@scottelundgren Thank you for taking a look. It actually breaks 3 levels in, which is obvious based on how I have the link set currently while messing with it, but as a shared footer, the ideal way is it to have it relative to root no matter what level its on. Thank you again.

<div class="col-md-3 col-sm-6 inner">
                <h4>Featured Event</h4>
                <figure>
                    <div class="icon-overlay icn-link">
                        <img class="lazyOwl" src="../assets/img/trailers/wildwood/wildwood003.jpg" alt="Star RV Rentals California">
                    </div>
                    <figcaption>
                        <p>We can put a description here of event happening now, i.e. Balloon Festival Del Mar Fair etc....</p>
                        <a href="" class="btn">View Event Page</a>
                    </figcaption>
                </figure>
            </div><!-- /.col -->
#6

I had the same problem. the way to solve for me was to use < img > tag with full path

#7

Assuming _footer.erb is in in source/partials/_footer.erb and config.rb has set :images_dir, 'assets/img' what is the URL that middeman outputs for images in the footer? (ie: can you post the url in img src tag that doesn’t work ?)

Is it only the footer that’s broken not all images? It’d be help to see a fragment of a template is working source & output to be able to understand the whole site and how the footer is different that it would break.

#8

@hovancik I’ve done that before but not sure how to put full path when developing on local server.

#9

@scottelundgren Here is a link to root directory of site being built http://starrvrentals.com/newsite/ where footer image is working (I know, not an event pic…used for placement) and here is the 3rd level in http://starrvrentals.com/newsite/delivered/events/del_mar_fair/ where the footer image is broken.

Thank you.

#10

middleman’s root is at your /source so that’s the /.

if your image is let’s say /source/img/one.jpg then it would make <img scr="/img/one.jpg">

#11

@hovancik Thank you. That partly works, but doesn’t seem consistent three levels deep…maybe I should not have nested pages past 2…probably a better practice, but it is a hindrance. I’ll keep messing with it as I just started another project and will be experimenting. Once I find a rock solid solution, I will post what I’ve come up with. Thank you again for your time; I truly appreciate it.

#12

I use my solution for my blog and it works fine for me. Can be hosting problem as well. I host my blog at github pages and it is part of problem for me.

#13

You’re doing too much work. Since you’re including footers from one level of depth into nested pages of multiple and various levels of depth let Middleman manage the asset paths for you.

In _footer.erb change

to

<%= image_tag 'trailers/wildwood/wildwood003.jpg', :alt => 'Star RV Rentals California', :class => 'lazyOwl' %>
#14

@scottelundgren Dude, I keep learning something new everytime I fire up a new MM app. I have been trying to wrap my head around the purpose of writing the img tags that way becasue I have always done it the other way, but your explaination along with correcting my code turned the light bulb on…unfortunatly now I am thinking of the three projects I have in MM that I have to refractor…you know, OCD and all…

Thank you. Have a great weekend.

#15

@scottelundgren Just wanted to let you know that I used what you showed above and it’s working like a charm (of course)…I feel like I hit the lottery…so easy.

Thanks again.

1 Like