3 Improvements to the BlockPress Steem Profile Page

in #utopian-io7 years ago (edited)

Firefox_Screenshot_2018-04-30T13-11-39.024Z.png

New Features

Whilst @dana-varahi was making a range of improvements to BlockPress, I was working on several improvements of my own. All my improvements focused on improving how BlockPress displays a steem user profile page. This page now:

  • Supports the display of a users recent posts.
  • Allows the username to be inserted into the template via a placeholder, which enables the ability to embed @steemitboard badges, amongst other things.
  • Adds links to hashtags found in the users about section, to load any posts they have made with that tag.

Display a users posts on their profile page

The default profile template now includes a div, with a css class of profile-posts, into which a users posts can be loaded. A theme creator could leave this out if they don't want to display them. If they choose to, they could also target this area to display them differently than a normal post listing.

In the JavaScript, I simply call the existing getSteemPosts() function at the end of the displaySteemProfile() function, if the div to load them into exists. (Lines 266-271). So that this doesn't overwrite the profile page, I check for the div again when displaying the posts. If it exists, the posts get loaded there. (Lines 139-149).

Firefox_Screenshot_2018-04-30T13-15-12.924Z.png

Dana's profile with posts, steemitboard badges and tag links

Username placeholder, and SteemitBoard badges.

The next job I made was to add support for a {steem_profile_username} placeholder to the steem profile template. (Lines 247-248). A simple enough improvement, but one with a lot of potential.

To demonstrate the power of this new feature I amended the custom profile template of the trollfell theme to embed the users steemitboard badges. This demonstration uses the new placeholder 14 times, twice for each badge. Once to create the link url to the users steemitboard page, and second to create the url for badge image itself. This job also required some basic styling for badges.

What would you use this versatile feature for? I'm sure some of you can think of something!


Firefox_Screenshot_2018-04-30T13-17-42.999Z.png

Having selected the #steemswitch tag, you can see those old posts

Hashtags in a users 'about' paragraph now turn into links.

Finally, I added a feature I long thought about adding, which was to turn the hashtags in a users about section into links that load the users posts that have the selected tag. This involved creating two new functions, addLinksToTags() and tagSelected(). These are generic enough that I should be able to reuse them later, with minor adjustments, for adding links to tags elsewhere, such as in posts and comments.

I ensured this feature was compatible with the new posts area in the profile, if supported. The tags still work if not, but will load the posts into the entire contentArea, replacing the profile page.

Closed issues

I closed 3 issues, two of which weren't actually scheduled for the initial beta release, but they were low hanging fruit and whilst I was working on the profile page it seemed fitting to implement them. Anyway, issues #13, #30 and #38 are each now closed.

Live sites updated.

All changes by both Dana and myself can now be viewed and tested on the live sites.

Social media

Follow BlockPress on:

Edit

@arcange rightly pointed out that I was using an outdated method for resizing the steemitboard badges which meant old cached versions were displaying instead of the correct badges. I updated the trollfell theme to use CSS instead, which also allowed me to make the buttons responsive for smaller screens.

This was added as Issue #43 yesterday, and has been closed today.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Hey @antonchanning

We're already looking forward to your next contribution!

Decentralised Rewards

Share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.

Utopian Witness!

Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

Want to chat? Join us on Discord https://discord.me/utopian-io

True, let's move out of Twitter. Use this #deletetwitter
And use the blockchain. (BlockPress is an onchain microblogging ecosystem that works super fast and once you've posted your first one, you can breathe differently - since no behind the scenes Twitter-rati checking, collecting, attempting to size up your profile for their benefits!)
https://www.blockpress.com/qpuypwk88uvv9uvh7ncfpq8rx97pna0rmvvhwxd8ur

And looking forward to the EOS launch!!

Well, that is a different BlockPress. DOT ME vs DOT COM.

Back when we registered https://blockpress.me, the DOT COM was a dead wordpress site. What we are doing is very different than the dot come with the same name. We are a themeable, customisable and modularisable CMS that uses only front end code, and blockchains for backend storage. First module we are implementing is a STEEM blockchain based post/comment module. But we will build other modules and they will all be optional in any given installation.

It's great to see these improvements. I can't wait to get Block Press beta out. Still , it needs a bit of work before it's ready.

Not as much work as it used to need. One critical feature, some design work and some documentation on theme creation and we should be there: https://github.com/blockpress/blockpress.me/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22Beta+release+0.9%22

Thanks for the contribution. It has been approved.

Great post! I really liked the way you explained all the changes and how you implemented them. For future contributions it would be great if you could link to either a pull request or to the commits directly in a separate section.


Need help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.

[utopian-moderator]

Doh! I usually do put the commits all together in their own section. Only two of us working on this project so far so we aren't using pull requests. I really should learn what they are though, as they sound useful, and may prove invaluable if the project attracts more contributors.

Glad you otherwise like the way I explained the changes. :)

Thank you so much for informing us of new features

as someone new to most of this terminology (and mortally confused by most of it) I thank you for writing this in a way I can get my head around! and good work!