Masonry Effect

Permalink Browser Info Environment
Hi there!

Is there any possibility that you could add a masonry effect template to this add-on? My current client is very keen on their tweets being displayed in this way through pages on their websites, and on their previous sites I have used the Easy Social Feed add-on so it has not been a problem.

However, recent changes at Twitter now mean you have to apply for a developer account to be able to get the access keys, and weeks later waiting for the account to be verified, the add-on does not seen to be able to render the tweets properly anymore, probably because of the changes they have made at Twitter (Twitter apps setup before the change still seem to be running ok for now but I am guessing not for long). I have put in a support request but it seems the developer has been awol for some time and I don’t see a fix appearing any time soon, if at all.

This is very frustrating as I do a few primary school websites and they usually have a main Twitter account and then one for each class, and they LOVE the masonry effect on the class pages!

Anyway, it would be brilliant if we could use your add-on with the masonry effect and simplicity of setting up the connection.

I can only ask I guess!



Type: Discussion
Status: On Hold
View Replies:
StevieB replied on at Permalink Reply
Hi! I was just wondering if there might be an answer to this? Or if anyone knows if there is a way to customise to do this?
MrKDilkington replied on at Permalink Reply
Hi StevieB,

I apologize for not answering the original question. For some reason I did not see the notification.

It looks like this could possibly be done. In the JavaScript that creates the Twitter feed (Twitter-Post-Fetcher), there is a "dataOnly" setting that when true would make the script return an array of JavaScript objects instead of HTML. You could then loop over the array and create your own custom HTML and classes needed to use Masonry.js. When calling the scripts, Masonry.js would need to be called only after twitterFetcher.fetch() had returned the array, otherwise it wouldn't do anything.
StevieB replied on at Permalink Reply
Hi MrKDilkington,

Thanks for your reply, and no worries about not replying straight away, it wasn’t urgent, but I look after a number of primary school websites and they just love that look with their class Twitter feeds. Unfortunately, because of the fact you need a Developer account to use the other add-on now it is impossible as each school has a separate Twitter feed for each class!

I will give this a try (not totally code savvy) and see how it works out, but it would be great if it was something included with the add-on in the future if that was at all possible.

I will let you know how I get on!

MrKDilkington replied on at Permalink Reply

I can put it on a potential todo list for this block.
madesimplemedia replied on at Permalink Reply
If you mean like on Pinterest?
I have used this addon with CSS (less) like this to achieve it:

#twitter-feed-name {
         padding: 30px 0;
         ul {
            column-count: 3;
            column-gap: 20px;
            li {
                  display: inline-block
StevieB replied on at Permalink Reply
Hi madesimplemedia,

Thanks for that, I’m going to give this a go, pretty sure I can’t mess it up too much hahaha.


concrete5 Environment Information

# concrete5 Version
Core Version - 8.4.2
Version Installed - 8.4.2
Database Version - 20180716000000

# concrete5 Packages
Deluxe Customizable Twitter Feed (1.0.3), Easy Social Feed (1.1.3), Login/Logout Link (1.0), Pixel Theme (2.1.2), Twitter Feed Block Components (0.9.18), Under Construction (1.0.1)

# concrete5 Overrides

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software

# Server API

# PHP Version

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, ldap, libxml, mbstring, mcrypt, memcached, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 60
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 6000
max_input_vars - 1000
memory_limit - 128M
post_max_size - 100M
sql.safe_mode - Off
upload_max_filesize - 100M
ldap.max_links - Unlimited
memcached.sess_lock_max_wait - not set
memcached.sess_lock_wait_max - 2000
memcached.sess_server_failure_limit - 0
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.