Accentsconagua

Een op Instagram gebaseerde portfolio bouwen met Bootstrap

Web ontwerp
Share

In deze tutorial ga ik het proces van het maken van de eenvoudige op Instagram gebaseerde portfolio bekijken, zoals ontworpen in een eerdere tutorial van Tomas Laurinavicius.

Thomas heeft geweldig werk geleverd door het ontwerp eenvoudig, ruim en functioneel te houden, dus ik denk dat het alleen maar eerlijk is dat we hetzelfde doen bij het bouwen ervan. Om ons leven gemakkelijker te maken, gaan we een beroep doen op een paar tools en bibliotheken, dus laten we beginnen met een kijkje te nemen.

Instrumenten van de handel

Er zijn een paar dingen die we moeten voorbereiden voordat we met onze build beginnen. Zij zijn:

  • Sass
  • Twitter Bootstrap (Sass-versie)
  • Instafeed.js
  • Modernizr

Allereerst moet u Sass op uw computer laten werken. De gemakkelijkste manier om dat te doen is door een van de uitstekende beschikbare apps te gebruiken om al het kijken en compileren te doen. Ik gebruik momenteel Koala, dat is cross-platform en gratis, dus het is een zeer goede optie om snel aan de slag te gaan. Er zijn alternatieven zoals Scout, Prepros en Compass-app. Ze bieden allemaal bijna dezelfde functionaliteit, dus de keuze is aan u!

De volgende is Bootstrap. We gaan Bootstrap op een zeer basaal niveau gebruiken om sommige van de responsieve elementen van de pagina te verwerken. We willen specifiek het downloaden van Sass-versie dus we kunnen het opnemen in ons eigen stylesheet en gebruik maken van de beschikbare variabelen. Ga je gang en download de nieuwste versie.

Bijna daar! We moeten nu een kopie van Instafeed.js pakken die alle foto's die op het werk in beslag zijn, van Instagram afhandelt. Het is de moeite waard hier op te merken dat om iets van Instagram te krijgen je de plug-in moet voorzien van een klant identificatie die kan worden gegenereerd door je aan te melden bij Instagram en het formulier in de ontwikkelaarssectie in te vullen.

Ten slotte moeten we de nieuwste versie van Modernizr downloaden, zodat we indien nodig bepaalde browserfuncties kunnen gebruiken en daarom hebben we ook de HTML5-schijf voor oudere browsers. Dit is niet strikt noodzakelijk, maar ik wil het graag in projecten opnemen om er zeker van te zijn.

Nu we deze troeven hebben, kunnen we beginnen met onze build!

Bestands- en mapstructuur

We moeten een aantal bestanden en mappen voor ons project maken, dus ga je gang en creëer je het volgende in de hoofdmap van het project.

  • css /
  • afbeeldingen/
  • js /
  • index.html

Dit is ons basis startblok. Zoek vervolgens het Bootstrap-archief dat je eerder hebt gedownload en pak het uit waar je het gemakkelijk kunt vinden. In de uitgepakte map moet een map met de naam middelen. Open deze map en je ziet iets dat lijkt op het volgende:

Kopieer de fontsmap in de hoofdmap van het project met de andere mappen die we zojuist hebben gemaakt. Doe open javascripts en kopieer het bootstrap.jsbestand in de jsmap van ons project. Open ten slotte de stylesheets map en kopieer de bootstrap.scssbestand en bootstrapmap in de css map van ons project. Onze bestanden en mappen zouden er nu zo uit moeten zien ...

Goed werk! Zoek nu het instafeed.min.js en Modernizr bestanden die u eerder hebt gedownload en kopieer deze naar de jsmap. We moeten nog een paar dingen opzetten voordat we kunnen beginnen met het bouwen van de lay-out.

Sass-installatie

Dit is het moment om ons project in te stellen in de Sass-app die je hebt gekozen om te gebruiken. In Koala is dit een kwestie van de map naar het app-venster slepen. Ik geloof dat het ook voor de anderen een soortgelijk proces is. Het volgende dat ik altijd doe bij het instellen van dingen is kijken naar de Sass-compileeropties en, indien beschikbaar, vink het vakje aan om Autoprefixer te gebruiken. Deze handige toevoeging zal ons Sass-bestand parsen en voeg voorvoegsels van leveranciers toe die we nodig hebben, zodat we ons geen zorgen hoeven te maken over het schrijven van deze prefixen. Voel je vrij om te spelen met de instellingen die je Sass-app biedt om de beste set-up voor je te krijgen. Ik hou van dingen eenvoudig te houden en zal normaal gesproken gewoon Autoprefix en een outputstijl van controleren Expanded (Compressed in de maak).

Bestanden toevoegen

Open het project in elke editor die u gebruikt, zodat we een paar bestanden kunnen toevoegen.

Allereerst onder de cssmap voeg een bestand toe met de naam style.scss. Dan binnen de js map voeg een bestand toe met de naam app.js.

Zorg ervoor dat u de Sass-app die u gebruikt vernieuwt, zodat deze de nieuwe bestanden oppikt. Sommige doen dit automatisch, maar het is het beste om te controleren en handmatig te verversen indien nodig.

Ik denk dat dat het hele dossier is dat nu is opgezet. We kunnen doorgaan met het bouwen van de lay-out!

Begin met de build

Doe open index.html en voer (of kopieer / plak) de volgende basis-HTML in:

    Instagram-portfolio

We hebben ons eerste stukje code! Laten we het afbreken. 

De sectie bevat de benodigde viewportlabel zodat onze mediaquery's correct werken. Vervolgens geven we de pagina een titel en bevatten we een  tag voor de verschillende Google-lettertypen die we willen gebruiken. De lettertypen hier zijn gebaseerd op de lettertypen die zijn gebruikt in het ontwerp van Thomas. De volgende regel kan vreemd lijken omdat we geen a hebben gemaakt style.css bestand, maar het genereren van dat bestand zal worden afgehandeld door onze Sass-compiler. Tenslotte nemen we Modernizr op.

De element bevat vier andere elementen voor elk van de banden die in het ontwerp voorkomen. Ik heb een aantal beschrijvende klassen toegepast op de

elementen, zodat we duidelijk kunnen zien waarvoor ze zullen worden gebruikt.

Verwijzen naar JavaScript-bestanden

Voeg het volgende fragment toe onder de footer-bottom sectie:

Deze > tags wijzen naar onze verschillende JavaScript-bibliotheken inclusief jQuery van Google's CDN die vereist is door Bootstrap.

stijlen

We hebben onze basisbouwstenen, dus laten we doorgaan met het opzetten van onze style.scss bestand een beetje.

/ * * Aangepaste variabelen * / $ hoofdlettertype: 'Lato', sans-serif; $ sub-font: 'Montserrat', sans-serif; $ fancy-font: 'Kaushan Script', cursief; $ font-size: 16px; $ zwart: # 000; $ wit: #FFF; $ grijs: # 585c65; $ mediumgrijs: # 9b9b9b; $ lichtgrijs: #eeeeee; $ blauw: # 3466a1; $ opvulling: 10px; $ marge: 10px; / * * Bootstrap-variabelen overschrijven * / $ font-family-sans-serif: $ main-font; @import 'bootstrap';

Hier stellen we enkele variabelen in die we later in onze stylesheet kunnen gebruiken. De eerste zijn enkele lettertypegerelateerde variabelen. Dit is waar we de Google-lettertypen die we eerder hebben opgenomen, binnenhalen en elke pagina een terugval geven als het lettertype om wat voor reden dan ook niet laadt of werkt.

Vervolgens hebben we enkele kleurvariabelen die uit het ontwerp zijn geplukt. Dit is een van de redenen waarom ik zo veel van Sass houd, omdat we hier onze kleuren kunnen instellen en het niet meer nodig zijn om hex-waarden te onthouden of te kopiëren..

Ten slotte hebben we voor onze aangepaste variabelen een eenvoudige marge en opvulling. Ik gebruik graag deze zelfs als ik ze niet altijd gebruik. Het is fijn om een ​​basiswaarde te hebben om mee te werken en geeft ons de mogelijkheid om uniforme wijzigingen aan te brengen in elementen die de variabelen gebruiken.

Het volgende gedeelte bevat Bootstrap, maar voordat we dit doen, zouden we de hoofdlettertype-variabele Bootstrap moeten instellen $ Font-family-sans-serif om onze eerder gecreëerde te evenaren $ Main-font variabel. Dit betekent dat wanneer Bootstrap wordt gecompileerd, dit ons hoofdlettertype gebruikt in plaats van het eigen lettertype.

De @importerenverklaring hier omvat niet de .SCSS aan het einde van het bestand omdat dit niet nodig is bij het opnemen van andere Sass-bestanden. Sass is slim genoeg om het juiste bestand te zoeken en te vinden. Sla het bestand op en hopelijk beseft je Sass-app dat je een Sass-bestand hebt opgeslagen en gecompileerd style.css.

Meer stijlen

Laten we doorgaan met het toevoegen van enkele stijlen:

* positie: relatief; box-sizing: border-box;  body kleur: $ grijs; lettergrootte: $ font-size;  header max-height: 600px; hoogte: 600 px; overloop verborgen;

Hier gebruiken we de universele selector * om alles in te stellen zoals positie: relatiefdus er zijn geen verrassingen bij het gebruik van absoluut geplaatste elementen. Het is ook handig om de box-sizing eigendom aan border-box zodat we percentagebreedten kunnen gebruiken en geen zorgen hoeven te maken over welke opvulling het element ook van invloed is op de lay-out.

Vervolgens stellen we een standaardlettertypekleur en -grootte in voor ons lichaam en geven we de element wat hoogte.

Dat is het voor ons Sass-bestand voor nu. Ga terug naar de index.html bestand zodat we aan de header kunnen beginnen.

De kop van de kop nemen

De kop van dit ontwerp is ongecompliceerd in ontwerp, waardoor het gemakkelijker wordt om het te bouwen. De opmaak waarmee we zullen werken is als volgt:

bergen 
 Jonathan 
 
 
Hallo! Ik ben Jonathan
 
Ik ben dol op reizen over de hele wereld en mooie dingen ontwerpen
 
 
 Facebook Twitter Instagram

Dit moet tussen onze  -tags. U zult merken dat de afbeeldingstag eerst verwijst naar een afbeelding die niet bestaat. We moeten deze afbeelding uit de PSD halen. Ik zal niet ingaan op de details over hoe dat te doen in deze tutorial, maar als je hulp nodig hebt bij het proces, bekijk dan deze snelle tip.

De rest van de headercode bestaat uit drie div elementen met de naam, de titels en sociale links. Ik heb enkele klassen toegepast op deze elementen die we hierna zullen gebruiken in ons Sass-bestand.

Header Styles

Laten we beginnen met het toevoegen van enkele regels code in onze hoofd verklaring.

img positie: vast; top: 0px; links: 50%; marge links: -600 px; breedte: 1200 px; @media-scherm en (min-breedte: $ screen-lg) top: auto; links: auto; marge: 0; breedte: 100%;

Dit moet worden genest binnen de hoofd sectie van ons Sass-bestand direct onder de verklaringen voor de header zelf.

Vaste afbeelding

Je ziet hier dat we de positie van de hebben bepaald imgtag aan vast. Dit betekent dat het beeld op zijn plaats blijft wanneer de gebruiker schuift, waardoor een gevoel van diepte wordt gecreëerd. Het idee is dat de inhoud omhoog schuift over de afbeelding in de kop. Terwijl we een eerste mobiele methodologie toepassen, geven onze basisstijlen de afbeelding een ingestelde breedte en positioneren deze in het midden door een negatieve linkermarge toe te passen die exact de helft van de breedte is. Dit werkt omdat het transformatiepunt van de afbeelding in CSS de linkerbovenhoek is, dus wanneer we een links: 50%aangifte zal de linkerrand van het element in het midden van het scherm worden geplaatst. De kleine truc met negatieve marge helpt ons goed gecentreerde elementen met een absolute of vaste positionering.

Media Query

We hebben vervolgens het eerste gebruik van een van onze schermgroottevariabelen. We zeggen hier: op grote venstergroottes zorgt de afbeelding ervoor dat de breedte van de browser wordt opgevuld en terug in de linkerbovenhoek wordt geplaatst. Belangrijk is dat we de marge opnieuw moeten instellen zodat het beeld niet iets naar links wordt getrokken.

Laten we een eerste blik werpen op ons werk in de browser!

Laten we doorgaan ... 

.naam font-size: 21px; positie: absoluut; top: 50px; links: 50px; kleur: $ wit;  .titles positie: absoluut; onderkant: 40%; breedte: 100%; text-align: center; @media-scherm en (min-breedte: $ screen-lg) onder: 50%;  h1, h2 width: 100%; kleur: $ wit; marge: 0;

Hier hebben we de naamen titels de positie en lettertypestijlen van elementen. We moeten een mediaquery gebruiken op de titelselement om het een beetje meer op grote schermen op te duwen. Laten we snel een update uitvoeren in de browser.

Dat ziet er al beter uit! Laten we die kopjes een beetje meer opruimen.

h1 text-transform: hoofdletters; font-gewicht: 700; lettergrootte: 36px; letter-spacing: 0.06em; margin-bottom: $ marge; span display: block; @media-scherm en (min-width: $ screen-md) display: inline;  h2 font-size: 16px; breedte: 70%; marge: 0 auto; @media-scherm en (min-breedte: $ screen-lg) width: 100%; marge: 0;

Het belangrijkste om op te merken hier is de stijl voor de spanelement. We gebruiken de spantag in onze code om een ​​deel van de hoofdkop in te pakken. Dit stelt ons in staat om het in de CSS te targeten en, zoals we hier hebben gedaan, de lay-out te wijzigen. Op mobiel hebben we het nodig om een ​​blokniveauelement te zijn, zodat het daaronder wordt gestapeld, maar op grotere schermen is het prima dat het langszij loopt als normale tekst. Dit zou er nu veel beter uit moeten zien ...

Fancy Font

Een snelle stijl die we moeten toevoegen is voor de naam in de linkerbovenhoek. Plaats de volgende code aan het einde van het Sass-bestand, buiten de hoofd blok.

.fancy-font font-family: $ fancy-font;

We passen onze mooie lettertype voor elk element met deze klasse. Dit is zodat we dit opnieuw kunnen gebruiken wanneer dat nodig is en het niet beperkt is tot een bepaald element.

Sociale pictogrammen

We moeten de aandacht vestigen op de sociale pictogrammen die in dit geval betrekking hebben op het maken van sprites voor schermen met normale resolutie en hoge resolutie (Retina) -schermen.

Ga naar Iconfinder en pak alle pictogrammen in het ontwerp. Het is het beste om een ​​grotere maat te kiezen dan we nodig hebben, dus er zijn geen problemen om ze te schalen. Ik kies altijd voor het formaat 256px.

Maak in je grafische bewerkingssoftware (zoals Photoshop) een nieuw bestand van 152px bij 52px. Sleep in elk van de pictogrammen en schaal elk naar 48 px bij 48 px. De pictogrammen worden zwart, maar we moeten ze wit hebben, dus breng een filter aan op elke afbeelding.

Nu moeten we ze positioneren. We hebben twee pixels ruimte rondom elkaar, dus verplaats de eerste naar de linkerrand en schuif deze met twee pixels weg. Evenzo duwt u hem vanaf de bovenrand twee pixels weg. Plaats de volgende pictogrammen twee pixels van de bovenrand en twee pixels van elkaar vandaan. Je zou dit moeten eindigen:

Dit wordt onze Retina-versie. Negeer de zwarte achtergrond hier, ik heb dit toegevoegd zodat we de pictogrammen in de afbeelding kunnen zien.

Photoshop gebruiken Bewaar voor web functie (of een equivalent in uw toepassing) sla deze afbeelding op met de bestandsnaam [email protected]. Zorg ervoor dat u het in de afbeeldingenmap van ons project plaatst. Nu moeten we het formaat van de sprite-afbeelding aanpassen om de standaardresolutieafmeting te maken. We kunnen dit in Photoshop rechtstreeks in de Bewaar voor web dialoog venster. Het belangrijkste is dat de afbeelding moet worden verkleind naar 76px bij 52px. Sla deze grootte op als sociaal-sprite.pngen plaats het ook in de afbeeldingenmap.

Daarmee hebben we onze sprites dus laten we wat code schrijven om ze te gebruiken! Plaats de volgende code terug in de hoofdsectie direct na de stijlen voor de h1en h2.

.sociaal positie: absoluut; top: 55px; rechts: 50px; overloop verborgen; a float: left; breedte: 26px; hoogte: 26px; marge: 0 5px; text-indent: -9999px; achtergrond: url (... /images/social-sprite.png) geen herhaling; opaciteit: 0,8; &: hover opacity: 1.0;  @media-scherm en (-webkit-min-apparaat-pixel-ratio: 2), scherm en (-min-device-pixel-ratio: 2) background: url (... /images/[email protected] ) geen herhaling; achtergrondgrootte: 76 px 26 px;  & .facebook background-position: 0px 0px;  & .twitter background-position: -25px 0px;  & .instagram background-position: -50px 0px;

Wauw, dat ziet er ingewikkeld uit, hoewel het niet echt, eerlijk is! Om te beginnen plaatsen we de verpakking .sociaal element in de rechterbovenhoek.

Vervolgens passen we enkele stijlen toe op de tags om de hoogte en breedte van elke tag in te stellen en om de tekst uit het beeld te verwijderen door een grote te gebruiken tekst streepje. We hebben ook de basis ingesteld ondoorzichtigheidtot 0,8 die we veranderen in 1,0 bij zweven. Dit geeft een eenvoudig rollover-effect.

Het volgende gedeelte is voor onze sprites. We moeten apparaten met een hoge DPI-schermen laten weten waar ze de activa met hogere resolutie kunnen vinden die de mediaquery goed verzorgt. We moeten zeker de background-size eigenschap, zodat de afbeelding wordt verkleind naar de "juiste" grootte. Nu moeten we de background-positionvoor elk pictogram. Opslaan, opslaan, opslaan en vernieuwen!

Zoals je ons kunt zien fancy-font stijl werkt aan de naam en onze sociale pictogrammen zien er prachtig uit. Goed gedaan!

De volgende sectie gaat de belangrijkste inhoud behandelen waar we Instafeed.js zullen gebruiken om in de API van Instagram te haken en enkele afbeeldingen voor onze pagina door te nemen.

Instagram Feed

We beginnen met het toevoegen van wat markeringen aan ons index.htmlpagina, dus open het en kopieer / plak het volgende in de

label:

 
 
 
 
Nieuwste foto's
 
  
  
 
 
  
309 vind-ik-leuks
 
 
 Fantastische architectuur #architecture #testing 
16 september 2014

Je ziet hier dat ik elke sectie heb gemarkeerd die we nodig hebben voor de Instagram-foto's. De code hiervoor wordt niet daadwerkelijk van de HTML-pagina geladen, maar in plaats daarvan van het JavaScript dat we schrijven voor Instafeed.js. Maak je hier voorlopig geen zorgen over, we proberen de styling in dit stadium gewoon goed te krijgen.

Bootstrap's Grid

Een ding dat je misschien opvalt, als je Bootstrap eerder hebt gebruikt, is dat we voor het eerst enkele Bootstrap-klassen gebruiken. Wij maken gebruik van col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx klassen om de elementen aan te passen op verschillende schermformaten. De manier waarop het Bootstrap-raster werkt, in een notendop, is door containers, rijen en kolommen. elk rijmoet in een houder en elke kolom moet in een rij. Er moeten ook in totaal twaalf kolommen zijnin elke rij. Dit is waar de klassen van houden col-xs-12kom erin. Op schermgrootte xs dit element zou twaalf kolommen moeten beslaan wat visueel op het scherm verschijnt als één grote kolom. 

Evenzo, als we het zetten col-xs-12 col-sm-6 col-md-3als klassen op een element zal het dat element opdragen om een ​​lay-out met volledige breedte te hebben xsschermgrootte, twee kolommenop sm schermgrootte en vier kolommen op md scherm grootte. In het begin is het een beetje verwarrend, maar als je begrijpt hoe de klassen worden genoemd en wat elke klas op het scherm vertegenwoordigt, wordt het behoorlijk intuïtief om uiteindelijk te gebruiken. 

Leer meer over Bootstrap in de gratis Tuts + cursus Bootstrap 3 voor Web Design.

Een ander punt om te noemen is het gebruik van test_img.jpgwat nog niet bestaat. Dit is een tijdelijke afbeelding die ik heb gemaakt om te gebruiken in de markup. U kunt uw eigen bestanden maken of gebruiken in de meegeleverde bronbestanden. Zorg er wel voor dat u deze in de afbeeldingen directory.

Instagram stijlen

Nu hebben we de markup, laten we een paar stijlen toevoegen:

.instagram-wrap background: $ lichtgrijs;  .instagram-content h3 text-transform: hoofdletter; letter-spacing: 0.5em; lettergrootte: 12px; font-gewicht: 700; text-align: center; opvulling: $ opvulling * 5 0; kleur: donkerder ($ lichtgrijs, 20%);

U moet deze code meteen na het geheel plaatsen hoofd blokkeren in het hoofdbestand van Sass. Het past een aantal achtergrondkleureneigenschappen en letterstijlen toe. Sla het Sass-bestand op en neem een ​​kijkje in de browser.

Die kleine hoeveelheid code heeft een wezenlijk verschil gemaakt. We moeten het echter nog beter maken, dus voeg in het Sass-bestand de volgende code toe:

.fotolijst margin: 0 0 $ marge * 3 0; .image-wrap img width: 100%; . houdt niet van positie: absoluut; onderkant: 5px; links: 15px; opvulling: $ opvulling / 2; achtergrond: $ zwart; achtergrond: rgba ($ zwart, 0,4); kleur: $ wit;  .beschrijving font-family: $ sub-font; lettergrootte: 12px; achtergrond: $ wit; kleur: $ mediumgrijs; letter-spacing: 1px; opvulling: $ opvulling * 1,5; hoogte: 75 px; overloop verborgen; white-space: nowrap; tekstoverloop: ellips;

Dit moet meteen na de h3verklaring binnen .Instagram-inhoud.Laten we dit beetje bij beetje snel doorlopen. We geven onze .foto-boxwat ondermarge, zodat ze allemaal mooi uit elkaar staan. We hoeven ons geen zorgen te maken over de afstand tussen links en rechts zoals dat door Bootstrap wordt afgehandeld. We zorgen er vervolgens voor dat alle afbeeldingen in onze .image-wrap zijn 100% breed, dus ze schalen met de browser. De .sympathieën element moet absoluut in de linkerbenedenhoek van het afbeeldingsvak worden geplaatst en het heeft witte tekst op semi-transparante zwarte achtergrond. 

Ten slotte, de stijlen voor .Omschrijving. Met de laatste vier eigenschappen kan het kader elke overvolle tekst op een sierlijke manier verbergen door aan het einde een ellips te geven. Het goede ding om dit te doen in CSS is dat wanneer de vakken van grootte veranderen, er meer of minder inhoud zal worden onthuld, maar de ellips zal zijn werk nog steeds doen als dat nodig is. Browserondersteuning is ook zeer compleet.

Weer tijd om het bestand op te slaan en de browser te verversen:

Dit ziet er nu prachtig uit! Ik denk dat de volgende stap is om onze HTML te vervangen door de feitelijke Instagram-feedafbeeldingen met de hulp van Instafeed.js.

Instafeed.js gebruiken

De manier waarop deze plug-in werkt, maakt het eenvoudig voor iedereen om een ​​Instagram-feed aan hun website toe te voegen. Je hebt echter een client-ID van Instagram nodig om deze te gebruiken. Je kunt er een krijgen door je aan te melden voor een Instagram-account en naar de ontwikkelaarssectie te gaan om je Client-ID in te stellen.

Zodra je dat allemaal hebt ingesteld, moeten we de volgende code toevoegen aan de app.js het dossier:

$ (function () // Instafeed instellen var feed = nieuwe Instafeed (clientId: '97ae5f4c024c4a91804f959f43f2635f', doel: 'instafeed', get: 'tagged', tagName: 'photographyportfolio', links: true, limit: 8, sortBy: 'meest recente', resolutie: 'standard_resolution', sjabloon: '
likes Likes
onderschrift
 Model.date
'); feed.run (); );

Laat me weten wat hier gebeurt:

Ten eerste, wat jQuery. Begin met een document-ready-functie (afgekorte versie) zodat niets wordt uitgevoerd totdat we klaar zijn.

Ten tweede, verklaar a voedenvariabele en stel de waarde ervan in op een nieuw exemplaar van Instafeed.

Geef vervolgens Instafeed enkele opties om te regelen wat het oplevert:

  • klant identificatie - De client-ID die u hebt verkregen van Instagram.
  • doelwit - De ID van het element op de pagina die u met afbeeldingen wilt vullen.
  • krijgen - De modus Instafeed wordt uitgevoerd. Hier wordt 'getagd' gebruikt, zodat Instafeed weet dat we op zoek zijn naar tagname.
  • tagName - De naam van de tag waarnaar moet worden gezocht.
  • koppelingen - Of je de afbeeldingen in links terug wilt zetten naar Instagram
  • begrenzing - Beperk het aantal afbeeldingen dat wordt geretourneerd. Handig voor paging.
  • sorteer op - Hoe de geretourneerde afbeeldingen te sorteren. Instellen op meest recente voor ons project.
  • resolutie - De grootte van de afbeeldingen is geretourneerd.
  • sjabloon - De HTML die moet worden gebruikt bij het renderen van de afbeeldingen op de pagina. We zullen de markup gebruiken die we eerder hebben gemaakt. Instafeed gebruikt accolades om aan te geven waar de verschillende eigenschappen van de afbeelding worden ingevoegd.

Voer ten slotte de feed uit!

Als u het bestand opslaat en de browser vernieuwt, ziet u iets soortgelijks:

Als u problemen ondervindt, zorg dan dat uw klant-ID correct is en dat de code in orde is. Als je de inhoud van de bronbestanden gebruikt, zou alles in orde moeten zijn. Je zou acht afbeeldingen moeten zien teruggestuurd van Instagram met de sympathieën en omschrijvingen tonen.

Opruimen

We moeten nu onze HTML opschonen omdat we nog steeds de oorspronkelijke sjabloon hebben die we eerder hebben gecodeerd. Schakel terug naar index.htmlen zoek de volgende code ... 

 
 
  
309 vind-ik-leuks
 
 
 Fantastische architectuur #architecture #testing 
16 september 2014

Verwijder of becommentarieer dit. Ik heb besloten er commentaar op te geven, zodat ik er later naar kan verwijzen als dat nodig is.

De voettekst

Terug in index.html voeg de volgende code toe binnen de

×