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

    How can I scale an image in a Hugo page

    Scheduled Pinned Locked Moved Solved IT Discussion
    markdownhugoimage
    31 Posts 4 Posters 11.1k Views
    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.
    • stacksofplatesS
      stacksofplates @JaredBusch
      last edited by stacksofplates

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

      @stacksofplates typo in your path there, but thanks!

      Oops fixed. That's what I get for doing this on my phone.

      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:

        @stacksofplates But this begs the question, how do I get a picture name?

        where the fuck do I put image files? and do I then need to define them someplace else?

        I know I canput things in static, but my understanding is to avoid that unless I really mean to add some static thing that is not programmatically built.

        That or I am completely not understanding Hugo

        That specific shortcode is looking for them in a media directory in your content folder. The name is the file name minus the extension.

        ah-hah! ok i'll look at this more after my workout.

        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:

          Currently, markdown does not natively have a way to scale images.
          https://daringfireball.net/projects/markdown/syntax#img

          This seems to be an issues for me with using Hugo, I have an existing site that I am converting and the images are scaled with the normal <img> tag.

          Searching the net, it seems a lot of tools have added functionality to markdown to support image scaling, but it seems Hugo's implementation of Markdown has not.

          I tried to just use the HTML element in the Hugo page, but it was not rendered.

          Most Hugo themes have a way to add custom CSS properly, so that's my preferred method to changing visuals. And is a hell of a lot easier to maintain and write than trying to code all that other B.S. as in the solution. That's a huge turn off for me with Hugo as well as so many of the other annoyances. If it wasn't for the theme I found I'd be going back to WP or HTML template.

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

            @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:

            Currently, markdown does not natively have a way to scale images.
            https://daringfireball.net/projects/markdown/syntax#img

            This seems to be an issues for me with using Hugo, I have an existing site that I am converting and the images are scaled with the normal <img> tag.

            Searching the net, it seems a lot of tools have added functionality to markdown to support image scaling, but it seems Hugo's implementation of Markdown has not.

            I tried to just use the HTML element in the Hugo page, but it was not rendered.

            Most Hugo themes have a way to add custom CSS properly, so that's my preferred method to changing visuals. And is a hell of a lot easier to maintain and write than trying to code all that other B.S. as in the solution. That's a huge turn off for me with Hugo as well as so many of the other annoyances. If it wasn't for the theme I found I'd be going back to WP or HTML template.

            The problem with CSS for this is it it only works with one image or all of them. You'd have to continually add CSS properties for every image you create. The above solution is just a tag you write in your post. You just write the shortcode one time and then use it when you want to.

            My personal opinion is that I think this is much easier to maintain. I don't have to manage a server, database, patches, plugins, worry about security of my system/CMS, etc or pay someone to do that for me. Every so often I'll have to write something like the above solution but it's not common and I don't have to manage anything. I can also redeploy the same site on literally anything because there's no backend to deal with.

            Not saying I'm right and you're wrong, just that's why I really like this tool.

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

              @stacksofplates 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:

              Currently, markdown does not natively have a way to scale images.
              https://daringfireball.net/projects/markdown/syntax#img

              This seems to be an issues for me with using Hugo, I have an existing site that I am converting and the images are scaled with the normal <img> tag.

              Searching the net, it seems a lot of tools have added functionality to markdown to support image scaling, but it seems Hugo's implementation of Markdown has not.

              I tried to just use the HTML element in the Hugo page, but it was not rendered.

              Most Hugo themes have a way to add custom CSS properly, so that's my preferred method to changing visuals. And is a hell of a lot easier to maintain and write than trying to code all that other B.S. as in the solution. That's a huge turn off for me with Hugo as well as so many of the other annoyances. If it wasn't for the theme I found I'd be going back to WP or HTML template.

              The problem with CSS for this is it it only works with one image or all of them. You'd have to continually add CSS properties for every image you create. The above solution is just a tag you write in your post. You just write the shortcode one time and then use it when you want to.

              My personal opinion is that I think this is much easier to maintain. I don't have to manage a server, database, patches, plugins, worry about security of my system/CMS, etc or pay someone to do that for me. Every so often I'll have to write something like the above solution but it's not common and I don't have to manage anything. I can also redeploy the same site on literally anything because there's no backend to deal with.

              Not saying I'm right and you're wrong, just that's why I really like this tool.

              OH I thought he just wanted to do it to a single image. I guess I didn't read into it enough.

              IMO, it would depend on the use case. In my case, the images I use in all posts should all be a certain width, and the height set to auto. So that's only once I put custom CSS, then one that targets the logo in the header, and one for the footer. Done. Super easy, and holy shit I would have never been able to figure out that shortcode stuff without my hand held, nor do I want to... Unless of course I need something that dynamic. Then sure.

              On another separate note @stacksofplates, can this be done with anything? There is two places I need to edit in a partial HTML, and was a last resort. So I would rather this shortcode thing than that.

              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:

                @stacksofplates But this begs the question, how do I get a picture name?

                where the fuck do I put image files? and do I then need to define them someplace else?

                I know I canput things in static, but my understanding is to avoid that unless I really mean to add some static thing that is not programmatically built.

                That or I am completely not understanding Hugo

                That specific shortcode is looking for them in a media directory in your content folder. The name is the file name minus the extension.

                I could not get the shortcode to work last night.

                I did download the entire example git repo and added all the pieces to my project and those worked.

                As soon as I tried to use it on my about.md page, it never worked.

                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:

                  Currently, markdown does not natively have a way to scale images.
                  https://daringfireball.net/projects/markdown/syntax#img

                  This seems to be an issues for me with using Hugo, I have an existing site that I am converting and the images are scaled with the normal <img> tag.

                  Searching the net, it seems a lot of tools have added functionality to markdown to support image scaling, but it seems Hugo's implementation of Markdown has not.

                  I tried to just use the HTML element in the Hugo page, but it was not rendered.

                  Can you "inspect element" in your browser of the image you are talking about and screenshot the whole hierarchy and I'll see if I can get the CSS going that you can add to the custom.css file in your other thread.

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

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

                    Can you "inspect element" in your browser of the image you are talking about and screenshot the whole hierarchy and I'll see if I can get the CSS going that you can add to the custom.css file in your other thread.

                    I took it all back out last night before i stopped. Tonight it is too late to fuck with, but I will next I work on this.

                    Specifying dimensions is a normal thing with images.

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

                      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" >}}
                      
                      stacksofplatesS 1 Reply Last reply Reply Quote 1
                      • JaredBuschJ
                        JaredBusch
                        last edited by JaredBusch

                        Now to figure out how to make an image be to the left or right.

                        ...and the figure shortcode allows the class attribute.. so that was easy. CSS can handle it.

                        in my dwarf.css

                        .about-left {
                            float: left;
                            padding: 0 20px 20px 0;
                        }
                        

                        and the new shortcode

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

                        9d9607c4-1626-4aa0-9d79-8ec4fb488d6b-image.png

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

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

                          JaredBuschJ stacksofplatesS 4 Replies 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:

                            @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?

                            Huog is all markdown based, and depending on the theme (apparently) you cannot jsut use html in a page.

                            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:

                              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..

                              Yes

                              1 Reply Last reply Reply Quote 0
                              • 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
                                            • 1
                                            • 2
                                            • 1 / 2
                                            • First post
                                              Last post