Home / Uncategorised / How to Upload Content & Images

How to Upload Content & Images

K C

Basic Code Tag Jargon

NOTE: All tags have a start and an end the start is usually <p> and ends with a slash in the tag </p>

<h1> - Header 1 - Page Title - there should only be one per page and located at the top

<h2> - Header 2 - Content Titles - can have multiple of these

<h3> - Header 3 - Usually these go after h2's

<p> - Basic Text

<a> - Links

<strong> - Bold Text

<em> - Italic Text

<div> - A box to put things in - websites are made up of 'boxes'. divs are usually for layout purposes like rows and columns

class="" - This is for CSS - this allows coders to style specific elements

style ="" - Quick way to add simple CSS to an element usually for centering text - however its not best practice and usually coders use class="" instead 

id = "" - Similar to class but only one thing on a page can have one unique id - usually used for anchor links

For more info on tags look at mdn web docs or W3 Schools

Content

Text in progess

Copying and Pasting Text (usually from Word)

  • DO NOT paste text from Word in website text editors - it copies over formatting and backend code ends up messy

When adding text/copy/tables to a website it first needs to be coded. You don't need to manually code anything with this online text editor - Pretty HTML.

  1. In HTML Tidy paste content in the left column.
  2. On the arrow on the Tidy Button make sure everything is ticked except for 'Make plain text'.
  3. Hit Tidy Button

Do the following edits/checks:

Code Editor (Right Column)

  • Remove domain links (internal links only - do not remove on external links) e.g.
    <a href="https://learn.b4b.dev/blog/how-to-upload-content-and-images/">
    change to
    <a href="/blog/how-to-upload-content-and-images/">

Text Editor (Left Column)

  • Bullet points sometimes have spacing - to fix this select bullet points and hit bullet point icon twice and it will fix itself.
  • Its easier to add headings here - select title > formats > select Heading.
  • Any other options such as italics or bold can easily be added in this column.

Adding Links

End of Text in progess

Images

  • Image size should be no bigger than width 1920 pixels x height 1080 pixels
  • Image file size should be at least under 200kb – can go slightly above if it’s a big image but aim to have large images under 300kb

Explanation on Image file types:

You should only upload these file types: .webp, .jpg, .png, .svg.

.webp

Best image file for websites – use Birme to convert most images to .webp. 

This is a very rare case but worth mentioning - .webp can support transparency so use this for masked photographic images - if transparent image is a vector please use .png. 

However not all websites support .webp - so make sure to add a test image to check if .webp is supported. Breakdance, Woodmart, Elementor usually accept .webp, however older WordPress and our CMS DO NOT accept .webp - please scroll to .jpg instead.

  1. Drag images into Birme
  2. Input your size in the resize/crop tab
  3. Set focal point - Birme can automatically find best part of image but it is not always reliable so you can set focal point yourself - usually center is best, or if you click on image you can drag the crop field to where you want it.
  4. In Image Format & Quality Tab - select .webp and set quality to:
    1. 80% if people are in image
    2. 60% as standard
    3. 40% and under if theres a lot of details in image - usually trees, grass, etc.
    4. Make sure image size goes under 200kb - lower quality until its around 200kb
  5. Save as Zip or Save Files (zip is best if theres several images, but if you are dealing with 1 or 2 images just click save files)
  6. Rename image to best describe it - for example Solar-Panel-on-House - make sure you add dashes to replace spaces

.jpg

Please use this file type if .webp is not supported - so b4b's CMS and older WordPress DO NOT allow .webp. 
Use Birme or Adobe Photoshop (or whatever image editing software you like to use) to resize images.

Birme is easier to use so similar method with .webp:

  1. Drag images into Birme
  2. Input your size in the resize/crop tab
  3. Set focal point - Birme can automatically find best part of image but it is not always reliable so you can set focal point yourself - usually center is best, or if you click on image you can drag the crop field to where you want it.
  4. In Image Format & Quality Tab - select .jpg and set quality to 100% (yes make sure its 100%) 
  5. Save as Zip or Save Files (zip is best if theres several images, but if you are dealing with 1 or 2 images just click save files) 
  6. Rename image to best describe it - for example Solar-Panel-on-House - make sure you add dashes to replace spaces
  7. Go on CompressJPG (with the green elephant) and drag your cropped image(s) into the compressor and download - it should be downloaded with a -min at the end of the filename
  8. If image is above 200kb for small image or 300kb for large image - then go to TinyJPG (with the panda) and compress it again

.png

There are rare cases where .png should be used instead - only use this file type for vectors and text - e.g. Logos, screenshots, graphics with solid colour. File size usually comes out smaller and images don't get blurry when compressed - they become more pixelated instead which makes text and edges much crisper and easier to read than .jpg and .webp.

Can resize using Birme but only if original file is a .png: 

  1. Drag .png images into Birme
  2. Input your size in the resize/crop tab
  3. Set focal point - Birme can automatically find best part of image but it is not always reliable so you can set focal point yourself - usually center is best, or if you click on image you can drag the crop field to where you want it.
  4. In Image Format & Quality Tab - select same as original images
  5. Save as Zip or Save Files (zip is best if theres several images, but if you are dealing with 1 or 2 images just click save files) 
  6. Rename image to best describe it - for example Solar-Panel-on-House - make sure you add dashes to replace spaces
  7. Compress .png using TinyJPG (accepts .png files).

However if you get a vector/logo that is .jpg or something else - hand it to a team member who can use Photoshop and they can sort image out for you. 

.svg

These files are vectors that are scalable to any size, usually logos and icons - mainly web people will deal with .svgs. 

How to add images to websites:

b4b CMS

  • Only accepts .jpg and .png
  • Dont stay too long in editor - CMS will eventually sign itself out and lose current progress (about 30 mins) - it stops this if you save now and then or go on other pages
Banners

There are usually two ways:

  1. The 'Sliders' when you edit a page (found at the bottom) - click upload images - when uploaded click edit - where (sometimes) you add h1 and alt - NOTE this will automatically save when you add image - if youve made a mistake just click on the X of the image.
  2. The 'Banner' Tab when you edit a page (found to the left of the WYSIWYG) - simply click the upload image 
Content Images - (very basic code for this)

Upload images to media library

Then either:

1. Click on insert image in WYSIWYG

  1. A Tab will pop up - click browse server and find the image you want to add
  2. Name image in Alternative Text
  3. Set width to 100% - make sure height is empty - click lock icon to unlock it to stop height being same as width
  4. Click OK

2. Find a page where images have been added - check code editor and copy the code (or you can just copy below) usually it might look like:

<img alt="Solar Panels on a House" src="/files/ckeditor/Solar-Panels-House.jpg?time=1703148339930" style="width: 100%;">

  1. Go to visual editor and click on image (should highlight blue) then image icon in WYSIWYG
  2. A Tab will pop up - click browse server and find the image you want to add
  3. Name image in Alternative Text
  4. Set width to 100% - make sure height is empty - click lock icon to unlock it to stop height being same as width
  5. Click OK

Wordpress

  • All wordpress backends should always accept .jpg and .png however depending on theme/age it will not always accept .webp and .svg
  • All WordPress themes (not matter how bad) should have a media library - you always upload and alt images in there

All WordPress Themes

  1. Go into media library
  2. Add new then you can either drag and drop or upload
  3. Name all images you upload in alt tag
  • Here is our most common wordpress themes - how to upload images in content
Breakdance (Elementor will be very similar)
  1. Go to Edit in Breakdance on a page
  2. Click on an image - a left panel should pop open 
  3. Click image thumbnail under Media and choose new image
  • Sometimes images are as a background - usually banners and sometimes content images to change image on those:
  1. Select image - select background tab in left panel
  2. Click on image thumbnail found under Image
  • Sometimes you need to change banner image by changing the featured image - you need to go to the standard page editor (the place where you change the metas) and change featured image from there.
WP Bakery (and Woodmart theme)
  1. Click edit on a page
  2. In WP Bakery Editor go to image module (its usually always called image) and click edit
  3. You should be able to change image by clicking the current image thumbnail
  4. Click save
  • Sometimes images are as a background - usually banners and sometimes content images to change image on those:
  1. On columns or rows hit the edit (pencil icon) 
  2. A window will pop-up - click on Design Options tab
  3. Go to background and add image
  4. Click save
  • Sometimes you need to change banner image by changing the featured image - or rarely on Woodmart right at the bottom theres a page setting area where you add background image in Page Title tab