Dernières photos
 
  
  
 
 
  
309 mentions J'aime
 
 
 Architecture fantastique #architecture #test 
16 septembre 2014
 
 
 
 
 
 
 
 

Vous verrez ici que j'ai balisé chaque section dont nous aurons besoin pour les photos Instagram. Le code correspondant ne sera pas chargé à partir de la page HTML, mais à partir du code JavaScript écrit pour Instafeed.js. Ne vous inquiétez pas pour le moment, nous essayons simplement de bien coiffer le style à ce stade..

Grille de Bootstrap

Si vous avez déjà utilisé Bootstrap, vous remarquerez peut-être que nous utilisons des classes Bootstrap pour la première fois. Nous utilisons col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx classes pour ajuster les éléments à différentes tailles d’écran. En résumé, la grille Bootstrap fonctionne à travers des conteneurs, des lignes et des colonnes. Chaque rangéedoit être à l'intérieur d'un récipient et chaque colonne doit être à l'intérieur d'un rangée. Il doit également y avoir un total de douze colonnesdans chaque rangée. C'est là que les cours aiment col-xs-12entrez dedans. À la taille de l'écran xs cet élément doit s'étendre sur douze colonnes qui, visuellement à l'écran, apparaît comme une grande colonne. 

De même, si nous mettons col-xs-12 col-sm-6 col-md-3en tant que classes sur un élément, il demandera à cet élément d'avoir une mise en page pleine largeur à xstaille de l'écran, deux colonnesà sm taille de l'écran et quatre colonnes à Maryland taille de l'écran. C’est un peu déroutant au début, mais si vous comprenez comment les classes sont nommées et ce que chacune d’elles représente à l’écran, son utilisation deviendra très intuitive à la fin.. 

Un autre point à mentionner est l'utilisation de test_img.jpgqui n'existe pas encore. Ceci est une image de substitution que j'ai créée pour utiliser dans le balisage. N'hésitez pas à créer le vôtre ou à utiliser celui des fichiers source fournis, assurez-vous simplement de le mettre dans le images annuaire.

Styles Instagram

Maintenant, nous avons le balisage ajoutons quelques styles:

.instagram-wrap background: $ lightgrey;  .instagram-content h3 text-transform: uppercase; espacement des lettres: 0.5em; taille de police: 12px; poids de police: 700; text-align: center; remplissage: $ padding * 5 0; couleur: plus foncée (gris clair, 20%); 

Vous aurez besoin de placer ce code juste après le tout entête bloquer dans le fichier Sass principal. Il applique des propriétés de couleur d'arrière-plan et des styles de police. Enregistrez le fichier Sass et jetez un coup d'oeil dans le navigateur.

Cette petite quantité de code a fait une différence substantielle. Nous devons le rendre encore meilleur, alors dans le fichier Sass, ajoutez le code suivant:

.boîte à photos marge: 0 0 $ marge * 3 0; .image-wrap img width: 100%;  .likes position: absolute; en bas: 5px; à gauche: 15px; rembourrage: $ padding / 2; fond: $ noir; arrière-plan: rgba ($ black, 0,4); couleur: $ blanc;  .description font-family: $ sous-font; taille de police: 12px; fond: $ blanc; couleur: gris moyen; espacement des lettres: 1px; rembourrage: $ padding * 1.5; hauteur: 75px; débordement caché; espace blanc: maintenant; débordement de texte: points de suspension; 

Cela doit aller juste après le h3déclaration à l'intérieur .contenu instagram.Passons rapidement en revue ceci petit à petit. Nous donnons notre .boîte à photosun peu de marge inférieure afin que chacun soit bien espacé. Nous n'avons pas à nous soucier des espacements gauche et droit, car cela est géré par Bootstrap. Nous nous assurons ensuite que toutes les images de notre .encapsulation d'image sont 100% de large afin qu'ils évoluent avec le navigateur. le .aime L'élément doit être positionné absolument dans le coin inférieur gauche de la zone d'image et son texte est blanc sur un fond noir semi-transparent.. 

Enfin, les styles pour .la description. Les quatre dernières propriétés permettent à la boîte de masquer gracieusement tout texte en débordement en fournissant des points de suspension à la fin. La bonne chose à faire avec CSS est que lorsque les boîtes changent de taille, plus de contenu est révélé, mais les points de suspension feront quand même leur travail si nécessaire. Le support du navigateur est également très complet.

Il est à nouveau temps d’enregistrer le fichier et d’actualiser le navigateur:

C'est beau maintenant! Je pense que la prochaine étape devrait être de remplacer notre code HTML par les images de flux Instagram à l’aide de Instafeed.js.

Utiliser Instafeed.js

Le fonctionnement de ce plug-in permet à quiconque d'ajouter facilement un flux Instagram à son site Web. Cependant, vous aurez besoin d'un identifiant client d'Instagram pour l'utiliser. Vous pouvez en obtenir un en vous inscrivant à un compte Instagram et en vous rendant dans la section des développeurs pour configurer votre identifiant client..

Une fois que tout est configuré, nous devons ajouter le code suivant à la app.js fichier:

$ (function () // Configurer instafeed var feed = new Instafeed (clientId: '97ae5f4c024c4a91804f959f43f2635f', cible: 'instafeed', obtenez: 'tagged', tagName: 'photographyportfolio', liens: true, limite: 8, sortBy: 'le plus récent', résolution: 'résolution standard', template: '
likes J'aime
légende
model.date
'); feed.run (); );

Laissez-moi vous expliquer ce qui se passe ici:

Tout d'abord, un peu de jQuery. Commencez avec une fonction de préparation du document (version abrégée) afin que rien ne soit exécuté avant d'être prêt.

Deuxièmement, déclarer un alimentationvariable et définir sa valeur à une nouvelle instance de Instafeed.

Procurez ensuite Instafeed avec quelques options pour contrôler ce qu’il renvoie:

• identité du client - L'identifiant client que vous avez obtenu sur Instagram.
• cible - L'ID de l'élément sur la page que vous souhaitez peupler avec des images.
  
• obtenir - Le mode dans lequel Instafeed est en cours d'exécution. Utilisez 'tagged' ici pour qu'Instafeed sache que nous recherchons par nom.
  
• tagName - Le nom de la balise à rechercher par.
  
• liens - S'il faut envelopper les images dans des liens vers Instagram
  
• limite - Limitez le nombre d'images renvoyées. Utile pour la pagination.
  
• Trier par - Comment trier les images retournées. Mis à le plus récent pour notre projet.
  
• résolution - La taille des images retournées.
  
• modèle - Le code HTML à utiliser lors du rendu des images sur la page. Nous allons utiliser le balisage que nous avons créé plus tôt. Instafeed utilise des accolades pour indiquer l'endroit où les différentes propriétés de l'image seront insérées.
  

Enfin, lancez le flux!

Si vous enregistrez le fichier et actualisez le navigateur, vous devriez voir quelque chose de similaire à ceci:

Si vous avez des problèmes, assurez-vous que votre ID client est correct et que le code est correct. Si vous utilisez ce qui est fourni dans les fichiers source, tout devrait bien se passer. Vous devriez voir huit images renvoyées d’Instagram avec les Aime et des descriptions montrant.

Rangement

Nous devons maintenant ranger notre code HTML car nous avons toujours le modèle initial que nous avons codé plus tôt. Revenez à index.htmlet trouvez le code suivant…

 
 
  
309 mentions J'aime
 
 
 Architecture fantastique #architecture #test 
16 septembre 2014
 
 
 

Supprimez ou commentez ceci. J'ai décidé de commenter afin que je puisse y faire référence plus tard si nécessaire.

Le pied de page

Retour dans index.html ajoutez le code suivant à l'intérieur du