{"id":44191,"date":"2019-07-10T07:36:51","date_gmt":"2019-07-10T12:36:51","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=44191"},"modified":"2021-08-16T16:00:36","modified_gmt":"2021-08-16T20:00:36","slug":"adding-a-mobile-friendly-gallery-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/","title":{"rendered":"Adding a Mobile Friendly Gallery in WordPress"},"content":{"rendered":"

Do you need an image gallery for your site, but most of your visitors are on mobile? Making the gallery look just right on a phone or tablet can be troublesome since most are designed for larger monitors. <\/p>\n\n\n\n

Luckily there\u2019s a photo gallery plugin that is designed to be displayed on mobile devices. Photo Gallery by 10Web is designed to resize images automatically so they look clean on most phones and smaller screens.<\/p>\n\n\n\n

So, follow along and we\u2019ll show you how to add a mobile-friendly gallery<\/strong> to your WordPress website. <\/p>\n\n\n\n

<\/p>

(This article assumes you have a live WordPress website. Not quite there yet? That\u2019s okay! We can get you up and running with WordPress Hosting<\/a>.)<\/p>\n\n\n\n

Install Photo Gallery by 10Web<\/h2>\n\n\n\n
  1. Log into your WordPress Dashboard<\/a>.<\/li>
  2. Click Plugins then Add New.<\/li>
  3. Type \u2018photo gallery\u2019 in the search field.<\/li>
  4. You will see Photo Gallery by 10Web<\/em> listed, click the Install Now<\/strong> button.<\/li>
  5. Once it has been installed, click the Activate<\/strong> button.<\/li><\/ol>\n\n\n\n

    Adding a Mobile Friendly Gallery<\/h2>\n\n\n\n

    Now that the Photo Gallery plugin is intalled, we\u2019ll show you how to add a gallery to your site.<\/p>\n\n\n\n

    1. In your WordPress Dashboard, click the Photo Gallery<\/strong> link.<\/li>
    2. Click the Add New<\/strong> button.<\/li>
    3. Enter a name in the \u201cGallery Title<\/strong>\u201d field.<\/li>
    4. Click the Add<\/strong> button to use a Preview Image<\/em>.<\/li>
    5. Click the Add Images<\/strong> link to upload new photos. You can select the file location, or drag & drop the images into the Dashboard to add them.<\/li>
    6. Once the images have been uploaded, click the Select All<\/strong> button then the Add selected images to gallery<\/strong> button.<\/li>
    7. Click the Publish<\/strong> button to create the gallery. You will see a message stating \u201cItem successfully saved.\u201d<\/li>
    8. To add the gallery block to WordPress, edit a Page or Post. Then, click the plus sign with a circle around it \"\" and choosing the Photo Gallery<\/strong> option.<\/li>
    9. Select the gallery and display type from the next menu and click the Insert into post<\/strong> button.<\/li><\/ol>\n\n\n\n

      Now you know how to add an image gallery to your WordPress site, that will also look good on mobile devices. For further reading, see our WordPress Education Channel<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Do you need an image gallery for your site, but most of your visitors are on mobile? Making the gallery look just right on a phone or tablet can be troublesome since most are designed for larger monitors. Luckily there\u2019s a photo gallery plugin that is designed to be displayed on mobile devices. Photo Gallery Read More ><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4325,56],"tags":[],"class_list":["post-44191","post","type-post","status-publish","format-standard","hentry","category-wordpress-hosting","category-wordpress"],"acf":[],"yoast_head":"\nAdding a Mobile Friendly Gallery in WordPress | Inmotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding a Mobile Friendly Gallery in WordPress | Inmotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Do you need an image gallery for your site, but most of your visitors are on mobile? Making the gallery look just right on a phone or tablet can be troublesome since most are designed for larger monitors. Luckily there\u2019s a photo gallery plugin that is designed to be displayed on mobile devices. Photo Gallery Read More >\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-10T12:36:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-16T20:00:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\"},\"headline\":\"Adding a Mobile Friendly Gallery in WordPress\",\"datePublished\":\"2019-07-10T12:36:51+00:00\",\"dateModified\":\"2021-08-16T20:00:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\"},\"wordCount\":362,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png\",\"articleSection\":[\"WordPress Hosting\",\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\",\"name\":\"Adding a Mobile Friendly Gallery in WordPress | Inmotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png\",\"datePublished\":\"2019-07-10T12:36:51+00:00\",\"dateModified\":\"2021-08-16T20:00:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png\",\"width\":31,\"height\":29},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding a Mobile Friendly Gallery in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding a Mobile Friendly Gallery in WordPress | Inmotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Adding a Mobile Friendly Gallery in WordPress | Inmotion Hosting","og_description":"Do you need an image gallery for your site, but most of your visitors are on mobile? Making the gallery look just right on a phone or tablet can be troublesome since most are designed for larger monitors. Luckily there\u2019s a photo gallery plugin that is designed to be displayed on mobile devices. Photo Gallery Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2019-07-10T12:36:51+00:00","article_modified_time":"2021-08-16T20:00:36+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b"},"headline":"Adding a Mobile Friendly Gallery in WordPress","datePublished":"2019-07-10T12:36:51+00:00","dateModified":"2021-08-16T20:00:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/"},"wordCount":362,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png","articleSection":["WordPress Hosting","WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/","name":"Adding a Mobile Friendly Gallery in WordPress | Inmotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png","datePublished":"2019-07-10T12:36:51+00:00","dateModified":"2021-08-16T20:00:36+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/07\/add-block.png","width":31,"height":29},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/adding-a-mobile-friendly-gallery-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Adding a Mobile Friendly Gallery in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5fbfcaed32a2672fb83ab312f5b7237b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/john-paul\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/44191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=44191"}],"version-history":[{"count":10,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/44191\/revisions"}],"predecessor-version":[{"id":83346,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/44191\/revisions\/83346"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=44191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=44191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=44191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}