Wordpress

Hvordan lage dynamiske WordPress-bildegallerier og skyveknapper med verktøysettblokker

Ser du etter en mer fleksibel måte å jobbe med bilder i den nye WordPress-blokkredigereren?

I dette innlegget viser vi deg hvordan du kan bruke Toolset Blocks til å lage dine egne statiske eller dynamiske bildeglidere og gallerier i blokkredigeringsprogrammet.

Hvis du ikke er kjent med Toolset, er det en pakke med verktøy som hjelper deg å jobbe med tilpasset innhold og dynamiske WordPress-nettsteder.

Det kan hjelpe deg med å legge til og vise tilpassede innleggstyper, tilpassede felt og mer. Og med Toolset Blocks kan du gjøre alt dette ved å bruke det opprinnelige WordPress-blokkredigeringsprogrammet.

WP Mayor-lesere kan få en eksklusiv 20% rabatt når de kjøper Toolset.

Nedenfor skal vi fokusere på en spesifikk del av Toolset Blocks – bilder.

Fortsett å lese for å lære hvordan det fungerer og hvordan det kan hjelpe deg med å bygge bedre WordPress-nettsteder.

Hvordan hjelper verktøysettblokker med WordPress-bilder?

Toolset Blocks hjelper deg med å vise WordPress-nettstedets innhold ved hjelp av den opprinnelige WordPress-blokkredigereren – ingen kode kreves.

Vi har tidligere skrevet om Toolset Blocks her.

Du kan kanskje si: "Colin, blokkredigeringsprogrammet lar deg allerede vise innhold - det er hele poenget!".

Forskjellen med Toolset Blocks er at det også hjelper deg å vise tilpasset innhold, som egendefinerte felt og taksonomier som du har lagt til med Toolset. Du kan til og med bruke blokkredigeringsprogrammet til å designe malene for alle tilpassede innleggstyper du har opprettet.

Jeg kommer imidlertid litt av sporet, fordi dette innlegget handler om bilder.

Med Toolset Blocks v. 1.3 får du tilgang til to bildefokuserte blokker:

  • Galleri – lage rutenett, murverk eller collagegallerier.
  • Bilde Slider – lag skyveknapper og karuseller med forskjellige oppsett, bildetekster og mer.

Begge disse blokkene lar deg lage gallerier eller skyveknapper fra et statisk sett med bilder, sammen med mange alternativer for å kontrollere stilen og utformingen av galleriene/glidebryterne.

Men hvor disse blokkene blir mer nyttige, og hvor de skiller seg fra andre galleri- og skyveblokk-plugins, er at du også dynamisk kan sette inn bilder i galleriene og glidebryterne fra hvor som helst på nettstedet ditt.

Du kan laste opp bilder ved å bruke et egendefinert felt som du har lagt til med Toolset og deretter automatisk sette inn disse bildene i et galleri. Du kan til og med lage en mal for en egendefinert innleggstype som du har lagt til og deretter automatisk fylle galleriet på den måten.

På et eiendomsnettsted kan du for eksempel lage en egendefinert "Hus"-posttype med et bilderepeaterfelt for å laste opp bilder av interiøret i hvert hus. Deretter kan du bruke disse bildene til dynamisk å fylle ut et galleri som vises som en del av hvert huss oppføring.

Kult, ikke sant? Jeg skal vise deg hvordan dette fungerer i neste avsnitt.

Slik bruker du verktøysettet bildeblokker med statisk innhold

Nå skal jeg vise deg trinn-for-trinn hvordan du bruker det nye Toolset-galleriet og skyveblokkene.

For hver blokk vil jeg starte med å vise deg hvordan du bruker den med et statisk sett med bilder. Dette vil gi deg en god ide om hver blokks muligheter.

Så, i neste seksjon, skal jeg vise deg hvordan det fungerer å fylle ut galleriene og glidebryterne dine dynamisk.

Galleriblokk

Når du setter inn den nye Galleri blokk, vil du kunne velge mellom tre forskjellige oppsett:

  1. Grid
  2. Masonry
  3. Collage
Galleri layouter

Når du har valgt layout, vil du kunne legge til bilder ved å:

  • Laster opp nye bilder
  • Velge eksisterende bilder fra mediebiblioteket
  • Dynamisk fylle dem fra egendefinerte felter lagt til i dette innlegget (eller et annet innlegg)

Jeg lagrer det dynamiske innholdet til neste seksjon, så la oss bare laste opp noen nye bilder for dette eksemplet:

Bildekilder

Og voila – du har et galleri. Du kan deretter bruke blokksidefeltet til høyre for å konfigurere:

  • Stiler for oppsettet ditt, som hvor mange kolonner du skal bruke i et rutenett eller et murgalleri.
  • Bildetekster for hvert bilde.
  • Hvorvidt du vil åpne bilder i en lysboks eller ikke.
Eksempel på murgalleri

Rutenett- og muroppsettene er ganske selvforklarende, men collage-oppsettet inkluderer en ryddig funksjon som lar deg velge mellom ferdiglagde collage-oppsett eller designe dine egne:

Collage-oppsett

Hvis du designer din egen layout, kan du bruke et rutenettsystem til å konfigurere størrelsen og plasseringen av hvert gallerielement, noe som er veldig kult:

Egendefinert collage
Programvare: Snipaste

Bildeskyveblokk

Bildeskyveblokken fungerer på samme måte som Galleri-blokken. 

Når du oppretter en ny bildeglidebryter, vil du kunne velge mellom de samme tre kildene:

  • Last opp
  • Media Library
  • Dynamiske kilder

Deretter kan du bruke alternativene på siden for å:

  • Endre antall kolonner. Én kolonne vil være en tradisjonell glidebryter, mens du kan lage karuseller ved å legge til flere kolonner.
  • Velg forskjellige glidebryterstiler.
  • Kontroll stiler.
Eksempel på bildeglidebryter

Nå som du vet det grunnleggende, la oss gå inn på den mer avanserte bruken av disse to widgetene, og jeg skal vise deg hvordan du dynamisk kan fylle ut galleriene og glidebryterne dine.

Hvordan bruke verktøysettet bildeblokker med dynamisk innhold

Mens de nye Toolset-blokkene er nyttige med statiske bilder, er det allerede mange blokker som kan hjelpe deg med å lage statiske gallerier og bilder.

Der de nye Toolset-bildeblokkene blir virkelig kraftige (og unike), er når det kommer til dynamisk innhold.

Du kan dynamisk fylle innholdet i et galleri eller en glidebryter med bilder fra et tilpasset bildefelt som du har lagt til med Toolset. Du kan også bruke en gjenta bildefelt, som lar deg legge til så mange bilder du trenger i det egendefinerte feltet.

Så...hvordan kan dette fungere i praksis?

For å gjøre dette eksemplet litt mer konkret, brukte jeg Toolset for å lage en "Hus" tilpasset posttype. Deretter la jeg til et gjentatt bildefelt der jeg kan laste opp bilder av husets interiør.

Her er et eksempel på hvordan det vanlige repeterende bildefeltet ser ut når jeg oppretter et nytt "hus":

Eksempel på tilpasset felt
Programvare: Snipaste

Nå skal jeg vise deg hvordan du dynamisk trekker disse bildene inn i et galleri eller en glidebryter.

Galleri

Når du legger til en Galleri-blokk, vil du fortsatt kunne velge din egen layout og bruke alle de andre innstillingene som jeg viste deg før.

Først nå, når du ser spørsmålet om å legge til bilder, vil du velge Dynamiske kilder:

Dynamiske kilder

Deretter vil du kunne velge det egendefinerte feltet for repeterende bilde som kilde:

Velg tilpasset felt

Når du har valgt den kilden, vil du se en forhåndsvisning av galleriet ditt ved å bruke bildene fra det egendefinerte feltet som jeg viste deg tidligere:

Dynamisk galleri

Hvis du skulle legge til eller fjerne bilder fra det egendefinerte feltet, vil disse endringene automatisk gjelde for galleriet ditt.

Bilde Slider

Du kan bruke nøyaktig samme tilnærming for bildeglidebryterne.

Når du legger til en ny Image Slider-blokk, kan du velge Dynamiske kilder for bildene dine, og velg deretter ditt gjentakende bildefelt akkurat slik jeg viste deg med Galleri-blokken:

Dynamisk skyveknapp

Prøv Toolset

Vi har slått oss sammen med teamet bak Toolset, sidebyggeren som lar deg bygge WordPress-nettsteder uten koding, for å tilby deg en eksklusiv 20 % rabatt.

20% Rabatt

Du kan bruke dynamisk innhold i andre innlegg/sider også

I tillegg til å dynamisk sette inn bilder for innlegget du jobber med, kan du også dynamisk fylle ut et galleri eller en glidebryter andre steder på nettstedet ditt.

La oss for eksempel si at du skriver et blogginnlegg der du ønsker å vise bilder av et hus som du nettopp har lagt til i den egendefinerte husinnleggstypen.

For å komme i gang, legger du til en ny galleri- eller bildeglideblokk i blogginnlegget og velger Dynamiske kilder akkurat som før.

Først nå, i Innleggskilde rullegardinmenyen, velger du Annet innlegg. Deretter kan du søke etter innlegget som har bildene du vil spørre etter. I dette eksemplet er det «House»-oppføringen for «123 WP Mayor St»:

Velg et annet innlegg

Deretter kan du velge feltet du vil spørre etter. Og når du har gjort det, vil du se ditt dynamisk befolkede galleri akkurat som før:

Dynamisk galleri fra annet innlegg

Hvis du skulle oppdatere bildene i den tilpassede posttypen "Hus", vil disse bildene automatisk oppdateres i blogginnlegget ditt.

Det fungerer på samme måte for Image Slider-blokken.

Du kan også bruke Galleri- og Image Slider-blokkene i malene du lager med Toolset, som gir deg en annen måte å utnytte dynamisk innhold. 

Du kan for eksempel designe malen du bruker for den tilpassede posttypen «Hus» slik at den automatisk fyller ut et galleri fra hvert huss egendefinerte felt.

Begynn å bruke verktøysettblokker i dag

Verktøysett gir deg muligheten til å bygge tilpassede, dynamiske WordPress-nettsteder uten å stole på tilpasset kode.

Med Toolset Blocks kan du jobbe med ditt dynamiske innhold rett fra den opprinnelige WordPress-blokkredigereren.

I dette innlegget har vi fremhevet hvordan Toolset Blocks kan hjelpe deg med å jobbe med bilder ved å bruke de nye Gallery- og Image Slider-blokkene.

Når det gjelder innstillingene og stilalternativene, er blokkene allerede fleksible og konkurransedyktige med andre galleri- og skyve-plugins.

Det som imidlertid skiller Toolset Blocks fra hverandre, er muligheten til å fylle ut galleriene og skyveknappene dine dynamisk.

Du kan lage gjentatte bildefelt ved å bruke Toolset og deretter bruke disse bildefeltene til å fylle ut gallerier og skyveknapper hvor som helst på WordPress-nettstedet ditt, inkludert maler du lager med Toolset.

Hvis du vil se noen eksempler på hva Toolset kan gjøre og lære hvordan det fungerer, sjekk ut Toolset-dokumentasjonen og referansesidene.

Og hvis du vil prøve Toolset selv, lenken nedenfor for å komme i gang.

Få verktøysett

Relaterte artikler

0 kommentarer
Inline tilbakemeldinger
Se alle kommentarer
Tilbake til toppen-knappen