New Bric: Read More for Blocs

Read More for Blocs.

Here’s a stylish way to add “read more” functionality to your Blocs webpages. The term “read more” refers to the the ability to truncate text to a chosen length, and reveal the trimmed content by clicking a link or button.

Many solutions I’ve found are essentially accordions, and lack true inline capability which is essential in some use cases. Read More for Blocs allows both inline and accordion style behaviors.

Read More is tailored to play nicely with the existing Blocs features and workflows for paragraphs.

Highlights:

  • Truncate text in realtime for fine adjustments.
  • Both inline and new line behavior.
  • Customize link and button styles.
  • Customize link and button label text.
  • Both fade-in and smooth accordion behavior.
  • Customizable gradient fade effect.
  • Plays nice with projects settings and class created in Blocs.
  • Use as many instances on a page as you need.
  • A fine-tuned user experience.

Basic usage (video)

Newline, Gradient and Custom font (video)

An example of expandable carousel captions and “call to action” button. (not a video)


Click here to get it now.

=========================================================

USER GUIDE

The use is very straight forward. Each field has tool-tips to help you along. (hover your mouse over any field for several seconds).

What should I expect when I add this bric to a page?

  • The bric behaves just like Blocs’s own paragraph bric when initially added to a page. It will adopt the styles of your current projects settings (if you’ve set have them) or any custom classes you’ve created. You can override the font in the bric settings (sidebar).

How can I style the paragraph text?

There are multiple ways.

  1. Allow project settings to have control:
    This is the default behavior.

  2. Apply class (in sidebar) directly to selected bric:
    Use the Class setting in the sidebar to directly style the paragraph text for the currently selected bric. Except font’s, which are have a dedicated field for this purpose.

  3. Add class indirectly (advanced):
    From the main Blocs app menu select “Window” and from the dropdown choose Class Manager.
    *or use the shortcut (command+6). From this dialog box Blocs allows you to make “nested” class structures to your project. a nested class looks like this: .read-more-bric .btn

What classes are available in Read More?

.read-more-bric
.read-more-bric p
.read-more-bric a
.read-more-bric .btn
.read-more-bric .read-more
.read-more-bric .read-less
.read-more-bric .more-text

Can I customize the link/label text?

  • Yes, the link label text is fully customizable. Change the text to anything you like.

Explain inline vs new line behavior?

  • Inline behavior is the default and it’s terrific for situations where you really do need to truncate the text and in it’s place you want an ellipsis (…) or something similar. It when you don’t want an extra line break to happen so the flow of the text remains the same and NOT the appearance of a new paragraph.

  • New-line is just the opposite. it forces the link onto it’s own line. It’s a layout option and it allows you to take advantage of some options that require this behavior such as the Gradient and Accordion features.

How does the accordion feature?

  • The accordion makes (opening and closing) a smooth transition similar to an accordion behavior.

How does the gradient feature work?

  • The gradient overlay is really only useful if you match the gradient color (RGB) with your background. The transparency is handled automatically. Just pick the matching color and that’s it.

How can I duplicate the bric?

  • Press (command +D) to duplicate the bric and it’s current settings. or right click on the bric and choose Duplicate from the dropdown menu.

behaviors button gradient label paragraph

Click here to buy it now.

5 Likes

Almost forgot! A huge shout-out to both @flashman and @Malachiman for helping me with end-user testing! Yes! I can actually say there was end-user testing before the release!

Thanks guys! :raised_hands:t5:

6 Likes

Is it possible to move an existing Blocs paragraph text area (long) into the Read Me text content area and maintain basic formatting (eg. breaks)?

@Whittfield: what a fantastic job!!!

1 Like

Great Bric @Whittfield - good to see some more brics being added and supported.

I will be buying this soon as I get a demand for it, will find this useful.

@Whittfield - do you ever look at suggestions from Blocs users for what they would like added and maybe look if this is possible in Blocs?

Thanks for the comment @AdieJAM .

My projects are mostly born of my own needs and experience. I prefer it that way because it never matters if it’s a popular idea or not. I always am happy with the result because I can make use of it. :man_shrugging:t5:

1 Like

Brilliant ! nice way to do it!

I’d love to see what sites you have done in Blocs and how you have used your own brics - if you are able to, please post.

I use Blocs as a wire framing tool. I do most things by hand in my day job and so a builder like this is only needed to get ideas together and present them. I will be launching a new site this fall :crossed_fingers:t5: that’s a mix of CMS and static blocs pages where demos will live. All designed with the help of Blocs rapid prototyping capabilities.

4 Likes

No I’m afraid that’s not possible. I have made a request to Norm for an improvement to the textarea in the api with a pop-out and maybe Markdown functionality. Now that this bric is released hopefully the case is made stronger.

as for any additional formatting for now you can use line break <br> and other simple html <b>, <u>, <i>

3 Likes

Thank you @Mattheus!

I’m glad to see developers like you creating projects that help with ease of usage.
To me, it seems like the most successful ideas are the ones the creator would want to use themselves, not just what’s popular.

1 Like

Awesome and purchased! Saving hours of work for 15 bucks only is a “no brainer” Thanks @Whittfield.

1 Like

Maybe it works together with the Markdown Parser Bric?

https://blocsaddons.com/markdown-parser/

Thanks, @Whittfield for such an easy solution to drop-down text. It’s well worth the money. I already used it on one of my sites. A COVID-19 Update. I used all the typed in attributes and it worked well.

https://melisastreasures.com

Casey

1 Like

You did a fantastic job, thanks for sharing!

Be sure to give us a good rating Gumroad.com I’d really appreciate it.

1 Like

Thanks, I left the rating.
Casey

1 Like

Thanks, I just tried it on a normal Blocs paragraph but didn’t seem to work. Since there are no settings I assume that it works on any § tag so it should work in theory. :crossed_fingers:t5:

What we need is a better textarea in the api in general though.

  1. make it scrollable
  2. make it pop out and expand.
  3. Bonus! a very basic Markdown UI controls for the expanded version (bold, italic, lists, links)

If I had to choose just (1) thing right now, it would be to allow that field to expand, and allow simple line breaks.

2 Likes

Not being greedy, but I vote for all three. This would make a major difference when dealing with longer pieces of text in all brics.

1 Like

Hi Whittfield – I purchased, and am excited to play around with it, only its not showing up as a bric when I try to place it.

I see it in Extension Manager, but it’s not available as a bric to be placed.

I assume it’s called Read More, and when I search for it is does not appear. I’m using Bloc 3.5.3. and current version of Catalina.

I have an activation/License key, but I’ve not been prompted to use it anywhere…please advice.

Thoughts?

EDIT: I reinstalled it a 3rd time, and now it appears…silly blocs :slight_smile:

Worth restarting Blocs if you haven’t tried that.

2 Likes