Site generation duplicates baseurl for img when baseurl not empty

[dolfs]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

The problem manifest itself when baseurl in the _config.yml is defined as something other than empty.
This problem affects all markdown where an <img> tag is generated. Whatever the src attributed contains, it gets the baseurl prepended twice.

This seems to happen because a final step in rendering is to pull things through the refactoring code. For <img> tags, this then results in the subsequent code in refactoring ultimately calling

{% include media-url src=<baseurl>/assets/images/Flag.png> %}

This shows that the baseurl was already applied before it got to this point. The include prepends it again.

Steps To Reproduce

1. Define baseurl as "my_site" in _config.yml
2. In any .md file include (thec second variation to show this problem has nothing to do with the jekyll_picture_tag plugin):

Picture plugin: {% picture "Flag.png" --alt Flag %}

MD Image full path: ![Test]({% link /assets/images/Flag.png %})

3. Observe output (formatted for clarity):

<p>
	Picture plugin:
	<picture>
		<source srcset="/my_site/assets/images_gen/Flag-400-dd43f229f.webp 400w, /my_site/assets/images_gen/Flag-600-dd43f229f.webp 600w, /my_site/assets/images_gen/Flag-800-dd43f229f.webp 800w, /my_site/assets/images_gen/Flag-1000-dd43f229f.webp 1000w, /my_site/assets/images_gen/Flag-1600-dd43f229f.webp 1600w" type="image/webp" />
		<source srcset="/my_site/assets/images_gen/Flag-400-a5c1e79ca.png 400w, /my_site/assets/images_gen/Flag-600-a5c1e79ca.png 600w, /my_site/assets/images_gen/Flag-800-a5c1e79ca.png 800w, /my_site/assets/images_gen/Flag-1000-a5c1e79ca.png 1000w, /my_site/assets/images_gen/Flag-1600-a5c1e79ca.png 1600w" type="image/png" />
		<a href="/my_site/my_site/assets/images_gen/Flag-800-a5c1e79ca.png" class="popup img-link shimmer">
			<img src="/my_site/my_site/assets/images_gen/Flag-800-a5c1e79ca.png" alt="Flag" loading="lazy">
		</a>
		</picture> 
</p>
<p>
	MD Image full path:
	<a href="/my_site/my_site/assets/images/Flag.png" class="popup img-link shimmer">
		<img src="/my_site/my_site/assets/images/Flag.png" alt="Test" loading="lazy">
	</a> 
</p>

4. Notice that in both cases the <img> tag was surrounded by an <a> during refactoring (fine), and the src attribute in the tag now has the baseurl value in there twice. Tags like <source> which also contain image paths are unaffected by the refactoring code, and consequently are correct.

Expected Behavior

Do not double up on the baseurl

Environment

• Ruby:
• Jekyll:
• Chirpy:

Anything else?

No response

[dolfs]

I am not in a position to produce a pull request, but I tried with a local copy and it seems the only change needed is in _include/media-url.html. Original section, starting on line 27:

    {% unless url contains '://' %}
      {% if include.absolute %}
        {% assign url = site.url | append: site.baseurl | append: url %}
      {% else %}
        {% assign url = site.baseurl | append: url %}
      {% endif %}
    {% endunless %}

should be changed to:

    {% unless url contains '://' %}
      {% if include.absolute %}
        {% assign url = site.url | append: site.baseurl | append: url %}
      {% endif %}
    {% endunless %}

In other words, remove the "else" portion of the if-statement.

[dolfs]

While the above seems to work, I found one problem. When I define an avatar (in _config.yml) as

avatar: /assets/images/avatar.jpg

and I have a baseurl that is not empty, the resulting generate code is:

<a href="/baseurl/" id="avatar" class="rounded-circle"><img src="https://mydomain.com/assets/images/avatar.jpg" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a>

so this is then missing the baseurl. This happens because of:

sidebar.html:    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
sidebar.html:      {%- if site.avatar != empty and site.avatar -%}
sidebar.html:        {%- capture avatar_url -%}
sidebar.html:          {% include media-url.html src=site.avatar %}
sidebar.html:        <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">

It uses the media-url.html include and here the inclusion of the baseurl is expected.

For now I am working around it by defining:

avatar: /baseurl/assets/images/avatar.jpg

Overall it seems there is a mismatch between lots of content already having the baseurl prepended by the time the refactoring code is reached, and therefore do not need it again, but then again in cases like this, the content was never previously generated. An other way of saying this is that using the include should possibly behave differently depending on whether it is activated from a refactoring context or not.

[dolfs]

Here is what I ended up doing, which seems to do the trick.

1. Introduce a new argument to media-url, called "refactor". Default is false, meant to be used from sidebar.html with value true.
2. Modified code in media-url.html to look at that argument and append baseurl only when it is false
3. Modified refactor-content.html to pass refactor=true when including media-url

During my experiments I had to use a local fork of the full them instead of including the gem from github. That causes the _config.yml from the theme to also be used, and it defines "cdn". I wasn't doing it in my _config.yml as I planned to use existing static assets. The net result was my /assets/images... being prefixed with the chirpy domain at netlify: not what I needed. This was not happening when I did not use the local copy.

Since there appears to be no way to completely "unset" that, and the documentation says specifying it will cause all absolute paths to be prefix with its value, I had a problem. I fixed that as follows:

1. Modify media-url.html to not only check for if site.cdn but now check if site.cdn and site.cdn != "", which then allows me to set it to an empty string in my _config.yml
2. Set cdn: "" in my _config.yml

Arguably there are two separate issues here, and if so desired I can:

1. File a separate issue for the second thing
2. Attach my modified files for integration (cannot produce a pull request right now)

Let me know.

[dolfs]

I've found that while the above works, there is a small flaw when absolute is requested while refactor is true. As I was fixing that, I realized that the seo tag for a page with an image in the front matter was not getting the baseurl placed.

The code in _include/head.html does something very similar to the media-url.html include, and should probably be using it, as it makes the same baseurl mistake. I fixed that, but in the process also found that media-url can, sometimes, emit extra, and unwanted white space. Some judiciously places {%- and -%} fixed that.

Finally, both home and page layouts use post.image and page.image in a similarly way without using media-url, so I fixed that too.

I think my changes are now substantial enough that I will need to put in the work to set up a pull request, so I will be working on that next.