How to add Unsplash images to your blog without downloading

Utpal Kumar
13 Jun 202105:53

TLDRIn this informative video, the presenter teaches viewers how to integrate Unsplash images directly into their blog posts without the need to download and host them on their own server. The process involves using the image's URL from Unsplash and embedding it into the blog's HTML code. The video demonstrates how to use both random and fixed images, and how to adjust the image dimensions to fit the blog's layout. The presenter also teases future content on creating a Jekyll website and customizing it with themes and various features.

Takeaways

  • 🌐 Use Unsplash for free high-resolution photos in your blog without downloading them.
  • 🔗 Directly link your blog images to Unsplash images to save on your hosting service's storage space.
  • 📚 Learn how to set a teaser or preview image for your blog post using Unsplash's image URL.
  • 🔄 Refresh your website to see a random Unsplash image change for dynamic content.
  • 📎 For a fixed image, add the Unsplash image ID to the source code to maintain consistency.
  • 🔍 Search for specific images on Unsplash and copy the ID to link to your blog post.
  • 📏 Adjust the dimensions of the Unsplash image by appending the desired size to the URL.
  • 🖼️ Customize the image size to fit your blog's layout, such as 300x300 or 600x300.
  • 💻 Find and use specific images, like a computer, by searching on Unsplash and linking them with the correct ID.
  • 📝 Change the description of the image to fit the context of your blog post.
  • 🚀 Stay tuned for future videos on creating a Jekyll website and setting up your local environment.

Q & A

  • What is the purpose of the video?

    -The video demonstrates how to add images from Unsplash to your blog without downloading them, thus saving hosting space.

  • What is Unsplash?

    -Unsplash is a website that provides free high-resolution photos which can be used in various projects, including blogs.

  • Why is it beneficial to link directly to an Unsplash image instead of downloading it?

    -Linking directly to an Unsplash image saves storage space on your hosting service, as you do not need to host the image yourself.

  • How can you insert a random image from Unsplash into your blog post?

    -You can insert a random image by using the HTTPS source from Unsplash.com and adding it to your blog post's code.

  • How do you use a specific image from Unsplash in your blog post?

    -To use a specific image, find the image on Unsplash, note its ID, and then use the ID in the source code for your blog post.

  • What if you want to fix the dimensions of the Unsplash image in your blog post?

    -You can specify the dimensions by appending the desired width and height to the image URL in your blog post's code.

  • Can you change the dimensions of the random image to suit your blog's layout?

    -Yes, you can easily adjust the dimensions of the random image by specifying a new width and height in the blog post's code.

  • How do you find a specific image on Unsplash to use in your blog post?

    -You can search for images on Unsplash using keywords, and once you find the desired image, copy its ID and use it in your blog post's code.

  • What is the benefit of using the source.unsplash.com link for images?

    -Using the source.unsplash.com link allows you to directly embed an image from Unsplash, ensuring that it displays correctly and is updated if the image changes on Unsplash.

  • How does the process of adding Unsplash images to your blog help with managing hosting resources?

    -By linking to Unsplash images rather than hosting them, you conserve your hosting service's storage space and potentially reduce costs associated with data transfer.

  • Will the images from Unsplash always display the same in your blog post?

    -If you link to a specific image using its ID, it will remain the same. However, if you use a random image feature, the image may change each time the page is refreshed.

  • Is there a way to ensure that the Unsplash image fits well with the blog's aesthetic?

    -Yes, you can search for images on Unsplash that match your blog's theme and aesthetic, and use the image's ID to ensure it fits well within your blog's design.

Outlines

00:00

📸 Linking Unsplash Images to Your Blog Posts

The first paragraph of the video script introduces viewers to the process of embedding images from Unsplash.com directly into blog posts. The speaker explains the benefits of using Unsplash for free high-resolution photos and suggests linking directly to Unsplash images rather than downloading and hosting them, which saves storage space. The tutorial demonstrates how to set a teaser or preview image for a blog post using the image's HTTPS source from Unsplash. It also covers how to use random images for variety and how to specify a fixed image by its ID. Additionally, the paragraph shows how to adjust the dimensions of the images to fit specific requirements. The speaker concludes by emphasizing the ease of linking Unsplash images without the need for hosting them on one's own site.

05:01

🛠️ Creating a Jekyll Website

The second paragraph shifts the focus to the creation of a Jekyll website. The speaker mentions that they have set up a local website and will guide viewers through the process of creating a Jekyll site in future videos. They reference using a modified theme called 'Minimal Mistakes' and express their intention to start from the basics, teaching how to install Jekyll on a local computer, build a website, add images, create blog posts, organize collections, and apply different themes. The speaker encourages viewers to stay tuned for these upcoming tutorials and to subscribe to the channel for updates.

Mindmap

Keywords

💡Unsplash

Unsplash is a website that provides free high-resolution photos. It is mentioned in the video as a source for blog images. The significance of Unsplash in the video is to illustrate how bloggers can legally and freely use high-quality images in their content without the need for downloading and hosting the images themselves, thus saving storage space on their hosting service.

💡Blog

A blog is a regularly updated website or web page, typically run by an individual or small group, that is written in an informal or conversational style. In the context of this video, the blog is the platform where images from Unsplash are being integrated. The video demonstrates how to enhance a blog's visual appeal and SEO by adding relevant and attractive images.

💡Teaser Image

A teaser image, also known as a preview image, is a visual representation used to draw attention and give a glimpse of the content that follows. In the video, the teaser image is set using code and is crucial for attracting viewers to read the blog post. It is an example of how the video guides on dynamically changing these images to keep the blog fresh and engaging.

💡Hosting Service

A hosting service is a company that provides the resources and technologies needed for a website or webpage to be viewed in the Internet. The video discusses the use of a hosting service in relation to storing images. By linking directly to Unsplash images, the video suggests a way to conserve the storage space provided by the hosting service.

💡Code

In the context of this video, code refers to the programming language used to create and manipulate the content on a blog. The video instructs viewers on how to use specific code to link Unsplash images directly to their blog posts, which is a key technique to avoid downloading and hosting the images themselves.

💡Image ID

An Image ID is a unique identifier assigned to each photo on Unsplash. The video explains how to find and use this ID to link a specific Unsplash image to a blog post. This is important as it allows for a fixed image to be used rather than a random selection, providing consistency in the blog's presentation.

💡Random Image

A random image refers to the selection of an image from Unsplash without a specific choice, allowing for a different image to appear each time the page is refreshed. The video demonstrates how to implement this feature for a dynamic and changing blog appearance, which can engage readers by presenting fresh visuals.

💡Dimensions

Dimensions refer to the height and width of an image. The video shows how to specify the dimensions of an image when linking it to a blog post, ensuring that the image fits well within the blog's layout. This is important for maintaining a professional and aesthetically pleasing blog design.

💡Jekyll

Jekyll is a static site generator that transforms plain text files into websites or blogs. The video hints at future content about creating a Jekyll website, which is a step beyond simply adding images to a blog. It suggests a more comprehensive approach to building and managing a professional blog platform.

💡Theme

In web design, a theme refers to a pre-designed template that determines the appearance and layout of a website. The video mentions using a modified theme called 'Minimal Mistakes' for the local website shown. The choice of theme can greatly influence the look and feel of a blog, and is part of the broader discussion on customizing a blog's presentation.

💡SEO

SEO stands for Search Engine Optimization, which is the process of improving a website's visibility on search engines. While not explicitly mentioned in the video, the use of relevant images from Unsplash can contribute to better SEO, as search engines often favor pages with engaging media content. The video's instructions on integrating images can indirectly aid in SEO efforts.

Highlights

Unsplash provides free high-resolution photos for blog use without the need for downloading.

Directly link your blog to Unsplash images to save storage space on your hosting service.

Demonstration of linking local website images to the Unsplash class.

Using HTTPS source from Unsplash to set a teaser or preview image for blog posts.

The option to use a random image from Unsplash for dynamic content.

How to set a fixed image for a blog post by using the image ID from Unsplash.

Searching for a specific image on Unsplash and obtaining its unique ID.

Linking a blog post to a specific Unsplash image using the image ID and Unsplash URL format.

Automatic refresh of the blog post to display the new linked image.

Adjusting the dimensions of the linked Unsplash image to fit the blog post layout.

Specifying image dimensions such as 300x300 or 600x300 for a custom look.

Finding and using a specific image, like a computer, from Unsplash with the correct dimensions.

Changing the description of the linked image to fit the blog post's theme.

Avoiding the need to host images on your own site by using Unsplash's hosting.

Future videos will teach how to create a Jekyll website and set it up locally.

Introduction to using the 'Minimal Mistakes' theme for Jekyll websites.

Guidance on installing Jekyll and building up websites from scratch.

Instructions on adding images, creating blog posts, collections, and themes to a website.