{"id":366994,"date":"2023-02-04T12:36:00","date_gmt":"2023-02-04T09:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366994"},"modified":"2023-03-31T19:49:17","modified_gmt":"2023-03-31T16:49:17","slug":"en-guide-till-wordpress-gutenberg-image-block","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/en-guide-till-wordpress-gutenberg-image-block\/","title":{"rendered":"En guide till WordPress Gutenberg Image Block"},"content":{"rendered":"\n<p>En av de mest popul\u00e4ra sidbyggarna f\u00f6r WordPress, Gutenberg kommer med ett bibliotek med f\u00e4rdiga element, <a href=\"https:\/\/themewp.inform.click\/sv\/de-nya-wordpress-gutenberg-blocken-forklaras\/\" title=\"\u00e4ven k\u00e4nd som Gutenberg-block\">\u00e4ven k\u00e4nd som Gutenberg-block<\/a>. Blocken m\u00f6jligg\u00f6r smidig, str\u00f6mlinjeformad och enkel sidbyggandeupplevelse eftersom de \u00e4r otroligt intuitiva och praktiska. I den h\u00e4r guiden kommer vi att g\u00f6ra en \u00f6versikt \u00f6ver Gutenbergs bildblock och allt du kan g\u00f6ra med det.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/b3oXhjbhW6k\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Standardbildblocket och hur man l\u00e4gger till det<\/h2>\n<p>I ett n\u00f6tskal l\u00e5ter Gutenberg Image Block dig <strong>l\u00e4gga till en bild var du vill p\u00e5 din sida eller inl\u00e4gg<\/strong>. Om du klickar p\u00e5 en plusknapp i din editor \u00f6ppnas ett nytt f\u00e4lt. H\u00e4r kan du komma \u00e5t bildalternativet. Som du kan se nedan, i den h\u00e4r redigeraren, har du separata alternativ f\u00f6r att l\u00e4gga till Gutenberg-bildblock och <a href=\"https:\/\/themewp.inform.click\/sv\/introduktion-till-gutenberg-gallery-block-features\/\" title=\"Gutenberg-galleriblock\">Gutenberg-galleriblock<\/a> ocks\u00e5.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" alt=\"En guide till WordPress Gutenberg Image Block\"><\/a><\/p>\n<p>I Gutenberg finns det tre olika s\u00e4tt att l\u00e4gga till bilder. Du kan <strong>ladda upp en bild fr\u00e5n din dator, v\u00e4lja en redan befintlig bild fr\u00e5n ditt mediebibliotek eller infoga den fr\u00e5n URL<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" alt=\"En guide till WordPress Gutenberg Image Block\"><\/a><\/p>\n<p>Vid f\u00f6rsta anblicken inneh\u00e5ller bildblocket samma alternativ som den klassiska redigerarens L\u00e4gg till media-knapp. Men vid n\u00e4rmare granskning \u00e4r det uppenbart att detta endast delvis \u00e4r sant. Det finns n\u00e5gra nya anv\u00e4ndbara alternativ som kommer med Gutenberg som ytterligare kommer att underl\u00e4tta din bildredigeringsupplevelse.<\/p>\n<p>Den f\u00f6rsta \u00e4r ett till\u00e4gg av sm\u00e5, bl\u00e5 prickar p\u00e5 din bild. Tack vare dessa prickar kan du <strong>str\u00e4cka ut bilden och \u00f6ka och minska dess storlek p\u00e5 vilket s\u00e4tt du f\u00f6redrar<\/strong>. Ett annat nytt alternativ \u00e4r m\u00f6jligheten att skriva bildtext l\u00e4ngst ner p\u00e5 bilden.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" alt=\"En guide till WordPress Gutenberg Image Block\"><\/a><\/p>\n<p>Du hittar alla grundl\u00e4ggande inst\u00e4llningar precis ovanf\u00f6r bildblocket. \u00c5 andra sidan finns mer avancerade bildinst\u00e4llningar p\u00e5 fliken Block. Dessa inkluderar Alt Text, Bildstorlek, L\u00e4nkinst\u00e4llningar och Avancerat.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" alt=\"En guide till WordPress Gutenberg Image Block\"><\/a><\/p>\n<ul>\n<li><strong>Alt Text<\/strong> \u2013 h\u00e4r kan du l\u00e4gga till en kort beskrivning av din bild. Du kan dock l\u00e4mna det h\u00e4r f\u00e4ltet tomt om din bild inte \u00e4r en central del av ditt inneh\u00e5ll.<\/li>\n<li><strong>Bildstorlek<\/strong> \u2013 det finns m\u00f6jligheter att \u00e4ndra din bildstorlek till standardstorlekar, till exempel miniatyrbild, medium, stor och full storlek. Ett annat alternativ \u00e4r att l\u00e4gga till exakta bildm\u00e5tt i pixlar, eller best\u00e4mma \u00f6nskad storlek i procent relaterad till originalstorleken. Om du g\u00f6r n\u00e5gra misstag kan du alltid klicka p\u00e5 knappen \u00c5terst\u00e4ll.<\/li>\n<li><strong>L\u00e4nkinst\u00e4llningar<\/strong> \u2013 h\u00e4r har du fyra olika alternativ: Ingen, Bifogad sida, Mediafil och anpassad webbadress. Inget alternativ l\u00e5ter dig visa bilden utan en l\u00e4nk, medan bilagasidan l\u00e4nkar till en specifik sida p\u00e5 din webbplats som har till syfte att tillhandah\u00e5lla information om bilden i fr\u00e5ga. N\u00e4r det g\u00e4ller Media File, \u00f6ppnar den bilden av sig sj\u00e4lv. Det sista alternativet l\u00e5ter dig l\u00e4gga till en anpassad url f\u00f6r din bild.<\/li>\n<li><strong>Avancerat<\/strong> \u2013 i det h\u00e4r f\u00e4ltet kan du l\u00e4gga till ytterligare en CSS-klass och skriva dina egna anpassade stilar.<\/li>\n<\/ul>\n<p>Ytterligare bildf\u00e4ltsalternativ inkluderar bildjustering (justera den till v\u00e4nster, h\u00f6ger eller mitten) och \u00c4ndra blocktyp. Genom att v\u00e4lja det h\u00e4r alternativet f\u00e5r du m\u00f6jlighet att <strong>f\u00f6rvandla ditt block till ett annat kompatibelt block med ett enda musklick<\/strong>. Du kan till exempel \u00e4ndra din blocktyp till galleri, media&amp;text, omslag och fil.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" alt=\"En guide till WordPress Gutenberg Image Block\"><\/a><\/p>\n<p>Om du vill redigera din bild p\u00e5 samma s\u00e4tt som du gjorde i den klassiska WordPress-redigeraren kan du enkelt g\u00f6ra det genom att klicka p\u00e5 pennikonen f\u00f6r att \u00f6ppna bilden i WordPress mediabibliotek.<\/p>\n<p>Nu \u00e4r det allt som finns om standardbildblocket, men du b\u00f6r veta att det ocks\u00e5 finns n\u00e5gra mer avancerade alternativ d\u00e4r ute.<\/p>\n<h2>L\u00e4gga till bilder med Qi-block f\u00f6r Gutenberg<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Blocks for Gutenberg<\/a> \u00e4r en rik samling av anpassade Gutenberg-block som l\u00e5ter dig g\u00f6ra s\u00e5 mycket mer (och f\u00f6r b\u00e4ttre estetiska resultat) \u00e4n du normalt skulle g\u00f6ra med standardblock. Samlingen <strong>kan laddas ner gratis fr\u00e5n det officiella WordPress-f\u00f6rr\u00e5det, vilket ger dig en underbar upps\u00e4ttning med 48 block f\u00f6r allt fr\u00e5n kreativa element och showcase-element till aff\u00e4rer och SEO<\/strong>. F\u00f6r de som vill ha \u00e4nnu b\u00e4ttre alternativ och mer avancerade funktioner finns det \u00e4ven <strong>Qi Blocks Premium-paket med 33 extra block<\/strong>.<\/p>\n<p>Den h\u00e4r g\u00e5ngen \u00e4r blocket som intresserar oss h\u00e4r <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/single-image\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Single Image-blocket<\/a>. Du skulle kunna tro att det \u00e4r det enklaste som finns att l\u00e4gga till bilder p\u00e5 sidor och inl\u00e4gg, men Single Image-blocket f\u00f6r Gutenberg l\u00e5ter dig inte bara g\u00f6ra det med st\u00f6rsta l\u00e4tthet, var som helst p\u00e5 din webbplats, utan det <strong>kommer ocks\u00e5 med en rad exklusiva alternativ<\/strong>. Du kan till exempel v\u00e4lja olika bild\u00e5tg\u00e4rder, justera bredd, h\u00f6jd, kanter, justering, st\u00e4lla in hovringsbeteende, aktivera ljusl\u00e5dan och mycket mer.<\/p>\n<p>Ett annat fantastiskt block som f\u00f6rtj\u00e4nar v\u00e5r uppm\u00e4rksamhet h\u00e4r \u00e4r <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/parallax-image-showcase\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parallax Image Showcase<\/a>, som l\u00e5ter dig skapa dubbla bildsektioner med bilder som r\u00f6r sig med olika hastigheter p\u00e5 rullningen, vilket skapar en sp\u00e4nnande illusion av djup.<\/p>\n<p>Sedan finns det <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Image Hotspots-blocket<\/a>, med ikoner eller andra symboler placerade p\u00e5 bilder, som avsl\u00f6jar information n\u00e4r anv\u00e4ndaren sv\u00e4var p\u00e5 dem.<\/p>\n<p>Slutligen kan <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Image Slider-blocket<\/a> hj\u00e4lpa dig att skapa imponerande, engagerande reglage med dina utvalda bilder, vilket ger en touch av dynamik till dina sidor. Med det h\u00e4r blocket beh\u00f6ver du inte l\u00e4ngre komplicerade, sv\u00e5ranpassade reglage-plugins. Du f\u00e5r allt du beh\u00f6ver i ett enda, intuitivt och helt anpassningsbart block.<\/p>\n<p>Som vi s\u00e5g finns det mycket du kan g\u00f6ra med bildblocket, oavsett om du anv\u00e4nder standarden som f\u00f6ljer med Gutenberg, eller om du v\u00e4ljer en tredjepartsl\u00f6sning, som i fallet med Qi Blocks f\u00f6r Gutenberg. Bilder \u00e4r mycket viktiga f\u00f6r alla webbplatser, eftersom de ofta kan ber\u00e4tta och g\u00f6ra s\u00e5 mycket mer \u00e4n ord. Tack vare Gutenberg har det aldrig varit l\u00e4ttare att l\u00e4gga till dem i dina inl\u00e4gg och sidor.<\/p>\n<p>Vi hoppas att du tyckte att den h\u00e4r artikeln var till hj\u00e4lp. Om du gillade det, kolla g\u00e4rna in n\u00e5gra av dessa artiklar ocks\u00e5!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r korta guiden kommer vi att g\u00f6ra en \u00f6versikt \u00f6ver Gutenberg Image Block och visa dig allt du kan g\u00f6ra med detta anv\u00e4ndbara alternativ.<\/p>\n","protected":false},"author":1,"featured_media":363766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[574],"tags":[850],"class_list":["post-366994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grunderna-i-wordpress","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/366994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=366994"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/366994\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=366994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=366994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=366994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}