{"id":1490,"date":"2018-02-14T14:40:13","date_gmt":"2018-02-14T19:40:13","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1490"},"modified":"2021-01-07T23:35:40","modified_gmt":"2021-01-08T04:35:40","slug":"html-get-random-stock-images-web-page-using-unsplash-com","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/02\/14\/html-get-random-stock-images-web-page-using-unsplash-com\/","title":{"rendered":"HTML: How to get random stock images on your web page using unsplash.com"},"content":{"rendered":"\n<p>The website <a href=\"https:\/\/unsplash.com\/\">https:\/\/unsplash.com<\/a> provides a free service that allows web developers to use random images of any size on their websites. All you have to do is place a URL like this in your HTML img tag, with the size of the image listed at the end of the URL. For example, this will produce a 200 by 200 pixel random image:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">https:\/\/source.unsplash.com\/random\/200x200<\/pre>\n\n\n\n<p>If you need a grid of images, and you want them all to be unique, specify different sizes for each image in the grid. For example, in this case, I changed them each by 1 pixel in width from the previous. (I can do this because the size of the images on my web page is being controlled by CSS.)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;section class=\"portfolio\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/200x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/201x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/202x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/203x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/204x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/205x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/206x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/207x200\" alt=\"\">\n   &lt;img src=\"https:\/\/source.unsplash.com\/random\/208x200\" alt=\"\">\n&lt;\/section>\n<\/pre>\n\n\n\n<p><iframe loading=\"lazy\" id=\"iframe_drop_shadow\" src=\"https:\/\/www.bluegalaxy.info\/new\/photo_grid\/\" name=\"photo_grid\" width=\"780\" height=\"760\" scrolling=\"no\"><script language=\"JavaScript\"><br \/>\n    function refreshIframe(name) {<br \/>\n        var ifr = document.getElementsByName(name)[0];<br \/>\n        ifr.src = ifr.src;<br \/>\n    }<br \/>\n    <\/script><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span>\n<p>Refresh Grid<\/p>\n<p>\u00a0<\/p>\n<p><\/p><\/iframe><\/p>\n\n\n\n<p><span class=\"kw1\">This works for other size images as well. For example:<br><\/span><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">https:\/\/source.unsplash.com\/random\/780x200<\/pre>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" src=\"https:\/\/source.unsplash.com\/random\/800x200\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The website https:\/\/unsplash.com provides a free service that allows web developers to use random images of any size on their websites. All you have to do is place a URL like this in your HTML img tag, with the size of the image listed at the end of the URL. For example, this will produce &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/02\/14\/html-get-random-stock-images-web-page-using-unsplash-com\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">HTML: How to get random stock images on your web page using unsplash.com<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[105],"class_list":["post-1490","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1490"}],"version-history":[{"count":14,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1490\/revisions"}],"predecessor-version":[{"id":3318,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1490\/revisions\/3318"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}