This is my Place and I need a Banner

 Test image created to determine what the F is happening to my banner image.

Test image created to determine what the F is happening to my banner image.

 
 

As a placeholder for my site I began with adding my Be Right Back image that I had created for my Twitch Stream. While this holds a special place in my heart and I plan to continue using it in some fashion when my Internet allows me to stream again, it doesn't have a place here as I need something new, something that speaks to me, something spunky.

I have settled on the design. It will be my nom de plume with various things that interest me as the letterings background. So to break that down, One letter may have a collage of comics, while another letter will house a collage of video games. This will go on for the remaining letters. Some of the backdrops may be utilized two or three times, as I am pretty sure I am not going to think of enough topics to fill out Senselessgeek.

But first things first I need to know how big my canvas will be. I noticed with my BRB image that the site is not displaying all of the image so I created a test image to determine what is happening. The image I create using GIMP (my preferred image manipulation program) is a canvas of 1600x900 pixels. I made a semi straight line utilizing the Shift+click combo to create a line, i don't really care about perfectly straight, I just needed a quick reference. I also am pretty sure there is a keybind to create a perfectly straight line within GIMP but I've forgotten most of that, i just found what worked by pressing some buttons.

Each horizontal line of the image was set to a different color and place at 0px, 100px, 200px, etc. I made two vertical lines one at 250px and the other at 1250px. This should give me a rought visual aid to so how big my image needs to be. Image was then imported to the Banner section of my Template and I can now see that image stays the same size but the view window gets cropped depending on how large the actual page is. This is not going to cut it. Ironic cause the template keeps cutting my image off. Okay not funny when you explain it.

I need to find the code to change the template. The wiki page says that to get to the template files I will need Git. Checked my machine and I don't have Git installed, so i grabbed ther installer from https://git-scm.com/download/win. A quick git clone and I now have my template files. I am unsure where they downloaded to though. A quick google search provided no results, but looking at the terminal output shows

Cloning into 'template'...

This leads me to think there is now a folder called "template" I do a windows search and the folder is found under my user folder. I am sure that I could tell Git to clone to a specific location, but that is not the focus of this, so we'll move on.

digging into the files, I realize what I knew to be the case already. The template is built using JSON template and LESS CSS extension. I know nothing about JSON Template but that is what this is about, but I am not going to dig into that in depth with this bit, but I do need to do some digging. I pull up the firefox page inspector and find the section for my banner. That section shows that the style applied is "overflow: hidden", while this works for images that have sprawling landscapes like this template was designed for, this is not what I would like for my images. I want my images to scale down, not be clipped.

A quick search of what I am looking for on google, basically searching for "resize image relative to screen size" yields the combination of max-width:100% and height:auto. I open up the styles folder and grab the base.less file and open in notepad++. I do a search for banner and do a quick run through of the different style classes. If I wasn't tired I would have checked my inspector first and grabbed the class from that since I already did that work. Anyways I find the class banner-thumbnail-wrapper and it matches the class shown in inspector. It already has a height and a width specified, width at 100% and height set to minimum 320 px. I am going to remove the overflow style and reupload my template.

According to my documentation is need to

cd template

git add site.region

git commit -m "Changing something in site.region"

git push

love incomplete documentation. ERRORS GALORE. First git needs me to tell it who I am. So i follow the onscreen prompts. now it says I haven't staged my changes. A search for staging git changes tells me I'm tired and am making mistakes.

git add site.region

is not a literal translation, but a symbolic translation, I need to add the file I changed using that command. After following the errors that keep getting thrown at me I finally get my change committed. Time to test. This was not correct, I changed the wrong thing. Time to revert my change so I don't break things completely. That is enough for this evening, I will continue this in Part II.