Instagram Masonry Wall<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f5f5f5;\n }\n\n .masonry {\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n padding: 15px;\n }\n\n .masonry-item {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n display: inline-block;\n margin-bottom: 15px;\n flex: 1 1 calc(33.333% - 30px); \/* 30px is double the gap size *\/\n box-sizing: border-box;\n overflow: hidden; \/* To handle overflow of text *\/\n }\n\n .masonry-item a {\n display: block;\n text-decoration: none;\n color: inherit;\n }\n\n .masonry-item img {\n width: 100%;\n height: 20rem; \/* Fixed height to make all images the same size *\/\n object-fit: cover; \/* Ensure the image covers the area without distortion *\/\n display: block;\n }\n\n .masonry-item p {\n padding: 10px;\n margin: 0;\n font-size: 14px;\n color: #333;\n text-align: center;\n }\n\n @media (max-width: 768px) {\n .masonry-item {\n flex: 1 1 calc(50% - 30px); \/* For smaller screens, use 2 columns *\/\n }\n }\n\n @media (max-width: 480px) {\n .masonry-item {\n flex: 1 1 100%; \/* For mobile screens, use 1 column *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"masonry\">\n \n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n var accessToken = 'IGAAHEUdHhoK1BZAE94cHdFR3dxM2xXT2RpQ29GVlRNaU5tTURzeTQzeTUyZAnA0eThnVTllRTZAuYWZA0d1F4VVRKdXdkWHBRcy1PczlscGNrbThqQWhVQmV2c0FQVURhNTdnaG5oMUJSUy1BUEMxVjFfNEY1clJVeHhqaE1qQ3JZANAZDZD'; \/\/ Replace with your access token\n var apiEndpoint = `https:\/\/graph.instagram.com\/me\/media?fields=id,caption,media_url,media_type,permalink&access_token=${accessToken}`;\n\n console.log('Fetching Instagram data from:', apiEndpoint);\n\n fetch(apiEndpoint)\n .then(response => {\n if (!response.ok) {\n throw new Error('Network response was not ok ' + response.statusText);\n }\n return response.json();\n })\n .then(data => {\n console.log('Instagram API response:', data); \/\/ Log data to debug\n\n if (!data.data || data.data.length === 0) {\n throw new Error('No data found in Instagram API response');\n }\n\n var masonryGrid = document.querySelector('.masonry');\n\n data.data.slice(0, 8).forEach(item => {\n if (item.media_type === 'IMAGE' || item.media_type === 'CAROUSEL_ALBUM') {\n var itemElement = document.createElement('div');\n itemElement.classList.add('masonry-item');\n\n var linkElement = document.createElement('a');\n linkElement.href = item.permalink;\n linkElement.target = '_blank';\n\n var imgElement = document.createElement('img');\n imgElement.src = item.media_url;\n imgElement.alt = item.caption || 'Instagram Image';\n\n var captionElement = document.createElement('p');\n captionElement.textContent = item.caption || '';\n\n linkElement.appendChild(imgElement);\n itemElement.appendChild(linkElement);\n itemElement.appendChild(captionElement);\n\n masonryGrid.appendChild(itemElement);\n }\n });\n })\n .catch(error => console.error('Error fetching Instagram photos:', error));\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tarleton State Socials<\/p>\n","protected":false},"author":3,"featured_media":49676,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-51352","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"coauthors":[],"author_meta":{"author_link":"https:\/\/www.tarleton.edu\/news\/author\/keegan-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/","display_name":"keegan"},"relative_dates":{"created":"Posted 2 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on July 25, 2024","modified":"Updated on July 31, 2024"},"absolute_dates_time":{"created":"Posted on July 25, 2024 11:58 am","modified":"Updated on July 31, 2024 9:27 am"},"featured_img_caption":"Tarleton State University entrance with flags and flowers.","featured_img":"https:\/\/www.tarleton.edu\/news\/wp-content\/uploads\/sites\/65\/2023\/10\/Spring-Flowers-Admin-Gates_7545.jpg","series_order":"","_links":{"self":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/pages\/51352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/comments?post=51352"}],"version-history":[{"count":0,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/pages\/51352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/media\/49676"}],"wp:attachment":[{"href":"https:\/\/www.tarleton.edu\/news\/wp-json\/wp\/v2\/media?parent=51352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":51352,"date":"2024-07-25T11:58:12","date_gmt":"2024-07-25T16:58:12","guid":{"rendered":"https:\/\/www.tarleton.edu\/news\/?page_id=51352"},"modified":"2024-07-31T09:27:08","modified_gmt":"2024-07-31T14:27:08","slug":"keep-up-with-campus","status":"publish","type":"page","link":"https:\/\/www.tarleton.edu\/news\/keep-up-with-campus\/","title":{"rendered":"Keep up with Campus!"},"content":{"rendered":"\n