Help with rendering best quality GIFs and CSS syntax

[onehungrygeek]

Thanks a ton for any helpful feedback

I need help with getting best quality GIFs.

I am not used to CSS syntax so it would be amazing if you add a lot of example config.yml files. Also, try adding config.yml files for the GIFs you are displaying in your README.md. They look fantastic. I have spent hours trying to get perfect GIF but no luck.

I don't know what value to give for shadow and also all my GIFs are very small. Yours looks big with good quality.

Also, how do I reduce the width of the terminal. All my commands are stuck to left and there is so much space on the right.

I am really interested in Floating title-less frame-box with shadow best quality GIF like you display here:

My GIF looks like this:

[faressoft]

The width of the generated image is the same width (number of cols) of your terminal. Just resize your terminal window before doing the recording to the desired size. Another option is to set the cols in the configurations. Also you can change the font size by using a custom config file or having a global custom config file.

[onehungrygeek]

Amazing!!! It was so simple. My bad, I did not know the terminal size was determined by cols and lines or rows attribute. I got it to work just by resizing the window. Thanks to you!

I just want to know how to not involve the last logout command used to exit the recording in the rendered GIF. Like yours just types the command and repeats. Also, there is no cursor displayed in the GIF. I set it to both block and bar but nothing works. Is it because I uses IBeam cursor in the bash? Please help me out. Rest works flawless!

Thanks for such a quick and helpful support Mohammad :+1:

[tinchoz49]

Hi everyone! I have the same issue of @onehungrygeek with the block cursor, it does not display.

I'm using alacritty + fish shell + tmux. The theme is dracula.

This is my config:

# Specify a command to be executed
# like `/bin/bash -l`, `ls`, or any other commands
# the default is bash for Linux
# or powershell.exe for Windows
command: 'fish'

# Specify the current working directory path
# the default is the current working directory path
cwd: null

# Export additional ENV variables
env:
  recording: true

# Explicitly set the number of columns
# or use `auto` to take the current
# number of columns of your shell
cols: auto

# Explicitly set the number of rows
# or use `auto` to take the current
# number of rows of your shell
rows: auto

# Amount of times to repeat GIF
# If value is -1, play once
# If value is 0, loop indefinitely
# If value is a positive number, loop n times
repeat: 0

# Quality
# 1 - 100
quality: 100

# Delay between frames in ms
# If the value is `auto` use the actual recording delays
frameDelay: auto

# Maximum delay between frames in ms
# Ignored if the `frameDelay` isn't set to `auto`
# Set to `auto` to prevent limiting the max idle time
maxIdleTime: 2000

# The surrounding frame box
# The `type` can be null, window, floating, or solid`
# To hide the title use the value null
# Don't forget to add a backgroundColor style with a null as type
frameBox:
  type: floating
  title: Terminalizer
  style:
    border: 0px black solid
    backgroundColor: '#282936'
    # boxShadow: none
    # margin: 0px

# Add a watermark image to the rendered gif
# You need to specify an absolute path for
# the image on your machine or a URL, and you can also
# add your own CSS styles
watermark:
  imagePath: null
  style:
    position: absolute
    right: 15px
    bottom: 15px
    width: 100px
    opacity: 0.9

# Cursor style can be one of
# `block`, `underline`, or `bar`
cursorStyle: block

# Font family
# You can use any font that is installed on your machine
# in CSS-like syntax
fontFamily: "Monaco, Lucida Console, Ubuntu Mono, Monospace"

# The size of the font
fontSize: 12

# The height of lines
lineHeight: 1

# The spacing between letters
letterSpacing: 0

# Theme
theme:
  background: "#282936"
  foreground: "#e9e9f4"
  cursor: "#e9e9f4"
  black: "#282936"
  red: "#ea51b2"
  green: "#00f769"
  yellow: "#ebff87"
  blue: "#62d6e8"
  magenta: "#b45bcf"
  cyan: "#a1efe4"
  white: "#e9e9f4"
  brightBlack: "#4d4f68"
  brightRed: "#ea51b2"
  brightGreen: "#00f769"
  brightYellow: "#ebff87"
  brightBlue: "#62d6e8"
  brightMagenta: "#b45bcf"
  brightCyan: "#a1efe4"
  brightWhite: "#e9e9f4"

[bskinn]

I just want to know how to not involve the last logout command used to exit the recording in the rendered GIF.

Edit the recording YAML file and remove those entries that correspond to the logout command.