fix: replace imgur with s3 for english guide without conflict (#36053)

* fix: imgur to s3 for englsh guide without conflict (cherry picked from commit 9c9f15abf4e755feab79ef7090dacdcf497ea7b6) * fix: revert unrelated changes
freeCodeCamp · May 20, 2019 · a16539b · a16539b
1 parent 18e1583
commit a16539b
Show file tree

Hide file tree

Showing 36 changed files with 66 additions and 66 deletions.
diff --git a/guide/english/3d/blender/iceberg-scene/index.md b/guide/english/3d/blender/iceberg-scene/index.md
@@ -13,9 +13,9 @@ title: Blender Water Shader Effect
 3. Translucent BSDF Shader :	Color ~= 2B9489 (a bit dark greenish blue)
 4. Transparent BSDF Shader :	Color ~= 3173C0 (bluish)
 
-![Imgur](https://i.imgur.com/msFhj0x.png) 
+![Imgur](https://cdn-media-1.freecodecamp.org/imgr/msFhj0x.png) 
 #### Basic Render of the Above Node Layout
-![Imgur](https://i.imgur.com/ZI8P3Qx.png)
+![Imgur](https://cdn-media-1.freecodecamp.org/imgr/ZI8P3Qx.png)
 
 #### More information
 [Blender Tutorial - Creating a Water Material in Cycles](http://www.youtube.com/watch?feature=player_embedded&v=4m2ldp-2fJc)
diff --git a/guide/english/algorithms/greatest-common-divisor-euclidean/index.md b/guide/english/algorithms/greatest-common-divisor-euclidean/index.md
@@ -32,7 +32,7 @@ You will better understand this Algorithm by seeing it in action.
 Assuming you want to calculate the GCD of  1220 and 516, lets apply the Euclidean Algorithm-  
 
 Assuming you want to calculate the GCD of  1220 and 516, lets apply the Euclidean Algorithm-
-![Euclidean Example](https://i.imgur.com/aa8oGgP.png)  
+![Euclidean Example](https://cdn-media-1.freecodecamp.org/imgr/aa8oGgP.png)  
 
 Pseudo Code of the Algorithm-  
 Step 1: **Let `a, b` be the two numbers**  

diff --git a/guide/english/algorithms/greedy-algorithms/index.md b/guide/english/algorithms/greedy-algorithms/index.md
@@ -48,12 +48,12 @@ Let's look at the various approaches for solving this problem.
 ![Earliest Starting Time First](https://algorithmsandme.files.wordpress.com/2015/03/f268b-jobs.png?w=840)
 
 2. **Smallest Interval First** i.e. you end up selecting the lectures in order of their overall interval which is nothing but their `finish time - start time`. Again, this solution is not correct. Look at the following case.
-![Shortest Interval First](https://i.stack.imgur.com/4bz2N.png)
+![Shortest Interval First](https://cdn-media-1.freecodecamp.org/imgr/4bz2N.png)
 
 You can clearly see that the shortest interval lecture is the one in the middle, but that is not the optimal solution here. Let's look at yet another solution for this problem deriving insights from this solution.
 
 3. **Least Conflicting Interval First** i.e. you should look at intervals that cause the least number of conflicts. Yet again we have an example where this approach fails to find an optimal solution.
-![Least Conflicting Interval First](https://i.stack.imgur.com/5LZ9V.png)
+![Least Conflicting Interval First](https://cdn-media-1.freecodecamp.org/imgr/5LZ9V.png)
 
 The diagram shows us that the least confliciting interval is the one in the middle with just 2 conflicts. After that we can only pick the two intervals at the very ends with conflicts 3 each. But the optimal solution is to pick the 4 intervals on the topmost level.
 

diff --git a/guide/english/android-development/android-studio/direct-upload-to-github/index.md b/guide/english/android-development/android-studio/direct-upload-to-github/index.md
@@ -2,7 +2,7 @@
 title: Direct Upload to GitHub Via Android Studio
 ---
 
-![](https://i.imgur.com/W6QaUAX.png)
+![](https://cdn-media-1.freecodecamp.org/imgr/W6QaUAX.png)
 
 [GitHub](https://services.github.com/on-demand/intro-to-github/) is a web based version control which is an amazing tool used by developers to store multiple versions of their projects. There may be times when you may add a feature to your project but may want to keep that bit of code separate. On GitHub you can create seperate branches and store the necessary code. 
 
@@ -27,5 +27,5 @@ If your project is connected to GitHub and you would like to push a commit:
 2. After entering the commit message select commit and push.
 3. Finally select push.
 
-![](https://i.imgur.com/1UUFXnM.png)
-![](https://i.imgur.com/Lih2m92.png)
+![](https://cdn-media-1.freecodecamp.org/imgr/1UUFXnM.png)
+![](https://cdn-media-1.freecodecamp.org/imgr/Lih2m92.png)
diff --git a/guide/english/android-development/firebase/firebase-auth/index.md b/guide/english/android-development/firebase/firebase-auth/index.md
@@ -42,9 +42,9 @@ It is important that after you connect your project to firebase you should speci
 
 * [Enable Google Sign-In in the Firebase console]
 1. In the Firebase console, open the Auth section. 
-![](https://i.imgur.com/mEvXx3A.png)
+![](https://cdn-media-1.freecodecamp.org/imgr/mEvXx3A.png)
 2. On the Sign in method tab, enable the Google sign-in method and click Save.
-![](https://i.imgur.com/tYzAJK1.png)
+![](https://cdn-media-1.freecodecamp.org/imgr/tYzAJK1.png)
 
 There are four steps that must be followed for the sign-in:
 

diff --git a/guide/english/android-development/uploading-an-application-to-playstore/index.md b/guide/english/android-development/uploading-an-application-to-playstore/index.md
@@ -13,7 +13,7 @@ To upload an application to playstore you need to follow the following steps:
 ## Post Obtaining license you need to follow some steps before generating an apk.
 
 1. Every apk must be generated in release mode. The mode can be found in Build variant
-![](https://i.imgur.com/oQc1SKK.png)
+![](https://cdn-media-1.freecodecamp.org/imgr/oQc1SKK.png)
 
 
 2. In build.gradle of the application ensure that the **version code** is unique for every apk build. Playstore will use this number to keep a track of seperate apk versions.

diff --git a/...gn/applied-visual-design/create-a-horizontal-line-using-the-hr-element/index.md b/...gn/applied-visual-design/create-a-horizontal-line-using-the-hr-element/index.md
@@ -14,7 +14,7 @@ This lesson requires you to use the `hr` tag to separate the title and content o
 
 Add this tag between the title and content to create the horizontal line in [this lesson](https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/) on [freeCodeCamp](https://www.freecodecamp.org/). Here is a screenshot from that lesson showing an `hr` element contained within the "cardText" div.
 
-![Example hr](https://i.imgur.com/RMTqXPw.png)
+![Example hr](https://cdn-media-1.freecodecamp.org/imgr/RMTqXPw.png)
 
 ## Resources:
 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)

diff --git a/guide/english/computer-science/dynamic-programming/index.md b/guide/english/computer-science/dynamic-programming/index.md
@@ -13,7 +13,7 @@ An example with Fibonacci's series which is defined as:
 
 This is the tree to find F(5):
 
-![Fibonacci serie's tree](https://i.stack.imgur.com/59Rpw.png)
+![Fibonacci serie's tree](https://cdn-media-1.freecodecamp.org/imgr/59Rpw.png)
 
 To compute F(5) it will need to compute many times the same F(i). Using recursion:
 

diff --git a/guide/english/cplusplus/preprocessors/index.md b/guide/english/cplusplus/preprocessors/index.md
@@ -6,7 +6,7 @@ title: Preprocessors
 
 As the name suggests Preprocessors are programs that processes our source code before compilation. There are a number of steps involved between writing a program and executing a program in C / C++. Let us have a look at these steps before we actually start learning about Preprocessors.
 
-![Img](https://i.imgur.com/Pb0aTkV.png)
+![Img](https://cdn-media-1.freecodecamp.org/imgr/Pb0aTkV.png)
 
 You can see the intermediate steps in the above diagram. The source code written by programmers is stored in the file program.c. This file is then processed by preprocessors and an expanded source code file is generated named program. This expanded file is compiled by the compiler and an object code file is generated named program.obj . Finally the linker links this object code file to the object code of the library functions to generate the executable file program.exe .
 

diff --git a/guide/english/cplusplus/tokens-variables/index.md b/guide/english/cplusplus/tokens-variables/index.md
@@ -18,7 +18,7 @@ Tokens are the smallest units of a program which are important to the compiler.
 * Textbook definition : Variables are named memory locations whose data can be altered.
 
 * But I would like you to think of a variable to be something like a box, something like this : 
-    ![Img](https://i.imgur.com/YdbgWHL.png)
+    ![Img](https://cdn-media-1.freecodecamp.org/imgr/YdbgWHL.png)
 
 So, for example :
    I'm shifting to a new place and I need to arrange my stuff in boxes . Thus there come 2 things to my mind  **What kind of stuff will be stored in the box, so that the size off the box is known (the data type)** and **How do I identify the box ?(Naming the variable)**  
@@ -181,7 +181,7 @@ If a variable is not initialized , it contains a garbage value. For example:
 
 So in terms of boxes, you can imagine this as - 
 
-![Img](https://i.imgur.com/YdbgWHL.png)
+![Img](https://cdn-media-1.freecodecamp.org/imgr/YdbgWHL.png)
 
  ```cpp
  #include<iostream>

diff --git a/guide/english/css/css3-gradients/index.md b/guide/english/css/css3-gradients/index.md
@@ -21,7 +21,7 @@ To create a linear gradient you must define at least two color stops. Color stop
 
 ##### Linear Gradient - Top to Bottom (this is default)
 The following example shows a linear gradient that starts at the top. It starts red, transitioning to green:
-![default-linear-gradient](https://i.imgur.com/2uGfleD.jpg)
+![default-linear-gradient](https://cdn-media-1.freecodecamp.org/imgr/2uGfleD.jpg)
 
 #### Example
 ```
@@ -52,11 +52,11 @@ The following example shows a linear gradient that starts at the top. It starts
 </html>
 ```
 
-![default-linear-gradient](https://i.imgur.com/CvtXCMd.jpg)
+![default-linear-gradient](https://cdn-media-1.freecodecamp.org/imgr/CvtXCMd.jpg)
 
 ##### Linear Gradient - Left to Right
 The following example shows a linear gradient that starts from the left. It starts red, transitioning to green:
-![left-to-right](https://i.imgur.com/e4dRvZR.jpg)
+![left-to-right](https://cdn-media-1.freecodecamp.org/imgr/e4dRvZR.jpg)
 
 #### Example
 
@@ -88,15 +88,15 @@ The following example shows a linear gradient that starts from the left. It star
 </html>
 ```
 
-![left-to-right](https://i.imgur.com/k4FSyXz.jpg)
+![left-to-right](https://cdn-media-1.freecodecamp.org/imgr/k4FSyXz.jpg)
 
 #### Linear Gradient - Diagonal
 
 You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.
 
 The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to green:
 
-![diagonal](https://i.imgur.com/YvtbUBH.jpg)
+![diagonal](https://cdn-media-1.freecodecamp.org/imgr/YvtbUBH.jpg)
 
 #### Example
 
@@ -128,7 +128,7 @@ The following example shows a linear gradient that starts at top left (and goes
 </html>
 ```
 
-![diagonal-exp](https://i.imgur.com/8gKRhAp.jpg)
+![diagonal-exp](https://cdn-media-1.freecodecamp.org/imgr/8gKRhAp.jpg)
 
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->

diff --git a/guide/english/css/layout/flexbox/flex-grow/index.md b/guide/english/css/layout/flexbox/flex-grow/index.md
@@ -7,11 +7,11 @@ The flex-grow property is a flexbox property that allows you to specify the allo
 
 It'll turn your container from this
 
-<img src = "https://i.imgur.com/lFJaBUfh.png">
+<img src = "https://cdn-media-1.freecodecamp.org/imgr/lFJaBUfh.png">
 
 <b><h1>to this</h1></b>
 
-<img src = "https://i.imgur.com/4X8ITZih.png">
+<img src = "https://cdn-media-1.freecodecamp.org/imgr/4X8ITZih.png">
 
 What just happened?
 
@@ -47,7 +47,7 @@ Let's see an example.
 
 First let's create two paragraphs and enable display: flex;
 
-<img src = "https://i.imgur.com/wPqUgsih.png">
+<img src = "https://cdn-media-1.freecodecamp.org/imgr/wPqUgsih.png">
 
 Notice a few things
 
@@ -58,7 +58,7 @@ That empty space is the "free space" that will be allocated to each of the diffe
 
 To see this in action, let's give the first one a class of "ten" and a flex-grow property of 1. Let's also give the second one a class of "twenty" and a flex-grow property of 2.
 
-<img src = "https://i.imgur.com/7n0V1G4h.png">
+<img src = "https://cdn-media-1.freecodecamp.org/imgr/7n0V1G4h.png">
 
 Notice a few things
 
@@ -67,7 +67,7 @@ Notice a few things
 
 As we resize the screen, we also find that the first one shrinks at twice the speed of the second one.
 
-<img src = "https://i.imgur.com/pa4grM8h.png">
+<img src = "https://cdn-media-1.freecodecamp.org/imgr/pa4grM8h.png">
 
 #### More Information:
 

diff --git a/guide/english/css/padding/index.md b/guide/english/css/padding/index.md
@@ -48,7 +48,7 @@ padding-left: 1em;
 ## Where in box model
 The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders.
 
-![The CSS Box Model](https://i.imgur.com/S0QPDi4.png)
+![The CSS Box Model](https://cdn-media-1.freecodecamp.org/imgr/S0QPDi4.png)
 
 
 ## Common Pitfalls

diff --git a/guide/english/css/properties/background-position-property/index.md b/guide/english/css/properties/background-position-property/index.md
@@ -8,7 +8,7 @@ The background-property sets the position from where the background image should
 ```css
 /* setting background-image of HTML doc */
 body {
-  background-image: url('https://i.imgur.com/6Z2VStD.png');
+  background-image: url('https://cdn-media-1.freecodecamp.org/imgr/6Z2VStD.png');
   background-repeat: no-repeat;
   background-position: right top;
 }

diff --git a/guide/english/css/using-css-animations/index.md b/guide/english/css/using-css-animations/index.md
@@ -81,7 +81,7 @@ For the CSS part :
     }
 }
 ```
-![Imgur](https://imgur.com/sczZjwm.gif)
+![Imgur](https://cdn-media-1.freecodecamp.org/imgr/sczZjwm.gif)
 
 
 #### More Information:

diff --git a/guide/english/css/using-css-transitions/index.md b/guide/english/css/using-css-transitions/index.md
@@ -44,7 +44,7 @@ This example performs a four-second font size transition with a two-second delay
 }
 ```
 
-![Without CSS Transition](https://imgur.com/Yl0Bxwn)
+![Without CSS Transition](https://cdn-media-1.freecodecamp.org/imgr/Yl0Bxwn.gif)
 
 Without a transition, this element will double in width as soon as the user hovers over it. But we might want a smoother movement. We can add a transition like so:
 
@@ -57,7 +57,7 @@ Without a transition, this element will double in width as soon as the user hove
 }
 ```
 
-![With CSS Transition](https://imgur.com/wgscRNa)
+![With CSS Transition](https://cdn-media-1.freecodecamp.org/imgr/wgscRNa.gif)
 
 The `transition` CSS property is short-hand for several possible properties:
 

diff --git a/guide/english/git/difference-git-github/index.md b/guide/english/git/difference-git-github/index.md
@@ -5,7 +5,7 @@ title: Difference between Git and GitHub
 
 Git and GitHub are two different things. [Git](https://git-scm.com/) is the [version control system](https://en.wikipedia.org/wiki/Version_control), while [GitHub](https://github.com/) is an online service for hosting Git repos and helping people collaborate on writing software. However, the two are often confused due to their similar names, and because of the fact that GitHub builds on top of Git. Also, many websites and articles don't make the distinction between them clear enough.
 
-![Git is not GitHub](https://i.imgur.com/EkjwJdr.png)
+![Git is not GitHub](https://cdn-media-1.freecodecamp.org/imgr/EkjwJdr.png)
 
 ### Git
 

diff --git a/guide/english/html/html-forms/index.md b/guide/english/html/html-forms/index.md
@@ -64,7 +64,7 @@ Code example:
   <input type="submit" value="Submit">
 </form>
 ```
-![Screenshot of Code Above](https://i.imgur.com/r0br52L.png "Screenshot of Code Above")
+![Screenshot of Code Above](https://cdn-media-1.freecodecamp.org/imgr/r0br52L.png "Screenshot of Code Above")
 
 SETTING MINIMUM AND MAXIMUM VALUES ON INPUTS OF TYPE "NUMBER"
 

diff --git a/guide/english/html/layouts/index.md b/guide/english/html/layouts/index.md
@@ -7,7 +7,7 @@ Layouts organize different areas of the web page.
 
 Almost every web page we see can be divided into boxes, that can be arranged into specific order to create that web page. The image below is one such example.
 
-![Sample of Website Design - www.codementor.io](http://i.imgur.com/Z1DSMYC.png)
+![Sample of Website Design - www.codementor.io](https://cdn-media-1.freecodecamp.org/imgr/Z1DSMYC.png)
 
 > Websites often display content in multiple columns (like a magazine or newspaper).
 

diff --git a/guide/english/java/access-modifiers/index.md b/guide/english/java/access-modifiers/index.md
@@ -12,7 +12,7 @@ Java provides 4 levels of access modifiers. This means that you can modify acces
 These access modifiers can be applied to fields, methods and classes (Classes are a special case, we will look at them at the end of this artice). Here is a quick overview<sup>1</sup> of what the access levels are for each Access Modifier:
 
 #### Access Modifiers Table Reference: 
-![Access Modifiers Table](https://i.imgur.com/zoMspyn.png)
+![Access Modifiers Table](https://cdn-media-1.freecodecamp.org/imgr/zoMspyn.png)
 
 #### Private Access Modifier
 Allows a variable or method to only be accessed in the class in which it was created. No other class beyond the class that created the variable or method can access it. This is closely similar to your internal organs. They are only accessible to the owner. To make a variable or method private, you simply append the `private` keyword before the variable or method type, like `private int age`.

diff --git a/guide/english/javascript/concurrency-model-and-event-loop/index.md b/guide/english/javascript/concurrency-model-and-event-loop/index.md
@@ -33,7 +33,7 @@ So to summarize whenever a function is invoked it is pushed into the call stack
 
 Now we know from this that JavaScript can execute one thing at a time but that's not the case with the Browser. The Browser has it's own set of API's like setTimeout, XMLHttpRequests which are not specified in the JavaScript runtime. In fact if you look through the source code of V8, the popular JavaScript runtime that powers browsers like Google Chrome you won't find any definitions for it. It's because these special web API's exist in the browser environment not inside the javascript environment and you can say that these apis introduces concurrency into the mix. Let's look at a diagram to understand the whole picture.
 
-![Concurrency and Event Loop Model](https://i.imgur.com/rnQEY7o.png)
+![Concurrency and Event Loop Model](https://cdn-media-1.freecodecamp.org/imgr/rnQEY7o.png)
 
 Some more terms are introduced
 

diff --git a/...script/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md b/...script/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md
@@ -12,17 +12,17 @@ This is how the code result looks like:
 
 Initial screen: 
 
-<img src="https://i.imgur.com/jrnu6mE.png" width="200px"></img>
+<img src="https://cdn-media-1.freecodecamp.org/imgr/jrnu6mE.png" width="200px"></img>
 
 
 Dropdown opened: 
 
-<img src="https://i.imgur.com/gszPtRa.png" width="200px"></img>
+<img src="https://cdn-media-1.freecodecamp.org/imgr/gszPtRa.png" width="200px"></img>
 
 
 Dropdown with option selected: 
 
-<img src="https://i.imgur.com/TKXxZGF.png" width="200px"></img>
+<img src="https://cdn-media-1.freecodecamp.org/imgr/TKXxZGF.png" width="200px"></img>
 
 
 #### HTML:

diff --git a/guide/english/logic/monty-hall-problem/index.md b/guide/english/logic/monty-hall-problem/index.md
@@ -9,11 +9,11 @@ The problem defines as follows; You are in a game show and there are 3 doors, ea
 
 It turns out that the choice does matter and it is actually to your benefit to switch your decision to Door 3! Here's why. When you chose Door 1 from the 3 closed doors, you had a 1 out of 3 chance that you picked the right one. Both Door 2 and Door 3 also have a 1 out of the 3 chance of having a car behind it. You could also say that Doors 2 and 3 have a 2 out of 3 chance of having a car behind it *combined*.
 
-![Probability before revealing a goat](https://i.imgur.com/8EsVvZk.png "Probability before revealing a goat")
+![Probability before revealing a goat](https://cdn-media-1.freecodecamp.org/imgr/8EsVvZk.png "Probability before revealing a goat")
 
 Now, when the host opens Door 2 and it contains a goat you now have more information about the problem. Remember that Doors 2 and 3 have a combined probability containing a car 2/3rds of the time. With the door reveal you know that Door 2 does not have a car. This reveal does not change the combined probability of the two doors, that's the key takeaway here! Since we now know Door 2 has a 0/3 chance of showing a car, you can now say that Door 3 has a 2/3rds chance of containing a car. Combining the probabilities of Door 2 and Door 3 still add up to 2/3rds as it was before Door 2 opened. Door 1 remains unchanged and only has a 1/3rd chance. So, if you decide to switch you go from roughly a 33.33% chance to 66.67% of picking the car. In other words, you are doubling your chances of success by switching!
 
-![Probability after revealing a goat](https://i.imgur.com/V2JzAka.png "Probability after revealing a goat")
+![Probability after revealing a goat](https://cdn-media-1.freecodecamp.org/imgr/V2JzAka.png "Probability after revealing a goat")
 
 Yes, it is possible that Door 1 had the car all along and Monty tricked you. That doesn't matter. You are gambling by taking the deal but you're gambling smart. You make your best decision with the information you're given and let the dice roll. In the long run, you perform better switching than a contestant who decides to keep their first pick. In the end, Monty actually tricks himself offering you a better deal.
 

diff --git a/guide/english/mathematics/2-by-2-determinants/index.md b/guide/english/mathematics/2-by-2-determinants/index.md
@@ -29,7 +29,7 @@ Then:
 
 The absolute value of the determinant is equal to the area of the parallelogram. 
 
-<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Area_parallellogram_as_determinant.svg/1044px-Area_parallellogram_as_determinant.svg.png" width="300"> <a href="https://i.stack.imgur.com/gCaz3.png">Here</a> is an interesting visual proof of this property.
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Area_parallellogram_as_determinant.svg/1044px-Area_parallellogram_as_determinant.svg.png" width="300"> <a href="https://cdn-media-1.freecodecamp.org/imgr/gCaz3.png">Here</a> is an interesting visual proof of this property.
 
 Note: If the determinant equals zero, there are no solutions (intersections) to the system (aka the lines are parallel). 
 

diff --git a/guide/english/mathematics/polygons/index.md b/guide/english/mathematics/polygons/index.md
@@ -3,7 +3,7 @@ title: Polygons
 ---
 ## Polygons
 
-![img](https://i.stack.imgur.com/ALoC9.png)
+![img](https://cdn-media-1.freecodecamp.org/imgr/ALoC9.png)
 
 A polygon is a 2-dimensional shape formed with straight lines. Examples include triangles, squares, pentagons, and hexagons.