(JEKYLL)Images Not Showing/Can't Remove Text #23717

fintechntrusts2020 · 2020-09-29T03:07:38Z

fintechntrusts2020
Sep 29, 2020

Hello Community,

For some reason my images are showing in the preview, but not live. The path is correct as images are showing in the background correctly on live site. Also I have text on the live site that isn’t supposed to be there as there is other text written locally in it’s place and not showing that text. I’m wondering if these 2 issues are cache related?

Answered by MichaelCurrin

Oct 4, 2020

Recommended restructure

After you have got the images fixed, I would recommend restructuring your site.

It is very unintuitive to design and debug a public URL which is just a frame that points to your github pages site.

Your site is also likely to suffer in search engine results. Here are SEO issues:

Google and other crawlers may not be able to read your frame content. In fact a frame is very 1990s and you might get penalized for just even using a frame. (An iframe is more modern, but still not a good fit for you).
The page will take longer to load using frames because of two steps.
You are effectively duplicating content on your two sites, which will give you a negative score on search…

View full answer

otter-computer · 2020-09-29T12:35:54Z

otter-computer
Sep 29, 2020

Hi @fintechntrusts2020, can you drop a link to the repo that hosts your site so we can take a look at what’s going wrong?

0 replies

fintechntrusts2020 · 2020-09-29T16:33:00Z

fintechntrusts2020
Sep 29, 2020
Author

Absolutely! https://github.com/fintechntrusts2020/Replica-Economics

0 replies

fintechntrusts2020 · 2020-10-01T20:40:05Z

fintechntrusts2020
Oct 1, 2020
Author

It’s been a week since I posted my inquiry and no one has responded. I’m having some issues figuring out why my pictures are not displaying on the live site, and why text will not update live on Github Pages. If you’re interested I’m willing to compensate you for some assistance in resolving these issues.

0 replies

otter-computer · 2020-10-02T14:47:36Z

otter-computer
Oct 2, 2020

Thanks for posting that link! Could you give some more information about what you mean by “images are showing in the preview?” I can see the images are loading correctly on your site but I’m not quite sure where else you’re looking for these images. Are they not working when you load your site locally, or are you looking at these images somewhere else?

Can you share some screenshots/links of where these images aren’t showing up?

0 replies

fintechntrusts2020 · 2020-10-02T20:14:19Z

fintechntrusts2020
Oct 2, 2020
Author

Hello Thomas, and thank you for responding, I will explain the following in the following images:

Capture31360×445 208 KB

In the screen above(which is the live site), the link appears to be broken, however in the image below there doesn’t appear to be anything wrong with the code.

0 replies

fintechntrusts2020 · 2020-10-02T20:15:05Z

fintechntrusts2020
Oct 2, 2020
Author

Capture21124×183 11.5 KB

0 replies

fintechntrusts2020 · 2020-10-02T20:15:58Z

fintechntrusts2020
Oct 2, 2020
Author

Below is the preview:

Capture41532×998 100 KB

0 replies

fintechntrusts2020 · 2020-10-02T20:17:28Z

fintechntrusts2020
Oct 2, 2020
Author

Lastly, I’m not sure why this text hasn’t been updated and displayed correctly:

Capture5.PNG1098×523 109 KB

0 replies

fintechntrusts2020 · 2020-10-02T20:18:34Z

fintechntrusts2020
Oct 2, 2020
Author

The highlighted area should actually display the text “Objective” via the layout as shown below:

Capture61125×651 649 KB

0 replies

MichaelCurrin · 2020-10-04T08:50:07Z

MichaelCurrin
Oct 4, 2020

Hi.

The text part is easy. Check out your layouts. You use the Mission twice. Once as mission/index.html using default layout and again as your demo post using post layout. Neither have a subtitle in them. So add {{ subtitle }} to the post layout like you do on page layout.

And you’ll probably want to turn mission/index.html to use page and not default layout.

0 replies

MichaelCurrin · 2020-10-04T09:16:38Z

MichaelCurrin
Oct 4, 2020

Problem

The reason your image is broken is because of your relative path.

Your overview page on the public URL here

http://www.replica-eco.net/project/replica-overview

use a frame to load content from

  <a href="https://fintechntrusts2020.github.io/Replica-Economics/project/replica-overview" target="_blank" rel="noopener nofollow ugc">fintechntrusts2020.github.io</a>

What is Replica Economics? – Replica Economics

Find out why this BCH Token exists to help you.

And on that page looking at HTML source, you have

<p><img src="/images/replica_logo_2.jpeg" alt="" /></p>

Which should rather be:

<p><img src="/Replica-Economics/images/replica_logo_2.jpeg" alt="" /></p>

Use relative_url.

Test it:

fintechntrusts2020.github.io/Replica-Economics/images/replica_logo_2.jpeg

Recommended simple fix

Therefore you should edit this page https://github.com/fintechntrusts2020/Replica-Economics/blob/4d5d8064bc465790ca9692c9ea54bcbf1ccf2b14/_projects/replica_overview.md

Change

![](/images/replica_logo_2.jpeg)

to

![Replica logo]({{ '/images/replica_logo_2.jpeg' | relative_url }})

Note your view in your .md file will not preview correctly because of using Jekyll / Liquid, but the site will build correctly.

The initial text will show if you image is broken, to help you know where on the page it is trying to load.

Secondly, to make that work, you must also edit your config https://github.com/fintechntrusts2020/Replica-Economics/blob/4d5d8064bc465790ca9692c9ea54bcbf1ccf2b14/_config.yml

To have:

baseurl: /Replica-Economics

That might already be set by GH Pages, but it is good to be explicit. Especially for local builds for https://localhost:4000/Replica-Economics/ to work.

0 replies

MichaelCurrin · 2020-10-04T09:29:29Z

MichaelCurrin
Oct 4, 2020

Recommended restructure

After you have got the images fixed, I would recommend restructuring your site.

It is very unintuitive to design and debug a public URL which is just a frame that points to your github pages site.

Your site is also likely to suffer in search engine results. Here are SEO issues:

Google and other crawlers may not be able to read your frame content. In fact a frame is very 1990s and you might get penalized for just even using a frame. (An iframe is more modern, but still not a good fit for you).
The page will take longer to load using frames because of two steps.
You are effectively duplicating content on your two sites, which will give you a negative score on search engines.
Your sitemap on your public site www.replica-eco.net/sitemap.xml references your github.io domain. This will cause errors or penalties because the domain is different. One way to fix this is to update config with url: https://www.replica-eco.net so your sitemap builds correctly.
Plus you also going to want to fix your SSL issue to add HTTPS support to www.replica-eco.net to improve SEO. Currently it’s staying on HTTP and giving me a warning as insecure.

I suggest you get rid of the frame approach. Combine your two sites into one. Use GH Pages to build and host your content and your public domain on top of the same site (with no frame) to make it friendly.

You can use GitHub Pages’ free functionality of a public custom domain. Go to your repo settings and choose to setup a custom domain. You already own and paid for www.replica-eco.net so you just have to configure GH Pages to use it. For example I think you’ll need to create a CNAME file in your repo. You might need to find a tutorial on this in the GH Pages docs if you need more info.

Subpath

Oh and if you go this route you might want to go from serving on /Replica-Economics to /

You’ll need to revert to this:

baseurl: ''

And rename the repo itself from Replica-Economics to fintechntrusts2020.github.io

This is a GH Pages thing which turns the domain from fintechntrusts2020.github.io/Replica-Economics to fintechntrusts2020.github.io.

0 replies

fintechntrusts2020 · 2020-10-06T01:23:28Z

fintechntrusts2020
Oct 6, 2020
Author

Hello there Michael, thank you for the helping! With your advice I fixed the issue with the text. However, when following your recommended simple fix, I still only get a broken link even after the config application. Is there something that I’m missing? The change:

michaelcurrin:

![Replica logo]({{ '/images/replica_logo_2.jpeg' | relative_url }})

Is to take place at the replica_overview.md file correct? Or is that change to be made in html?

0 replies

MichaelCurrin · 2020-10-17T17:55:57Z

MichaelCurrin
Oct 17, 2020

That is markdown code so it must be in a .md file.

Or you must rewrite as HTML then put it in .html

<img src="{{ '/images/replica_logo_2.jpeg' | relative_url }}" 
    alt="Replica logo" />

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

(JEKYLL)Images Not Showing/Can't Remove Text #23717

{{title}}

Replies: 14 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

(JEKYLL)Images Not Showing/Can't Remove Text #23717

Recommended restructure

Replies: 14 comments

fintechntrusts2020 Sep 29, 2020 Author

fintechntrusts2020 Oct 1, 2020 Author

fintechntrusts2020 Oct 2, 2020 Author

fintechntrusts2020 Oct 2, 2020 Author

fintechntrusts2020 Oct 2, 2020 Author

fintechntrusts2020 Oct 2, 2020 Author

fintechntrusts2020 Oct 2, 2020 Author

Problem

Recommended simple fix

Recommended restructure

Subpath

fintechntrusts2020 Oct 6, 2020 Author

fintechntrusts2020
Sep 29, 2020
Author

fintechntrusts2020
Oct 1, 2020
Author

fintechntrusts2020
Oct 2, 2020
Author

fintechntrusts2020
Oct 2, 2020
Author

fintechntrusts2020
Oct 2, 2020
Author

fintechntrusts2020
Oct 2, 2020
Author

fintechntrusts2020
Oct 2, 2020
Author

fintechntrusts2020
Oct 6, 2020
Author