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.8k
    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 @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