Vill du skapa ett image gallery i WordPress?
I ett image gallery kan du add to bilder i row och columns. This allows you to display more photos in less space while also making it easier for users to browse them.
I den här artikeln visar vi dig hur du enkelt skapar ett image gallery i WordPress som får dina images att se ännu bättre ut.
Varför skapa ett galleri för images i WordPress?
WordPress gör det superenkelt att add to en image till dina blogginlägg och pages. Du behöver bara add to the Imagely block och upload your image.
Men om du addar flera images till din WordPress website, kommer de att appear one after another. Det ser inte så bra ut och dina användare måste rulla mycket för att kunna view alltihop.
Genom att skapa ett gallery allow du att visa images i en grid layout med columns och rows. You kan visa thumbnails för dina images och användarna kan clicka på dem för att se hela bilden.
På så sätt kan you visa fler bilder på mindre utrymme, och det kommer att se mycket mer professionellt ut.
Om du till exempel skapar en website för fotografering för att visa dina images, kan du genom att lägga till ett gallery visa ditt arbete på ett estetiskt tilltalande sätt.
Med WordPress kan du enkelt skapa ett gallery för images med hjälp av blocket Gallery i Gutenberg block editor.
Du kan också använda WordPress tillägg för gallerier för att skapa ännu bättre gallerier med fler funktioner.
Med detta sagt, låt oss se hur du enkelt kan skapa ett image gallery i WordPress.
I den här tutorialen visar vi två metoder för att skapa ett gallery, och du kan använda länkarna under för att hoppa till den metod du väljer:
Videohandledning
Om du föredrar skriftliga instruktioner kan du fortsätta läsa.
Metod 1: Skapa ett Image Gallery med WordPress Block Editor
Den här metoden är för att skapa ett image gallery med hjälp av WordPress block editor. Tänk dock på att den här funktionen är mycket grundläggande och inte erbjuder många alternativ för customomize.
Först måste du öppna ett befintligt eller nytt post/page där du vill skapa galleriet från WordPress admin sidebar.
När du är där klickar du bara på knappen ”+” högst upp till vänster på vyn. Härifrån kan du hitta och add the Gallery block till page eller post.
När du har gjort det klickar du på knappen ”Upload” för att ladda upp nya image-filer från din dator.
Om du däremot vill uppladda images från mediabiblioteket måste du istället clicka på knappen ”Media Library”.
Om du klickar på knappen ”Upload” kan du i allmänhet uploada ett foto från datorn i taget.
Du kan dock välja och öppna flera images genom att hålla ned Ctrl-tangenten på ditt tangentbord.
När du har uploadat alla bilder kan du lägga till captions genom att clicka på ikonen ”Add Caption” i blockets toolbar högst upp på de enskilda bilderna.
Du kan också add alt text till images från block panelen till höger.
Om du väljer knappen ”Mediabibliotek” kan du välja flera images till your gallery all at once.
När du väljer images kan du också enter bildens alt-text, titel och caption från panelen attachment details på höger sida.
När du har lagt till alla images klickar du bara på knappen ”Create a new gallery”.
Då kommer du till sidan ”Edit Gallery” i prompten för mediabiblioteket.
Härifrån kan du välja enskilda images och add to en caption, rubrik, description eller alt text till dem.
När du är klar klickar du helt enkelt på knappen ”Insert Gallery” längst ner till höger.
Det gallery med images som du har skapat kommer nu att add to WordPress editor.
Du kan också customize det ytterligare genom att välja Gallery-blocket och konfigurera dess inställningar från blockpanelen till höger.
Till exempel kan du använda slidern ”Columns” för att bestämma antalet columns och rows för dina gallerier.
You can even toggle the ”Crop Image” switch to crop thumbnails for better alignment.
Från alternativen ”Link to” kan du välja None om du vill att dina användare bara ska kunna viewa ditt foto. Detta alternativ inaktiverar click-funktionen för dina images.
Om du däremot väljer alternativet ”Media File” blir bilderna klickbara och bildfilen öppnas när du klickar på den. På samma sätt kommer bilagssidan att öppnas om du väljer alternativet ”Bilagssida”.
När du är nöjd med inställningarna klickar du på knappen ”Publicera” eller ”Update” högst upp för att store dina inställningar.
Slutligen kan du besöka din WordPress blogg för att se image gallery i action.
Nu har du på ett enkelt sätt skapat ett image gallery för din website. Men du kommer snart att notera att det saknar några viktiga funktioner.
Till exempel kommer dina images antingen ej att vara klickbara eller öppnas på en new page. Om du länkar dina galleries images till media file eller bilagssidan måste användarna klicka på bakåtknappen för att view the gallery igen.
Detta är ej användarvänligt och kan avskräcka användare från att utforska din website.
På samma sätt beror galleriets appearance också på det WordPress theme som du använder.
Dessutom kan du inte organisera dina gallerier i album, ämnen, taggar och mer. Ditt galleri lagras ej någonstans och om du behöver add to samma galleri igen måste du skapa det på nytt.
Om du vill add to gallerier som ser mer professionella ut ska du använda nästa metod.
Metod 2: Skapa ett image-galleri med hjälp av Envira Gallery (rekommenderas)
Om du vill skapa ett mer funktionellt och estetiskt tilltalande image gallery för din WordPress site, då är den här metoden något för dig.
Vi kommer att använda pluginet Envira Gallery eftersom det är det bästa pluginet för WordPress-bildgallerier på marknaden.
Envira Gallery allow you to easily create fully responsive, beautiful, and modern image galleries in WordPress. Det är supersnabbt och kommer med många funktioner som gillar en lightbox popup, enkel navigation av bilder, en drag and drop-byggare och professionella templates för gallerier.
Först måste du installera och aktivera plugin-programmet Envira Gallery. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Efter aktivering, heada över till Envira Gallery ” Settings page från WordPress dashboard för att enter din license key.
Du kan hämta den här nyckeln från ditt account på Envira Gallerys website.
Note : Envira Gallery har också ett gratis plugin som du kan använda. Pro-versionen kommer dock att användas i denna tutorial för att utvalda funktioner ska kunna låsas upp.
När du har kontrollerat din license key kan du heada över till Envira Gallery ” Add New page från sidebaren i WordPress för att börja skapa ditt första galleri.
När du är där, ange en Rubrik för ditt gallery och klicka sedan på knappen ”Select files from computer” för att uploada dina images.
Du kan också uploada images från ditt mediabibliotek i WordPress genom att clicka på knappen ”Select files from other sources”.
Tänk på att om du använder det här alternativet kan du bara uploada en enda image åt gången från mediabiblioteket.
När du har uploadat bilderna rullar du ner till ”Gallery” section, där alla dina images nu kommer att visas.
Därefter kan du clicka på pencil iconen högst upp på varje image för att öppna ”Edit Metadata” på vyn.
Härifrån kan du add to caption, status, rubrik och alternativ text för enskilda images.
När du är klar, glöm inte att klicka på knappen ”Save Metadata” för att save your image captions.
Därefter måste du klicka på tabben ”Configuration” från sidebaren till vänster.
Härifrån kan du ändra layouten för ditt gallery, inklusive antalet columns, lazy loading av bilder, bildstorlek, positionering av titel och caption, marginaler, höjder, thumbnail-storlekar, bilddimensioner med mera.
Därefter byter du till fliken ”Lightbox” från vänster sidebar och kontrollerar alternativet ”Aktivera Lightbox”.
Detta alternativ gör det möjligt för användare att förstora images och browsing dem utan att lämna page.
Du kan låta de andra standardinställningarna vara som de är eftersom de fungerar mycket bra för de flesta webbplatser, men du kan reviewer alternativen och ändra dem om du gillar.
Klicka sedan på tabben ”Mobile” för att konfigurera dina inställningar för gallery för mobila enheter.
Härifrån kan du välja bilddimensioner för mobila enheter, aktivera eller inaktivera Lightbox, aktivera eller inaktivera captions till bilder med mera.
Efter det kan du granska fler alternativ som gillar gallery slug och lägga till custom CSS från avsnittet ”Misc”.
När du är nöjd med dina Settings klickar du bara på knappen ”Publicera” högst upp för att store dina ändringar.
Därefter måste du öppna ett post eller en page där du vill embedda your gallery.
När du är där klickar du på knappen ”+” högst upp till vänster på vyn för att öppna block-menyn.
Därefter letar du bara upp och addar blocket Envira Gallery till sidan eller posten.
När du har gjort det måste du lägga till ditt image gallery från dropdown-menyn i Envira Gallery-blocket.
Slutligen klickar du på knappen ”Update” eller ”Publicera” högst upp för att save your changes.
Nu kan du viewa ditt image gallery på din WordPress website.
Here, you will notice that clicking on any image in the gallery will open it in full size with the lightbox effect.
You can also browse images in this popup by pressing the left and right arrow keys on the screen or your keyboard.
Bonus: Optimera galleries images för search engines
Det är viktigt att optimera alla dina galleries images utan att förlora webbkvalitet så att search engines kan indexera dem för rätt keywords.
Detta kan bidra till att öka hastigheten för att hämta din page, förbättra användarupplevelsen, öka delningar i sociala media och ge organisk trafik till din website.
Du kan enkelt optimera dina images i galleriet genom att lägga till alt-text på bilagssidan. Denna description visas för search engine crawlers och hjälper dina gallerier med images att ranka högre.
Dessutom kan du också använda All in One SEO, som är det bästa WordPress SEO plugin på marknaden.
Den levereras med en Image SEO addon som automatiskt ställer in din alt-text, bildtitlar, captions och mer. Det kommer också att add to en korrekt image sitemap och andra SEO funktioner för att förbättra din SEO ranking.
För mer information, se vår AIOSEO review.
Utöver det bör du också använda beskrivande filnamn för dina images, använda relevanta keywords och dela dina gallerier på social media. För fler tips, se vår guide för nybörjare om hur man optimerar images för search engines.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett bildgalleri i WordPress. Du kanske också vill se vår jämförelse mellan WebP vs. PNG vs. JPEG: det bästa bildformatet för WordPress och våra expertval av de bästa WordPress-pluginsen för att hantera bilder.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
WPBeginner Staff
Are you using any other plugins that might cause conflict? Try deactivating all plugins and see if this fixes the problem.
Catrin Siân Lloyd
Hi I’m a wordpress beginner! My gallery is somehow linked to the homepage…so when clicked the image takes you back to the ’Home page’ and not to either a lightbox effect or to the image itself. How do I fix this? Catrin
Michele
Hi, is it possible to add a lightbox gallery like this in a widget area? Thanks-
Michele
Tyler
I have a question. I use JQuery plugin for and hovering pin it button. I was wondering if you know of a solution when you click on the photo gallery for carousel mode there is no pin it button. I would I be able to add that button to the gallery?
Diane Lara
When someone is viewing my gallery of images with minimal captions, when they click on an image, I would like them to see a larger image with additional information about the image beside or below that large image. I don’t want a gallery of images with all of that information destroying the grid aesthetic. Is this possible? I do not know coding or website jargon – sorry.
Imagine That
This post is so helpful! Many Thanks
Sabrina
I just have to say, this post is awesome… as all your posts are. You have made me into a better programmer. Thank you for all you do.
Keith Davis
Hi guys
Just created my first WordPress gallery and carousel – looks fantastic.
Just one question, how do I edit the gallery when I work in html mode not visual mode.
Messed about for half an hour and I can’t figure it out!
Christy
Thank you SO much for this post. Not only did you save me HOURS of time creating my client’s gallery, you also taught me something new – and I love a good challenge. Your instructions were clear, concise and accurate. You are appreciated!!!
Kailash
Hi, sayed will it increase the loading time of website ? Beacause i want ot add around 100 photos to my website
WPBeginner Support
Yes, though it is probably not a good idea to add 100 images even if they are thumbnails, on a single page or post.
Administratör
Rita
This made things so much easier than using a plugin, thanks so much for the article!
I have a question though: is it possible to get rid of the image titles under the images and only show them in the lightbox view? I would like to see only images on the gallery page.
Many thanks,
Rita
Ana Mota
Thank you so much! You make wordpress very easy for beginners like me. I just have one question:
I have installed the carousel plugin but I don’t want the ”write a comment” area to appear. Is there a way to remove it?
Thanks again!
James McInally
Never knew about the carousel plugin for the WP Gallery, so cheers for that, J
Courtney
Thanks so much for this page – it was definitely helpful. I did have one question: I’m working on a photography website and trying to apply a gallery to a page; however, I don’t seem to have the option of using the scroller format when I do that, only thumbnails. I’m using PhotoPro, which allows me to have a scroller on the homepage, but my client really wants that format (with different photos) on several pages, and carousel isn’t much of a substitute for the scroller. I’ve tried to find information about this through several sources, but I can’t seem to find a solid answer as to whether or not it’s possible.
vaisakh
tnkz for your post…..it really helped me…
Gale Weithers
This post was very very helpful! Thanks a mil!
Marci Hess
Thanks for this info! I have a couple of questions about the gallery that maybe you can help with.
1) When adding photos, there is an option that I’m unsure about. What is the difference between link to ”attachment page or link to ”media file”
2) Sometimes my photos get ”cut off” in the gallery but are ”full size” when you go the hyperlinked page or if you click on that particular photo. I have changed the settings so the media size is the same as what I’m resizing them to, but that didn’t help. What else can I do?
Thanks for any help.
Marci
WPBeginner Support
1. You can choose to link an image to an attachment page, which is a WordPress page with the image displayed in large size, or you can link to media file, which is the actual image file you uploaded.
2. It looks like cropping is turned on for thumbnail sizes in your WordPress theme. You can turn off cropping to allow WordPress to scale images when resizing them instead of cropping. The problem with this approach is that your images may look disproportionate.
update_option(”thumbnail_crop”, ”0”);
Administratör
Krish Murali Eswar
God bless you, folks. Sometimes things are so easy in WordPress. Yet, I miss it. Your site is certainly my first ’go-to’ site for any wordpress related help.
Robert
Kudos!! Simple solution for any beginner. Much easier approach that the various lightbox plugin implementations.
Peter
The images does not show up in IE. Is it a known problem?
Tested IE10 on win7 and win8, same problem.
Great article!
WPBeginner Support
We are not aware of any such issue. We were unable to reproduce it in internet explorer.
Administratör
Dave Lampen
Is it possible to get rid of the comment box under the gallery?
Francesco
Awesome !
A question:
Is it possibile link a gallery ?
For example:
PhotoGallery
Is it possibile ? How ?
Thanks and excuse me for my bad english
WPBeginner Support
Yes it is possible. Lets say you create a post or a page with a photo gallery in it and you title that page PhotoGallery. It is like any other WordPress post or page and can be linked any where.
Administratör
Karen
Awesome! so easy! I’ve spent hours…. trying to get a plugin to do this and it was right under my nose all the time!!!! thank youuuuuuuuuuuu
Marie
Thank you for explaining this so clearly! I really wish I would have found your site 3 days ago…make that 3 years ago.
Santhi Wijaya
Hi, is there a way to reduce the opacity of the image border? or to remove completely? Thanks
WPBeginner Support
Santhi you can override the default gallery CSS in your style sheet
Administratör
Keith
Thanks for a great tutorial. I’m wanting to have my gallery on one side of the page and have it open the album in a carousel next to it in another div. How difficult would that be to do?
Thanks,
Keith
alex
Hello and thank you for posting this! Do you have any idea why, when clicking on the photos to view them, they are as small as the thumbnails? Thank you!
WPBeginner Support
One possible could be thumbnail issue with your theme. Try regenerating thumbnails and then create a new post with gallery to see if this resolves your issue
Administratör
Lyman
This is awesome. Exactly what I needed! Thanks for creating it.
Santhi
Hi, how come when i change the thumbnail size under Settings > Media, the previously uploaded images with old thumbnail size doesn’t change into the new size? Does this mean i have to re-upload those images?
WPBeginner Support
We have a tutorial on how to add new image sizes in WordPress. Also take a look at how to regenerate thumbnails and new image sizes.
Administratör
rachael knight
Great article, thanks!
Is it possible to keep the captions displayed on the page, instead of only displaying if the user clicks to display the larger img?
Many thanks
Annei
Can i add this feature on my website without installing the plugin. I mean can i add it manually in theme files?
Editorial Staff
There is no plugin for this. This is a built-in feature in WordPress.
Administratör
Kristen
Hi there, When I click on a thumbnail of a gallery in my post, it pulls up the gallery carousel but it is off to one side of my screen, like 2 inches on the left so the photos look scrunched up. Do I have something off on my settings?
Daniel
Thanks!
Zimbrul
The plugin is particularly good as it’s responsive, I’ll use it on my sites.
I’m currently using a premium plugin that adds social share buttons to the image in a lightbox. It’s pretty good.
One question: if you use the plugin and comment to a photo where the comments shows up? Is like a comment to the article?
Keith
Zimbrul – Which plugin are you using to add social share buttons to the image in lightbox? Do you have an example you can share? I’m looking for this for a project I’m currently working on.
Thanks,
Keith
Abhijith V M
Nice information there. Thanks
Carlin
Good stuff…better than WP’s support pages!
Savannah
I send you this link to my site-URL.. Will you PLEASE check my galleries?
http://savannahz.wordpress.com/
Savannahz
Editorial Staff
We don’t provide support for WordPress.com sites. This site is built for those who are using the self-hosted WordPress.
Administratör
savannah
Hi!
When I’m using the Visual Editor I can’t see the box in post edit area indicating that there is gallery code.It used to be there, but something is changed!
Need to know how to fix this!
Sanna
Editorial Staff
Did you add a new plugin? Because the only thing we can think of with the information provided is that there is a plugin conflict.
Administratör
Savannah
Thanks for the reply!
If I have added a plugin am I not aware of that I did. How can I check if there is any plugin that I should remove??
/ Savannah
Nemo
Great post! I’ve just been having fun choosing which great gallery mode to have on my blog – the ’Circles’ option is stunning!! Really professional looking. I had no idea WP had this.
Thanks for posting this HowTo! ;)))))))))))))
Editorial Staff
Always a pleasure to help
Administratör
joseph
Hello! I THINK this post might be able to help me, but at this point in the day, I am feeling pretty dumb, so… who knows? I have been trying to install a simple slideshow on my WordPress.com blog all afternoon. Literally for the past 5 hours. I have read 8 million supporting pieces, but every time I preview it, I see small thumbnails that open to slightly larger images. If I click on THOSE images, they open into large, individual pictures. I know there is a way to just go straight to large images. I just cannot figure it out. Please, someone, help!
thanks so much in advance.
Editorial Staff
WordPress.com and self-hosted blogs are different. But WP.com does have a carousel feature that you need to enable.
Administratör
Doc4
Thank you for this post. I had no idea WordPress even had this fetaure and I’ve been using it for years. I was using the NextGen Galley but this is perfect for a small project I’m working on. Very helpful.
Abdul Rahim
Very nice and easy tutorial.
I aslo use this plugin to create photo gallery.
Susan
Hi, When using the Carousel without Jetpack plugin (which works very well, thank you for that!) can you have just one large image on your webpage, which when clicked, opens the carousel gallery as it does in Facebook? I want my webpage to not be a gallery of all the pictures, but rather one image larger.
Any thoughts?
Thanks!
Editorial Staff
You should use a lightbox plugin for that instead of a carousel. Or you can use the carousel and only add one image in the gallery.
Administratör
Susan
Thanks. I’ll give that a try.
Susan
Thanks again, adding the one image plus the Carousel worked VERY well for me:
myimmortals.com
Afro Arena
Thank you very much for your article. With this, I was able to create a beautiful gallery
Willem
Hi, I wonder what to do about the empty tags being created before and after the gallery. Can you help me out with this?
Kind regards,
Willem
Abbey
Hey,
I followed your instructions for a site I’m working on but it doesn’t seem to work.
The images are not displayed in a carousel even though the plugin is installed and activated.
Any ideas please?
Editorial Staff
It is possible that you have another plugin activated that is conflicting with the carousel plugin. Can you please send us an email with your site url, so we can take a look.
Administratör
Tanja
Thank you so much for this! I just made a gallery, it is going to be a visual recipe index for my food blog. Is there a way to add a link to the recipe, when the picture is clicked?
Editorial Staff
Not unless you manually add that image outside of the gallery and hyperlink it.
Administratör
Pamela
Thank you for this! I was looking for a plugin to make a gallery, I didn’t know you could do this on wordpress directly, I just made a gallery for an article and it looks really good! <3
Rob van den Brand
Great post, I’ll probably replace NextGen with this option now.
Amar
How about using nextgen gallery plugin for the same ?
Editorial Staff
Why use a plugin when WordPress can do the job?
Administratör