How to add width to figure shortcode

support
1

If I want to add width to 100% to a figure (image) shortcode, so it rendered correctly in all browser sizes (desktop/laptop/mobile/ipad) how do I do it ?

2

Below is SCSS for figure that I use for my blog template. It was taken from Bourbon and I will modified it depend on my need.

figure{
  margin: 1em auto;
  @include display(inline-flex);
  @include flex-direction(column);
  @include border-width(em(1));
  @include border-style(solid);
  @include border-color(#eeeeee);
  @include border-top-radius(em(5));
  @include border-bottom-radius(em(5));

  background-color: $silver;


  figcaption{
    margin: 0;
    padding: 0 em(10);
    text-align: center;
    font-size: smaller;
    font-style: italic;
  }

  img{
    @include border-color(transparent);
    @include border-width(em(1));
    max-width: 100%;
  }

  p{
    margin-bottom: 0;
  }

  h4{
    margin: 0;
  }
}

I hope it help you too.

3

Thanks, couple of more follow up questions.

  1. Do I just copy this scss in the style.css or do I need to reference this in the figure shortcode file in the layouts/shortcodes file.

  2. How do I use it {{< figure src="/media/spf13.jpg" title=“Steve Francia” >}}, and how do I set say backgroud-color or font-color, do I have to change the scss.

Thanks, Rajesh

4

This is how I use figure in my article-topic.md file.

{{<
figure src="/media/blog/link-to-image.png"
caption="The caption."
alt="The alternate"
>}}

How do you edit your template?

I guest that will depend on that. For me, I create it my template using html and scss first. Once I satisfied with the look. I will start convert it to hugo template.

The compile css for the scss above is:

figure {
  margin: 1em auto;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  border-width: 0.0625em;
  border-style: solid;
  border-color: #eeeeee;
  border-top-left-radius: 0.3125em;
  border-top-right-radius: 0.3125em;
  border-bottom-left-radius: 0.3125em;
  border-bottom-right-radius: 0.3125em;
  background-color: #eeeeee; }
  figure figcaption {
    margin: 0;
    padding: 0 0.625em;
    text-align: center;
    font-size: smaller;
    font-style: italic; }
  figure img {
    border-color: transparent;
    border-width: 0.0625em;
    max-width: 100%; }
  figure p {
    margin-bottom: 0; }
  figure h4 {
    margin: 0; }

Just copy and paste it to your style.css.

Yes, to change the background color, you need to change the css.

For example:

background-color: red; // This will change background color
color: blue; // This will change font color

You can remove code that you don’t use. As you can see, mine is quite long.

I hope that help you.