ML
    • Recent
    • Categories
    • Tags
    • Popular
    • Users
    • Groups
    • Register
    • Login

    Solved How can I scale an image in a Hugo page

    IT Discussion
    markdown hugo image
    4
    31
    10.5k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • JaredBuschJ
      JaredBusch
      last edited by JaredBusch

      ok issue with the shortcode. it makes each image on it's own line, even though I have it all on one line.

      {{< figure src="/images/dwarf1.jpg" alt="dwarf" width="200px" >}} {{< figure src="/images/c64.jpg" alt="c64" width="200px" >}} {{< figure src="/images/tower.jpg" alt="computer tower" width="200px" >}}
      

      Inspect element:

      8141089b-eeab-43a6-97c1-abbace70a575-image.png

      View Source:

      a078b49a-ce12-4de2-9437-40bc7e8365f7-image.png

      View source shows the three images appear to be wrapped in a single <p>

      Visible output:

      78ef11bd-83ba-4630-9b10-8bcdecddc57b-image.png

      1 Reply Last reply Reply Quote 0
      • JaredBuschJ
        JaredBusch @1337
        last edited by

        @Pete-S said in How can I scale an image in a Hugo page:

        Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

        Here is an example.

        This:
        3429c115-f083-4813-91c3-477cf458eb34-image.png

        Results in this:
        cfd058dc-d189-4d81-9f19-3926facb7d76-image.png

        ObsolesceO 1 Reply Last reply Reply Quote 0
        • ObsolesceO
          Obsolesce
          last edited by

          I don't get where you are putting the shortcode where you define the image file.

          JaredBuschJ 1 Reply Last reply Reply Quote 0
          • JaredBuschJ
            JaredBusch @Obsolesce
            last edited by

            @Obsolesce said in How can I scale an image in a Hugo page:

            I don't get where you are putting the shortcode where you define the image file.

            In the page/post of course.

            In this case about.md

            1 Reply Last reply Reply Quote 0
            • ObsolesceO
              Obsolesce @JaredBusch
              last edited by

              @JaredBusch said in How can I scale an image in a Hugo page:

              @Pete-S said in How can I scale an image in a Hugo page:

              Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

              Here is an example.

              This:
              3429c115-f083-4813-91c3-477cf458eb34-image.png

              Results in this:
              cfd058dc-d189-4d81-9f19-3926facb7d76-image.png

              So "This:" is the about.md file, where you have both the html img line and shortcode?

              JaredBuschJ 1 Reply Last reply Reply Quote 0
              • stacksofplatesS
                stacksofplates @1337
                last edited by

                @Pete-S said in How can I scale an image in a Hugo page:

                @JaredBusch said in How can I scale an image in a Hugo page:

                and the new shortcode

                {{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" class="about-left" >}}
                
                

                Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

                <img src="/images/dwarf1.jpg" alt="dwarf" width="100" class="about-left">
                

                In html when you provide width or height it's enough to do one of them and then that become the constraining factor and the image keeps it's aspect ratio..

                The shortcodes vary depending on what they are. Here's the youtube shortcode to embed a youtube video:

                {{< youtube w7Ft2ymGmfc >}}
                
                1 Reply Last reply Reply Quote 0
                • stacksofplatesS
                  stacksofplates @JaredBusch
                  last edited by

                  @JaredBusch said in How can I scale an image in a Hugo page:

                  So, Hugo has a built in short code for this...

                  https://gohugo.io/content-management/shortcodes/#example-figure-input

                  {{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" >}}
                  

                  I missed that somehow, my bad.

                  JaredBuschJ 1 Reply Last reply Reply Quote 0
                  • JaredBuschJ
                    JaredBusch @Obsolesce
                    last edited by

                    @Obsolesce said in How can I scale an image in a Hugo page:

                    @JaredBusch said in How can I scale an image in a Hugo page:

                    @Pete-S said in How can I scale an image in a Hugo page:

                    Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

                    Here is an example.

                    This:
                    3429c115-f083-4813-91c3-477cf458eb34-image.png

                    Results in this:
                    cfd058dc-d189-4d81-9f19-3926facb7d76-image.png

                    So "This:" is the about.md file, where you have both the html img line and shortcode?

                    Oh, FFS. The image tag was only there to show him what happens to HTML. Pay attention.

                    ObsolesceO 1 Reply Last reply Reply Quote 0
                    • JaredBuschJ
                      JaredBusch @stacksofplates
                      last edited by

                      @stacksofplates said in How can I scale an image in a Hugo page:

                      @JaredBusch said in How can I scale an image in a Hugo page:

                      So, Hugo has a built in short code for this...

                      https://gohugo.io/content-management/shortcodes/#example-figure-input

                      {{< figure src="/images/dwarf1.jpg" alt="dwarf" width="100px" >}}
                      

                      I missed that somehow, my bad.

                      I never found it when searching either.

                      1 Reply Last reply Reply Quote 0
                      • ObsolesceO
                        Obsolesce @JaredBusch
                        last edited by

                        @JaredBusch said in How can I scale an image in a Hugo page:

                        @Obsolesce said in How can I scale an image in a Hugo page:

                        @JaredBusch said in How can I scale an image in a Hugo page:

                        @Pete-S said in How can I scale an image in a Hugo page:

                        Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

                        Here is an example.

                        This:
                        3429c115-f083-4813-91c3-477cf458eb34-image.png

                        Results in this:
                        cfd058dc-d189-4d81-9f19-3926facb7d76-image.png

                        So "This:" is the about.md file, where you have both the html img line and shortcode?

                        Oh, FFS. The image tag was only there to show him what happens to HTML. Pay attention.

                        Yeah, I figured. Nothing wrong with verifying something that looks contradicting, though. There's not enough of that around here tbh, too much assumption.

                        JaredBuschJ 1 Reply Last reply Reply Quote 2
                        • JaredBuschJ
                          JaredBusch @Obsolesce
                          last edited by

                          @Obsolesce said in How can I scale an image in a Hugo page:

                          @JaredBusch said in How can I scale an image in a Hugo page:

                          @Obsolesce said in How can I scale an image in a Hugo page:

                          @JaredBusch said in How can I scale an image in a Hugo page:

                          @Pete-S said in How can I scale an image in a Hugo page:

                          Just an observation but I wonder what the "shortcode" is short for, when it's basically exactly the same as html?

                          Here is an example.

                          This:
                          3429c115-f083-4813-91c3-477cf458eb34-image.png

                          Results in this:
                          cfd058dc-d189-4d81-9f19-3926facb7d76-image.png

                          So "This:" is the about.md file, where you have both the html img line and shortcode?

                          Oh, FFS. The image tag was only there to show him what happens to HTML. Pay attention.

                          Yeah, I figured. Nothing wrong with verifying something that looks contradicting, though. There's not enough of that around here tbh, too much assumption.

                          Okay, I’ll give you that.

                          1 Reply Last reply Reply Quote 0
                          • 1
                          • 2
                          • 2 / 2
                          • First post
                            Last post