Embedding images not working

support
1

Embedding images from a Google Drive doesn’t seem to be working. Does anyone know why?

I have the following post:

---
title: "Post 1"
---

# Post 1

## Image 1
![image](https://drive.google.com/file/d/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY/view?usp=sharing)

## Image 2
{{< html >}}
<img src="https://drive.google.com/uc?export=view&id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY">
{{< /html >}}

I have the following shortcode for the above mentioned html shortcode:

{{.Inner}}

Repo: GitHub - jpnfighter/steve-site: hugo website

2

Not sure but isn’t that a link to the google driver viewer and not really an image?
This appears to be the image link, but whether that ever changes I don’t know.
https://doc-0o-0o-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/i50q5otnlb5pe6qdlf9gc0fl75qdrh8j/1688141400000/04330630498705347565/*/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY?e=view&uuid=1d07d099-1acf-48ad-894e-234a09c66e71
And does show up ok…

3

What exactly did you type to get your result sorry?
I’ve tried to following and hasn’t worked:

![image]( https://doc-0o-0o-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/i50q5otnlb5pe6qdlf9gc0fl75qdrh8j/1688141400000/04330630498705347565/*/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY?e=view&uuid=1d07d099-1acf-48ad-894e-234a09c66e71)

## Image 2
{{< html >}}
<img src="https://doc-0o-0o-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/i50q5otnlb5pe6qdlf9gc0fl75qdrh8j/1688141400000/04330630498705347565/*/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY?e=view&uuid=1d07d099-1acf-48ad-894e-234a09c66e71">
{{< /html >}}
4

Now it doesn’t show up, I don’t think google drive likes being used like this!

1 Like
5

HI,

I used another way … to copy the external picture to my generates site under img/ext with a shortcode

+++
title       = "external image"
+++
## external image

{{< extpic  "https://gohugo.io/images/gohugoio-card-1.png" >}}

the shortcode

{{ $src := .Get 0 }}
{{ with resources.GetRemote $src }}
{{ with .Err }}
{{ warnf "%s" . }}
{{ else }}
{{ $url := urls.Parse $src }}{{ $path := urls.JoinPath  "img/ext" $url.Host $url.Path }}
{{ $img := .Content | resources.FromString $path }}
<img src="{{ $img.RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}

pro

  • checks the external image during build

con

  • copy the image on every build to the local server

addings

  • You could insert the image as data stream in the page without storing it as file.
    This could be a nice way for small images.
  • you can change the image size and quality
  • you can add a link to the original image

HTH

6

Unfortunately would be against the reason I’m wanting to have the images stored on a GDrive rather than the local server

7

You can shorten the shortcode :wink: or embedd it in a render-image template

1 Like
8

I’ve tested putting the following in a .html file and it all works and shows the image:

<img src="https://drive.google.com/uc?id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY">

However, when I do the same thing in Hugo in a post.md, it doesn’t work for some reason:

{{< html >}}
<img src="https://drive.google.com/uc?id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY">
{{< /html >}}

(I have a shortcode in themes\steve-theme\layouts\shortcodes\html.html which consists of:

{{.Inner}}

(repo: GitHub - jpnfighter/steve-site: hugo website)

9

The image works for me. Here is a slightly modified version of your repo that you can download, extract and run hugo server, then open Post page. Filebin | kfm85d3m4vnn6gfq

10

That works thanks. I just also realized that it seems to be working on Edge and not on Firefox for some reason however. That seems a bit odd, perhaps one of my Firefox settings or just Firefox itself I’m not sure…

11

I am using Firefox and the image works fine.

1 Like
12

Must just be me

13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.