0E800's BBCode Cards Extension

0E800

BBCode Cards Extension

Add cards to your Flarum posts.

Github
Packagist

Install:

composer require oe800/flarum-ext-bbcode-cards

Usage:

♦ For small card: (better viewed on mobile, uses 50% of post width)

[CARD]{COLOR},{IMGURL},{LINKURL},{TAG},{TITLE},{SUBTITLE},{TEXT}[/CARD]

♦ For medium card (not sure why I made a medium size, uses 75% of post.)

[CARD2]{COLOR},{IMGURL},{LINKURL},{TAG},{TITLE},{SUBTITLE},{TEXT}[/CARD2]

♦ For larger card (uses 100% of post)

[CARD3]{COLOR},{IMGURL},{LINKURL},{TAG},{TITLE},{SUBTITLE},{TEXT}[/CARD3]

Notes:
♦ You cannot have line breaks in your text. Best to use a single paragraph.

♦ I tried my best to hide the scroll bar, its hidden on Chrome. Not so much on Firefox.

♦ The color controls tag background, read more background, and subtitle.

Examples:

Smaller Card: (better viewed on mobile, uses 50% of post width)

[CARD]teal,https://unsplash.it/500,#,Hardware,Gigabyte Brix hit by UEFI vulnerabilities,Published on 4th April 2017 by Gareth Halfacree,Security researchers have discovered serious flaws in the firmware of Gigabyte's Brix small form factor (SFF) systems that allow malicious code to be written into firmware and stored even if you replace the system's storage device.[/CARD]

Imgur

Medium Card: (not sure why I made a medium size, uses 75% of post.)

[CARD2]brown,https://unsplash.it/600,#,Health,New Studies Showcase Key Health Benefits of Strawberries,Strawberries may help improve vascular health in at-risk adolescents,This is the first study to test the impact of freeze-dried strawberry powder (FDSP) on markers of vascular health in at-risk adolescents. Previous research in adults found a promising inverse relationship between FDSP consumption and the risk of cardiovascular disease.In a randomized, double-blind, crossover study, 25 overweight or obese males between ages 14-18 consumed 50 grams of FDSP or a calorically equivalent amount of control powder every day for a week. Before and after each test period, measures of vascular health were collected at baseline and one hour after FDSP intake.[/CARD2]

Imgur

Larger Card: (uses 100% of post)

[CARD3]salmon,https://unsplash.it/800/500,https://www.dnainfo.com/chicago/20170328/wicker-park/hot-shots-cafe-1242-n-milwaukee-ave-coffee-wifi-fruit-smoothies,technology,Coffee Shops Serve Laptop Users a New Blend,Cafes across the country reevaluating free Wi-Fi service,Barefoot Coffee Works rearranged its store to accommodate the growing number of people who want to "enjoy their cappuccino in a real ceramic cup." But more room for cappuccino guzzlers leaves less chairs for laptop wielders to spread out over four chairs and turn a cafe into a makeshift office for $5 a day. The Wall Street Journal says some coffee shops are struggling to support laptop users who camp out all day using their free Wi-Fi and electrical outlets and do not buy enough coffee and food to offset their costs.[/CARD3]

Imgur

Todos:

Make "Read More" button customize-able.
Make Dark Themed options.
Make cards more responsive.
Try to fit 2 or 3 cards in a row.
Add more styles.

AngelAvila

0E800 Great work, as usual mate. Just a question, on the color placeholder, does it support HEX values like #FFFFFF?

In advance, thank you for developing such an elegant extension!

Edit: Also, how could I help to translate that "Read More" buttom? I see you don't have a locale folder on GitHub.

Kyrne

Holy moly that looks cool! You're killing it!

0E800

AngelAvila

It does! ?

I do not believe it will work with rgb/rgba as they include commas.

Edit: Im not sure. A excellent question. I will look into it.

AngelAvila

0E800 If you don't mind me that would be two suggestions to make your extension greater!

To be able to use RGBA colors which could allow to use transparency/opacity which adds more customization to the cards.
To make the extension translatable, I could push some PR for the translations ?

Again, thanks for the effort and commitment to do this!

0E800

AngelAvila

Im not sure how to create a locale for the single link text. I can though, make it so that "Read More" button is customizable. Would that work?

Not sure how to allow rgba to work. Seems to only accept a color name or hex value.

AngelAvila

0E800

Yeah, Read More customization would work even more!

I was looking at this: https://github.com/0E800/flarum-ext-bbcode-cards/blob/master/src/Listeners/AddBBCode.php

I don't know much about coding and stuff, but how about like adding something like [CARD][RGBA]rgba(0,0,0,0)[/RGBA],{URL}, etc... [/CARD]? May it work or is it a dumb idea? haha

0E800

@AngelAvila
Ill try it. If it doesn't work, ill just update this extension to include the custom "Read More" button.
Thank you for your feedback ?

datitisev

I think the syntax should be something like

[CARD color=teal image=https://unsplash.it/500, link=# tag=# title=# subtitle=#]
TEXT
[/CARD]

It's easier to read ?

0E800

datitisev

I think thats what @JoshyPHP was trying to say. I will look into overhauling the bbcode extension to use more easily read syntax.
(as soon as it makes sense to me ? )

Thank you both for the suggestion.

prestorondo

Love the extension however, I don't know how to use it!
I don't see a new menu in admin area after activation and when I post
[CARD]teal,https://unsplash.it/500,#,Hardware,Gigabyte Brix hit by UEFI vulnerabilities,Published on 4th April 2017 by Gareth Halfacree,Security researchers have discovered serious flaws in the firmware of Gigabyte's Brix small form factor (SFF) systems that allow malicious code to be written into firmware and stored even if you replace the system's storage device.[/CARD]
nothing happens .. I only see the un-rendered text. What am I doing wrong?

by the way , my sincere apologies if it's noob question or if I violated some rules posting in this thread.
thanks

ChadJessen

Great work on this. Very nice!