Formatting an Image with SASS in Jekyll
How to Modify the Format of an Image Using SCSS
Overall, formatting an image requires tagging the image with an attribute list that controls how the image is displayed in a web page. Doing this on a Jekyll static web site in Markdown files is not very obvious. It took a few tries to get the relationship of the files and syntax correct. This example uses several of the features provided in Jekyll. It starts with using SASS or SCSS which will generate the cascading style sheets (CSS). In order to have the CSS apply to elements in a Markdown file, liquid tags are used to create a class name attribute. The class name attribute gets applied to the image link so that the style is matched to the specific image file.
There are three files used in this example:
- css/main.scss
- _sass/_base.scss
- _posts/2016-09-10-mypost.md
The location of the files is in the directory of the Jekyll site you created.
In the css/main.scss file, these variables are added. Later they are referenced in the _base.scss file. This isn’t required but does allow adjusting the size of the image in a single location. These variables could be used for a style that gets applied to many images in different documents. For example, a common figure or screenshot image that is contained in one or more articles.
// About page content
$about-img-width: 220px;
$about-img-height: $about-img-width * 1.25;
In the _sass/_base.scss file place the SCSS to generate the cascading style sheet that will be used in this web site.
A class is triggered with “.classname”, the classname preceded by a “.”
/**
* About page photos
*/
.aboutphoto {
width: $about-img-width; // set in css/main.scss
height: $about-img-height;
border-radius: 4px;
float: right;
margin: 0 0 0 25px; // top, right, bottom, left
box-shadow: 5px 5px 2px grey;
}
In the Markdown (Kramdown) file, in this case about.md, place the info for the image link along with the class used in the _base.scss
{:.aboutphoto}
A line of text here with no break makes it inline with the image
In this case, we want the text to wrap by our photo, we put the image markdown with the text w/o a blank line before it. The blank line gives us a <p> paragraph separation (block separation).
Try this out in some of your own pages. The following links are good references for understanding syntax of CSS, Liquid and SASS.