Accentsconagua

Construirea unui portofoliu bazat pe Instagram cu Bootstrap

Web design
Share

În acest tutorial voi trece prin procesul de creare a portofoliului simplu bazat pe Instagram așa cum a fost proiectat într-un tutorial anterior al lui Tomas Laurinavicius.

Thomas a făcut o treabă minunată păstrând design-ul simplu, spațios și funcțional, așa că cred că este corect să facem același lucru și atunci când îl construim. Pentru a ne face viața mai ușoară, ne vom baza pe câteva instrumente și biblioteci, așa că să începem să le aruncăm o privire.

Instrumentele de comerț

Sunt câteva lucruri pe care trebuie să le pregătim înainte de a începe construirea noastră. Sunt:

  • Sass
  • Twitter Bootstrap (versiunea Sass)
  • Instafeed.js
  • Modernizr

Mai întâi de toate, va trebui să îl puneți pe Sass pe mașina dvs. Cel mai simplu mod de a face acest lucru este folosirea uneia dintre aplicațiile excelente disponibile pentru a face toate vizionarea și compilarea. În prezent, folosesc Koala, care este cross-platformă și gratuită, deci este o opțiune foarte bună pentru a te ridica și a alerga rapid. Există alternative, cum ar fi aplicația Scout, Prepros și Compass. Toate acestea oferă suficient de aproape aceeași funcționalitate, astfel încât alegerea să fie a ta!

Următorul este Bootstrap. Vom folosi Bootstrap la un nivel foarte simplu, pentru a face față unora dintre elementele sensibile ale paginii. Vrem în mod special să descărcați Versiunea Sass astfel încât să putem include în propria foaie de stil și să folosim variabilele disponibile. Continuați și descărcați cea mai recentă versiune.

Aproape acolo! Acum trebuie să luăm o copie a Instafeed.js care să se ocupe de toate lucrările care captură fotografii de la Instagram. Merită menționat aici că pentru a obține ceva de la Instagram trebuie să furnizați plugin-ul cu un client ID care pot fi generate prin înscrierea la Instagram și completarea formularului în secțiunea dezvoltator.

În cele din urmă, ar trebui să descărcăm cea mai recentă versiune a Modernizr, astfel încât, dacă este necesar, să putem viza anumite caracteristici ale browserului și, prin urmare, avem șablonul HTML5 pentru browserele mai vechi. Acest lucru nu este strict necesar, dar îmi place să îl includ în proiecte pentru a fi sigur.

Acum avem aceste active pe care le putem începe construirea noastră!

Structură de fișiere și foldere

Trebuie să creați câteva fișiere și foldere pentru proiectul nostru, deci mergeți mai departe și creați următoarele în directorul rădăcină al proiectului.

  • css /
  • images /
  • js /
  • index.html

Acesta este primul nostru punct de pornire. Apoi, găsiți arhiva Bootstrap pe care ați descărcat-o mai devreme și extrageți-o undeva pe care o puteți găsi cu ușurință. În interiorul dosarului extras ar trebui să fie un dosar numit bunuri. Deschideți acest dosar și veți vedea ceva similar cu următorul:

Copiați fonturidirector în rădăcina proiectului cu celelalte foldere pe care tocmai le-am creat. Deschide javascripts și copiați bootstrap.jsfișier în jsdosarul proiectului nostru. În cele din urmă, deschideți stylesheets director și copiați bootstrap.scssfișier și bootstrapdosar în css dosarul proiectului nostru. Fișierele și folderele noastre ar trebui să pară așa ...

Buna treaba! Acum, găsiți instafeed.min.js și Modernizr fișierele pe care le-ați descărcat mai devreme și le copiați în jspliant. Trebuie doar să stabilim câteva lucruri înainte de a începe să construim aspectul.

Sass Setup

Acum este momentul să vă setați proiectul în aplicația Sass pe care ați ales să o utilizați. În Koala aceasta este o problemă de a glisa folderul în fereastra aplicației. Cred că este un proces similar și pentru ceilalți. Următorul lucru pe care îl fac întotdeauna când stabilesc lucrurile este uita-te la opțiunile de compilare Sass și, dacă este disponibil, bifați caseta pentru a utiliza Autoprefixer. Această adăugire la îndemână va analiza fișierul nostru Sass și vom adăuga orice prefix de furnizor de care avem nevoie, astfel încât să nu avem nevoie să ne facem griji cu privire la scrierea noastră. Simțiți-vă liber să jucați despre setările pe care le oferă aplicația dvs. Sass pentru a obține cele mai bune setări pentru dvs. Îmi place să păstrez lucrurile simple și în mod normal va verifica doar Autoprefix și un stil de ieșire de Extins (comprimat in productie).

Adăugarea de fișiere

Deschideți proiectul în editorul pe care îl utilizați, astfel încât să putem adăuga câteva fișiere.

În primul rând sub cssdirector adăuga un fișier numit style.scss. Apoi înăuntru js dosarul adaugă un fișier numit app.js.

Asigurați-vă că actualizați aplicația Sass pe care o utilizați, astfel încât să preia noile fișiere. Unii fac acest lucru automat, dar cel mai bine este să verificați și să actualizați manual, dacă este necesar.

Cred că tot acest fișier este creat pentru moment. Putem continua să construim structura!

Începeți construirea

Deschide index.html și introduceți (sau copiați / inserați) următoarea bază HTML:

    Portofoliul Instagram

Avem primul nostru cod! Să-l rupem. 

secțiunea conține fereastra de vizualizare necesarăetichetă, astfel că interogările noastre media funcționează corect. Apoi, oferim paginii un titlu și includeți o  pentru diferitele fonturi Google pe care le dorim să le folosim. Fonturile de aici se bazează pe cele utilizate în designul lui Thomas. Următoarea linie poate părea ciudată, deoarece nu am creat-o style.css dosar, dar generarea acelui fișier va fi gestionat de compilatorul nostru Sass. În cele din urmă, vom include și Modernizr.

elementul conține alte patru elemente pentru a ține fiecare bandă care apare pe proiect. Am aplicat câteva clase descriptive la

astfel încât să putem vedea în mod clar pentru ce vor fi folosite.

Referențierea fișierelor JavaScript

Adăugați următorul fragment de sub footer-bottom secțiune:

Aceste > tag-urile indică diferitele noastre biblioteci JavaScript, inclusiv jQuery din CDN-ul Google, care este cerut de Bootstrap.

stiluri

Avem blocurile noastre de bază, așa că să continuăm prin înființarea noastră style.scss trimiteți un pic.

/ * * Variabile personalizate * / $ main-font: 'Lato', sans-serif; $ sub-font: "Montserrat", sans-serif; $ fancy-font: "Kaushan Script", cursive; $ font-size: 16px; $ negru: # 000; $ alb: #FFF; $ gri: # 585c65; $ mediumgrey: # 9b9b9b; $ lightgrey: #eeeeee; $ albastru: # 3466a1; $ padding: 10px; $ margine: 10px; / * * Suprascrie variabilele Bootstrap * / $ font-family-sans-serif: $ main-font; @import 'bootstrap';

Aici setăm câteva variabile pe care le putem utiliza în foaia de stil mai târziu. În primul rând sunt câteva variabile legate de font. Aici introducem fonturile Google pe care le-am inclus mai devreme și le acordăm fiecăruia o schimbare dacă, din anumite motive, fontul nu se încarcă sau nu funcționează.

Apoi avem câteva variabile de culoare care au fost selectate din design. Acesta este motivul pentru care îl iubesc pe Sass atât de mult încât să ne putem configura culorile aici și să uităm de amintirea sau copierea valorilor hexajelor peste tot.

În cele din urmă, pentru variabilele personalizate, avem o marjă și o umplutură simplă. Îmi place să le includ pe acestea chiar dacă nu le folosesc întotdeauna. Este bine să avem o valoare de bază cu care să lucrăm și ne dă posibilitatea de a face modificări uniforme la elementele care folosesc variabilele.

Următoarea secțiune este locul în care includem Bootstrap, dar înainte de a face noi ar trebui să setăm variabila fontului principal Bootstrap $ font-family-sans-serif pentru a ne egala cu cele create anterior $ Main-font variabil. Aceasta înseamnă că, atunci când se compilează Bootstrap, se va folosi mai degrabă fontul nostru principal decât propriul font.

 @importdeclarația de aici nu include .SCSS la sfârșitul fișierului, deoarece acest lucru nu este necesar când includeți alte fișiere Sass. Sass este suficient de inteligent să caute și să găsească dosarul potrivit. Salvați fișierul și, sperăm, aplicația dvs. Sass vă va da seama că ați salvat un fișier Sass și îl compilați style.css.

Mai multe stiluri

Să continuăm să adăugăm câteva stiluri:

* poziție: relativă; box-size: caseta de margine;  corp culoare: $ gri; font-size: $ font-size;  header max-height: 600px; înălțime: 600px; overflow: ascuns;

Aici folosim selectorul universal * pentru a seta totul ca poziție: relativăastfel încât nu există surprize atunci când se utilizează elemente absolut poziționate. Este, de asemenea, la îndemână să setați universal box-dimensionare proprietate la frontieră-box astfel încât să putem folosi lățimea procentuală și să nu ne îngrijorăm de eventuala umplutură a elementului care influențează aspectul.

Apoi, setăm o culoare și o dimensiune implicită pentru corpul nostru și dăm element înălțime.

Asta e pentru dosarul nostru Sass de acum. Întoarceți-vă înapoi index.html astfel încât să putem începe lucrul la antet.

Îndepărtați antetul

Antetul pentru acest design este necomplicat în proiectare, ceea ce îl face mai ușor de construit. Marcajul la care vom lucra este următorul:

Munţi 
 Jonathan 
 
 
Salut! Sunt Jonathan
 
Îmi place să călătoresc în toată lumea și să proiectez lucruri frumoase
 
 
 Facebook Twitter Instagram

Ar trebui să se întâmple între noi  Etichete. Veți observa că eticheta imaginii se referă mai întâi la o imagine care nu există. Vom avea nevoie să scoatem această imagine din PSD. Nu voi intra în detaliile despre cum să faceți acest lucru în acest tutorial, dar dacă aveți nevoie de ajutor cu acest proces, verificați acest sfat rapid.

Restul codului antetului cuprinde trei div elemente care conțin numele, titlurile și legăturile sociale. Am aplicat câteva clase acestor elemente pe care le vom folosi în continuare în fișierul nostru Sass.

Stiluri de antet

Să începem prin adăugarea câtorva linii de cod în interiorul nostru antet declaraţie.

img position: fixed; top: 0px; stânga: 50%; margin-stânga: -600px; lățime: 1200px; Ecranul @media și (min-width: $ screen-lg) top: auto; stânga: auto; marja: 0; lățime: 100%;

Acest lucru ar trebui să fie imbricate interior  antet secțiune a fișierului nostru Sass chiar sub declarațiile pentru antetul în sine.

Imagine fixă

Veți vedea aici că am stabilit poziția imgeticheta la fix. Aceasta înseamnă că imaginea va rămâne în poziție atunci când utilizatorul scroll, creând astfel un sentiment de adâncime. Ideea este că conținutul se derulează peste imaginea din antet. Pe măsură ce adoptăm prima metodologie mobilă, stilurile noastre de bază dau imaginii o lățime stabilită și o poziționează în centru, aplicând o margine stângă negativă exact la jumătate din lățimea acesteia. Acest lucru se datorează faptului că punctul de transformare al imaginii în CSS este colțul din stânga sus, așa că atunci când dăm stânga: 50%declarând că va plasa marginea din stânga a elementului în centrul ecranului. Mica marjă negativă de marjă ne ajută să ne concentrăm în mod corespunzător asupra elementelor centrale cu poziționare absolută sau fixă.

Interogare media

Apoi, avem prima utilizare a uneia dintre variabilele dimensiunii ecranului. Spunem aici: pe dimensiunile mari ale ferestrelor, imaginea umple lățimea browserului și o poziționează înapoi în colțul din stânga sus. Este important să resetați marginea astfel încât imaginea să nu fie trasă ușor spre stânga.

Să aruncăm o privire la munca noastră în browser!

Să continuăm ... 

.nume font-size: 21px; poziția: absolută; top: 50px; stânga: 50px; culoare: $ alb;  .titles position: absolute; fund: 40%; lățime: 100%; text-align: centru; Ecranul @media și (min-lățime: $ ecran-lg) jos: 50%;  h1, h2 lățimea: 100%; culoare: $ alb; marja: 0;

Aici am creat Numeși titluri elementele "și stilurile de fonturi. Trebuie să folosim o interogare media pe titlurielement pentru al împinge puțin mai mult pe ecrane mari. Să facem o reîmprospătare rapidă în browser.

Asta arată deja mai bine! Să mai ordonăm aceste rubrici puțin mai mult.

h1 text-transform: majuscule; greutatea fontului: 700; font-size: 36px; împărțirea literelor: 0,06; margin-bottom: $ marja; span afișare: bloc; Ecranul @media și (min-width: $ screen-md) display: inline;  h2 font-size: 16px; lățime: 70%; marja: 0 auto; Ecranul @media și (min-width: $ screen-lg) lățime: 100%; marja: 0;

Principalul lucru de observat aici ar fi stil pentru deschidereelement. Folosim deschidereeticheta în codul nostru pentru a înfășura o porțiune din poziția principală. Acest lucru ne permite să-l vizăm în CSS și, așa cum am făcut aici, să-i schimbăm aspectul. Pe mobil avem nevoie să fie un element la nivel de bloc, astfel încât stivele de dedesubt, dar pe ecrane mai mari este bine pentru el să ruleze alături de text normal. Ar trebui să fie mult mai bine acum ...

Fancy Font

Un stil rapid pe care ar trebui să-l adăugăm este pentru numele din colțul din stânga sus. Plasați următorul cod la sfârșitul fișierului Sass, în afară de antet bloc.

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

Aplicăm pe noi fantezie la orice element cu această clasă. Acest lucru este astfel încât să putem reutiliza acest lucru ori de câte ori avem nevoie și nu se limitează la un anumit element.

Icoane sociale

Ar trebui să ne îndreptăm atenția asupra icoanelor sociale care, în acest caz, vor implica crearea de sprite pentru afișe de rezoluție normală și afișaje de înaltă rezoluție (Retina).

Treceți peste Iconfinder și apucați fiecare din icoanele din design. Cel mai bine este să alegeți o dimensiune mai mare decât vom avea nevoie, astfel încât nu există probleme de diminuare a acestora. Întotdeauna am optat pentru dimensiunea de 256px.

În software-ul dvs. de editare grafică (cum ar fi Photoshop) creați un fișier nou care este de 152px-52px. Trageți în fiecare dintre pictograme și scalați fiecare până la 48 de pixeli până la 48 de pixeli. Icoanele vin negre, dar avem nevoie ca ele să fie albe, deci aplicați un filtru fiecăruia.

Acum trebuie să le poziționăm. Vom avea doi pixeli de spațiu în jurul fiecăruia, așa că mișcați prima margine din stânga și împinți-o cu doi pixeli. De asemenea, împingeți-l departe de marginea superioară cu doi pixeli. Poziționați următoarele pictograme cu doi pixeli de la marginea superioară și doi pixeli unul de celălalt. Ar trebui să ajungeți la acest lucru:

Aceasta va fi versiunea noastră Retina. Ignorați fundalul negru aici, am adăugat acest lucru doar pentru a vedea efectiv pictogramele din imagine.

Folosind Photoshop Salvați pentru Web (sau echivalent în aplicația dvs.) salvați această imagine cu numele fișierului [email protected]. Asigurați-vă că ați pus-o în folderul de imagini al proiectului nostru. Acum trebuie să redimensionăm imaginea sprite pentru a face dimensiunea standard a rezoluției. Putem face acest lucru în Photoshop direct în Salvați pentru Web căsuță de dialog. Lucrul important este ca imaginea să fie redimensionată la 76px la 52px. Salvați această dimensiune ca social-sprite.pngși plasați-o și în folderul cu imagini.

Cu asta, avem spritele noastre, așa că să scriem un cod pentru a le folosi! Plasați codul următor în interiorul antetsecțiune imediat după stilurile pentru h1și h2.

.social poziție: absolută; top: 55px; dreapta: 50px; overflow: ascuns; un float: left; lățime: 26px; înălțime: 26px; margine: 0 5px; text-indent: -9999px; fundal: url (... /images/social-sprite.png) no-repeat; opacitate: 0,8; &: mutați opacity: 1.0;  ecranul @media și (-webkit-min-device-pixel-ratio: 2), ecranul și (-min-device-pixel-ratio: 2) background: url (... /images/[email protected] ) nu-repeta; dimensiune de fundal: 76px 26px;  & .facebook background-position: 0px 0px;  & .twitter background-position: -25px 0px;  & .instagram background-position: -50px 0px;

Wow, pare complicat, deși nu este într-adevăr cinstit! Pentru început, poziționăm ambalajul .social element în colțul din dreapta sus.

Apoi, aplicăm câteva stiluri pentru pentru a seta înălțimea și lățimea fiecăruia și pentru a elimina textul din vizualizare utilizând o imagine mare text-liniuță. Am stabilit și baza opacitatepână la 0,8 pe care le schimbăm la 1.0 pe hover. Acest lucru oferă un efect de rollover simplu.

Următoarea secțiune este pentru spritele noastre. Trebuie să lăsăm dispozitivele cu ecrane DPI înalte să știe unde să găsească un material cu rezoluție mai mare pe care interogarea media are grijă de frumos. Trebuie să stabilim background-size proprietate, astfel încât imaginea să scadă până la dimensiunea "corectă". Acum trebuie să setăm background-positionpentru fiecare pictogramă. Salvați, salvați, salvați și actualizați!

După cum puteți vedea pe noi fantezie-font stilul lucrează la numele și icoanele noastre sociale arată minunat. Bună treabă!

Următoarea secțiune se referă la conținutul principal în care vom folosi Instafeed.js pentru a intra în API-ul Instagram și pentru a trage prin câteva imagini pentru pagina noastră.

Instagram Feed

Vom începe prin adăugarea unui marcaj către noi index.html, deschideți-o astfel și copiați / inserați următoarele în interiorul

etichetă:

 
 
 
 
Ultimele fotografii
 
  
  
 
 
  
309 Îmi place
 
 
 Fantastic Architecture #architecture #testing 
16 septembrie 2014

Veți vedea aici că am marcat fiecare secțiune de care vom avea nevoie pentru fotografiile Instagram. Codul pentru acest lucru nu va fi de fapt încărcat din pagina HTML, ci din JavaScript, pe care îl vom scrie pentru Instafeed.js. Nu vă faceți griji pentru asta acum, încercăm doar să obținem stilul corect în acest stadiu.

Bootstrap's Grid

Un lucru pe care îl puteți observa, dacă ați folosit Bootstrap înainte, este că folosim pentru prima dată câteva clase de bootstrap. Noi facem uz de Col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx pentru a ajusta elementele la diferite dimensiuni ale ecranului. Modul în care funcționează grilă Bootstrap, pe scurt, este prin containere, rânduri și coloane. Fiecare rândtrebuie să fie în interior recipient și fiecare coloană trebuie să fie în interior rând. Trebuie să existe și un total de douăsprezece coloaneîn fiecare rând. Aici se află clasele col-xs-12intrați în ea. La dimensiunea ecranului xs acest element ar trebui să cuprindă douăsprezece coloane care, vizual pe ecran, apare ca o coloană mare. 

De asemenea, dacă punem col-xs-12 col-sm-6 col-md-3ca clase pe un element, va instrui acel element să aibă o structură de lățime întreagă la xsdimensiunea ecranului, două coloanela sm dimensiunea ecranului și patru coloane la md marimea ecranului. Este un pic cam confuz la început, dar dacă vă înțelegeți cum sunt numite clasele și ceea ce fiecare reprezintă pe ecran, va deveni destul de intuitiv de utilizat în cele din urmă. 

Aflați mai multe despre Bootstrap în modul gratuit Tuts + curs Bootstrap 3 pentru Web Design.

Un alt punct de reținut este utilizarea lui test_img.jpgcare încă nu există. Aceasta este o imagine de tip placeholder pe care am creat-o pentru a fi utilizată în marcare. Simțiți-vă liber să creați propriul sau să utilizați unul din fișierele sursă furnizate, doar asigurați-vă că ați pus-o în imagini director.

Stiluri Instagram

Acum, avem markup să adăugăm câteva stiluri:

.instagram-wrap fundal: $ lightgrey;  .instagram-content h3 text-transform: majuscule; împărțirea literelor: 0,5; font-size: 12px; greutatea fontului: 700; text-align: centru; umplutură: $ padding * 5 0; culoare: întunecată ($ lightgrey, 20%);

Va trebui să plasați acest cod imediat după ansamblu antet blocați în fișierul principal Sass. Aplică unele proprietăți de culoare de fundal și stiluri de fonturi. Salvați fișierul Sass și aruncați o privire în browser.

Această cantitate mică de cod a făcut o diferență substanțială. Trebuie să facem chiar mai bine, așa că înapoi în fișierul Sass adăugați următorul cod:

.photo-box marja: 0 0 $ marja * 3 0; .image-wrap img lățime: 100%;  .likes position: absolute; fund: 5px; stânga: 15px; padding: $ padding / 2; fundal: $ negru; fundal: rgba ($ negru, 0,4); culoare: $ alb;  .description font-family: $ sub-font; font-size: 12px; fundal: $ alb; culoare: $ mediumgrey; spațierea literelor: 1px; umplutură: $ padding * 1.5; înălțime: 75px; overflow: ascuns; spațiu alb: acum; depășirea textului: elipsă;

Acest lucru trebuie să meargă imediat după h3declarație în interiorul .Instagram conținut.Hai să trecem repede prin asta. Noi ne oferim .foto-boxo margine inferioară, astfel încât fiecare dintre ele să fie distanțată frumos. Nu avem nevoie să ne facem griji cu privire la spațiile stânga și la dreapta, deoarece acestea sunt tratate de Bootstrap. Atunci ne asigurăm că toate imaginile din site-ul nostru .image-wrap sunt de 100% largi, astfel încât acestea scară cu browser-ul. .îi place elementul trebuie să fie poziționat absolut în colțul din stânga jos al casetei de imagine și are text alb pe fond negru semi-transparent. 

În cele din urmă, stilurile pentru .Descriere. Cele patru proprietăți finale permit căsuței să ascundă orice text care se deplasează într-un mod grațios, oferind o elipsă la sfârșit. Lucrul bun în legătură cu acest lucru în CSS este că atunci când cutiile vor schimba dimensiunile mai mult sau mai puțin conținutul va fi dezvăluit, dar elipsa își va face treaba dacă este necesar. Suportul pentru browser este, de asemenea, foarte complet.

Timp din nou pentru a salva fișierul și pentru a reîmprospăta browserul:

Acest lucru arată minunat acum! Cred că următorul pas ar trebui să fie înlocuirea codului HTML cu imaginile efective ale fluxului Instagram cu ajutorul Instafeed.js.

Utilizând Instafeed.js

Modul în care funcționează acest plugin face ca oricine să poată adăuga un feed Instagram pe site-ul lor. Cu toate acestea, veți avea nevoie de un cod de client de la Instagram pentru al utiliza. Puteți obține unul, înscriindu-vă pentru un cont Instagram și îndreptându-vă spre secțiunea dezvoltator pentru a vă configura ID-ul clientului.

Odată ce ați setat totul, trebuie să adăugăm următorul cod la app.js fişier:

$ (funcția () // Configurați instafeed var feed = nou Instafeed (clientId: '97ae5f4c024c4a91804f959f43f2635f', target: 'instafeed', get: 'tagged', tagName: sortBy: "cea mai recentă", rezoluție: 'standard_resolution', șablon: '
le place Îi place
legendă
Model.date
'); feed.run (); );

Permiteți-mi să scap de ceea ce se întâmplă aici:

În primul rând, unele jQuery. Începeți cu o funcție de pregătire a documentelor (versiunea abreviată), astfel încât nimic să nu funcționeze până când nu suntem pregătiți.

În al doilea rând, declară a a hranivariabilă și a stabilit valoarea sa la o nouă instanță Instafeed.

Aprovizionare în continuare Instafeed cu câteva opțiuni pentru a controla ce revine:

  • clientId - ID-ul clientului pe care l-ați obținut de la Instagram.
  • ţintă - ID-ul elementului de pe pagina pe care doriți să o populați cu imagini.
  • obține - Modul Instafeed se execută. Folosind "etichetat" aici, Instafeed știe că căutăm după nume de etichetă.
  • nume eticheta - Numele etichetei pe care doriți să o căutați.
  • Link-uri - Fie să înfășurați imaginile în link-uri înapoi la Instagram
  • limită - Limitați cantitatea de imagini returnate. Utile pentru paginare.
  • filtrează după - Cum să sortați imaginile returnate. Setat la cel mai recent pentru proiectul nostru.
  • rezoluţie - Dimensiunea imaginilor returnate.
  • șablon - HTML-ul utilizat la redarea imaginilor pe pagină. Vom folosi marcajul pe care l-am creat mai devreme. Instafeed utilizează bretele curbate pentru a indica unde vor fi inserate diferitele proprietăți ale imaginii.

În cele din urmă, rulați alimentarea!

Dacă salvați fișierul și actualizați browserul, ar trebui să vedeți ceva similar cu acesta:

Dacă aveți probleme, asigurați-vă că ID-ul clientului dvs. este corect și că codul este OK. Dacă utilizați ceea ce este furnizat în fișierele sursă, totul ar trebui să fie bine. Ar trebui să vedeți opt imagini returnate de la Instagram cu Îi place și descrieri arătând.

Sa cureti

Acum trebuie să ne ordonăm codul HTML deoarece încă avem șablonul inițial pe care l-am codificat mai devreme. Reveniți la index.htmlși găsiți următorul cod ... 

 
 
  
309 Îmi place
 
 
 Fantastic Architecture #architecture #testing 
16 septembrie 2014

Fie eliminați sau comentați acest lucru. Am decis să-l coment, astfel încât să mă pot referi mai târziu la nevoie.

Footerul

Înapoi în index.html adăugați următorul cod în interiorul

×