“Excerpt Extension” widget

Allow HTML in the excerpt

Allow HTML in the excerpt

 Download the extension from wordpress.org here: Excerpt Extension

Term Posts Excerpt Extension. Additional options

Additional options

At the moment we plan three extensions and started with the first “Term Posts Excerpt Extension”. Why this as first? Here we get the most suggestions from our widget users. But first a short explanation. Primarily the excerpt sounds easy to use and good to configure. Unfortunately deceives that. If the post excerpt is configured, it is used in all placements with this preconfiguration. So the configuration should be nice. Here are the adjustments which WordPress let you do: Add the excerpt automatic-, manual and with the More tag (called teaser), include shortcodes, banner, social buttons, etc., include HTML elements, change the excerpt length in words and the more text. Depends where this configuration is done, for example in the Theme, in a Plugin, your Child Theme’s functions.php it’s nearly impossible to give stable widget options, which work for all WordPress installations.

We learned much configurations in the last year

Our problem isn’t that we had learned tried out each second issue a new core excerpt configuration in the last year. The hack is each special genius solution is not applicable to the next used special WordPress installation. Every time we wanted to install a super intelligent switch, we had to define a normal state and leave this for our majority of users. And how should it be otherwise? Basically, all attitudes can be regarded as particularly special. A definition can be:

What is a “normal state”? And is the “normal state” differently on special use?

The answer is yes, but special use is not for all users the same, because there are so many configurations. The answer is also, we’ll dig deep in custom code. If the user starts with a free or paid Theme, the Theme comes with set filters for the excerpt. Our thought is the Theme designer don’t know which widgets and plugins the user want to use and as we’ll say it: To which place you want to put your posts? As in the relation of using shortcodes, many placements are imaginable and possible. And so conflicts with the excerpt and between the Theme and installed plugins are not a rarity.

Can be the programmer’s view the right one?

In the second application case from the programmer’s view, the set excerpt filters must be overridden when using a recommended Child Theme. And we called this overriding code “custom code” and want get rid of it in our core widget code. Our solution is providing a excerpt extension.

You can download the extension from wordpress.org here: Excerpt Extension

delete double shortcode banner or social icons in the excerpt

Delete double shortcode banner or social icons in the excerpt

Client-side cropped-, adaptive- and also fluid images for Responsive Layouts

Client-side cropped- and also fluid images

Client-side cropped- and also fluid images

We decided in the past to add a image cropping feature (CPW since 4.1.6, April 13th 2016, as option and TACBPW since 1.0.1, as default), to set your image dimensions in pixel for the feature image or called thumbnail. We called it “CSS cropping for thumbnails“.

This CSS cropping gives your image the possibility to set dimension options for width and height. Our decision till now is to perform this cropping with CSS. CSS is fast and the website admin can use, but it’s not a have to. And our feature don’t neet to generate new images or actually a change for image sizes in the WordPress settings.

We talk much about the feature and implement it to other widgets like Same Category Posts.

We started to solve the max-width problem for our client-side cropped images

Solve "max-width" issue for client-side cropped images with Javascript

Solve “max-width” issue for client-side cropped images with Javascript

The problem we had with our cropped images is we can’t use the CSS property max-width, because the cropping is also made with CSS. No CSS rule solve both features correctly at the same time and we set a fixed width and height. For Responsive Layouts this is very bad to have only one image size and the image can’t be resized, e.g. for many different mobile devices and screen sizes.

For the 4.7 we tried a CSS solution again to solve the aim to have fluid images with CSS attribute max-width. It’s Mark again who mentioned to try it with Javascript. And now it’ll be available with the 4.7 (4.7 beta 1).

The Javascript code works only once at page load or on page resize. Last one is in the normal website usage not performed. The Javascript code is also performance optimized and curse a very less millisecond delay while page load.

Demo page: demo.tiptoppress.com

Advantages with client-side responsive images:

  • No additional (server-side) libraries required.
  • No cookies required.
  • No extra server configuration needed.
  • Does not attempt to perform any client OS detection.
  • Server image storage doesn’t change.
  • Fast server response any time.
  • No image quality loss.
  • No side effects with frequent use on several pages.

Other image features for Responsive Layouts are planed

We’re happy we found a solution and we hope we don’t get problems and can solve the requested Responsive Layout support. What we also want is use the CSS attribute “width” like percentage unit (100%). And either for one dimension and the other as pixels or for both, no size restriction is given and the image fill all the available space. We planed it also for the 4.8 – be patient if all works right.


Related posts:

New in 4.7: Default thumbnail

Thumbnail are great for the look of the page, but the problem with them is that they require some extra effort when editing the content, an effort for which you might not have time when you rush to publish something, or you just forget.

This kind of situation could have been handled in 3 different ways before 4,7

  • Do nothing and just don’t display a thumbnail. If the thumbnail setting produce a small thumbnail, it might be ok, but when the thumbnail is big and dominant, an item without it will ruin the balance of the design and might be harder to spot.
  • Just don’t display posts without a thumbnail. This keeps the visual balance but it means that the post is going to be more hidden than other posts.
  • Use a plugin that lets you specify a fallback thumbnail.

In 4.7 we are going to add an additional option, to set a fallback thumbnail for a specific widget. This will let you keep the visual balance without having to install additional plugins, and even have different fallbacks in different widgets.

default-thumbnail

And something that might have looked like

Customize test 4.6 – Just another WordPress site(2)

easily transformed to (notice the first item)

Customize test 4.6 – Just another WordPress site(3)

This feature will go into the 4.7 version of both the “free” and “pro” plugins due to be released right after WordPress version 4.7 will have its first RC release which is scheduled right now to november the 15th.

You can try the feature by downloading and installing the beta from https://github.com/tiptoppress/category-posts-widget/releases/tag/4.7.beta1, and report bugs or just get an impression of what is planned from our bug repository at https://github.com/tiptoppress/category-posts-widget/issues

New in 4.7: Skip first few items with the offset parameter

Some times you just don’t want to show the most recent posts, maybe because you have two widgets and the two most recent posts you want to display in the sidebar while another 8 are displayed at the footer.

To get this possible in 4.7 we have add an “start offset” parameter (not the greatest name, suggestions welcome) to indicate how recent (or whatever sort criteria is used) the post displayed should be, with a value of 1 indicates that the posts should stat with the most recent, 2 indicates they will starts if one item after the most recent and so forth (we preferred a 1 based system as it seems to be easier to understand than zero based one).

Technically the feature is implemented by requesting the DB to return items starting from position N and does not retrieve the first “ignored” items at all.

Widgets ‹ test 4.6 — WordPress(1)

This feature will go into the 4.7 version of both the “free” and “pro” plugins due to be released right after WordPress version 4.7 will have its first RC release which is scheduled right now to november the 15th.

You can try the feature by downloading and installing the beta from https://github.com/tiptoppress/category-posts-widget/releases/tag/4.7.beta1, and report bugs or just get an impression of what is planned from our bug repository at https://github.com/tiptoppress/category-posts-widget/issues


Related posts:

New in 4.7: Multiple shortcodes

When we added the shortcode to 4.6 we were not very sure about the way the feature was implemented. Due to the large number of option it was obvious that doing it the “normal” way works and users know it and accept it, but making users cram them on one line hoping that they got the syntax correctly is a bad user experience.
Instead we decided to try a different approch, use the shortcode itself as a pure place holder, and configure the settings via the customizer, with the settings being stored as a custom field in the relevant post DB instead of being part of the shortcode itself.

Wanting to reduce the risk of developing something that people will hate, we implemented in 4.6 only one shortcode per post, but in general it seems like the feature got a good reception, we had a very good experience with it while testing the code and setting our own demo pages, and seems like the only problem where with some obscure page builders (Pippin Williams’s review of them is a must read) and therefor we are enhancing the feature in 4.7 and enabling to have as many shortcodes as you like.

The only change from 4.6, is that if you want to have more then one shortdcode, in order to differentiate between the short codes you need to assign a value which will identify them in the attribute “name”. The value can be anything you like, no special formatting is required. If the name attribute is not explicitly assigned it default to be a “” (empty string).

Here is an example of how it looks in the editor:

Edit Post ‹ test 4.6 — WordPress(1)

And the possible front end output.

4.7 test – test 4.6

This feature will go into the 4.7 version of both the “free” and “pro” plugins due to be released right after WordPress version 4.7 will have its first RC release which is scheduled right now to november the 15th.

You can try the feature by downloading and installing the beta from https://github.com/tiptoppress/category-posts-widget/releases/tag/4.7.beta1, and report bugs or just get an impression of what is planned from our bug repository at https://github.com/tiptoppress/category-posts-widget/issues


Related posts:

Terms and Category Based Posts Widget support the Masonry framework

Masonry is a JavaScript UI framework and we decided to support it for “Terms and Category Based Posts Widget” from the version 4.6 and higher. The framework do this “masonry” arrangement for posts and much more – we need some time to understand how the framework works – and now we can proudly say, we know a little part of it. This little part in understanding was enough for support thas UI framework.

Masonry with Thumbnail > Position > Background

Masonry with Thumbnail > Position > Background

The problem(s) which Masonry solve and how is unique

Every time we get to deal with the UI framework we discover and learn something new. Therefore, it is difficult to find one suitable set to describe it. Masonry solve many small and big problems in a simple way. For an entry, following remarks:

“Masonry is used for responsive websites, different screen sizes and all mobile devices and without that media-queries must be defined in the CSS file.”

Especially relevant it’s the second UI framework which is added to the core code beside jQuery which must have a reason. That’s why we want to explain how we use it, which features we start implementing with this Masonry framework and which features we want implement with it further versions of our widget.

Edit the Masonry settings with the customizer

Edit the Masonry settings with the customizer

As a result edit the settings with the WordPress customizer, after Terms and Category Based Posts Widget is added to the widget area or with shortcode. Choose in the Styles panel for Layout: Masonry and our posts should rearrange in a masonry pattern. On the screenshots and at the demo.tiptoppress.com page we use post item width or the thumbnails panel width for position. Thumbnails panel width means “background“, so the text, excerpt and other text content is positioned over the image. So you need to define a width for posts which is enough for the Masonry framework to know to make this posts responsive. Change the Browser width and you can see how the post take place of the page width. Once with three columns, two or one.

Hence for the version 4.6 this should be good to use it. And it will be good, you should try it. Simple to use and solve a lot – for responsive webpages.

Responsive webpages and more

Finally in 4.7 we want to implement two other features for Masonry. We want to add pagination and Ajax scripts which perform infinite page loading effects. If you’re interested in grids and columns for your posts we recommend you should try it out.

In Conclusion the masonry feature is available in the 4.6-beta wich we’ll release in a less days. If you’re already interested in a beta version, please write us: http://tiptoppress.com/contact/

New features and TipTop meeting in Berlin

While we are actually about following our intended schedule of releasing the 4.6.1 release at the same time frame WordPress 4.6 is released, due to releasing the free version earlier a gap in available features was created between the free and the pro version, and we decided that we should update on were things stand

New features in 4.6.1

  • More thumbnail positioning options
    • Thumbnails now can be used as a background (cover image)
    • They can be aligned either with the title section or the excerpt section
  • More title and excerpt text alignment options. They can be aligned right left or center
  • Define alternate styling based on “position”. For example you can style first items differently from the last, for example having the first with a thumbnail on top and the last ones as simple links.
  • Shortcode to insert the “widget” into the content.
  • More layout options
    • Horizontal row: items are lined up horizontally. spacing between then can be done automatically by the browser based on two methods
    • Adaptive/Responsive row: Items are organized in rows based on available space. When the space is not wide enough new rows are being automatically added to contain the overflowing items
    • Tabular: A good old table layout, items are organized in equal width columns with equal heights in the same row. Combined with alternate styling this can be used to create interesting design (checkers style board)
    • Masonry: If you are not familiar with the term, take a look here.

Where do we stand right now?

We still need to iron some settings with the masonry, and would like to have a horizontal news ticker as well, but we run into some bugs with the slider library that we use and either need to solve them or use a different on for this.

Schedule

07. August
This weekend (7 aug) or early next week we intend to release a beta version.
Updated 22. August: Please contact us if you’re interested in the beta and we’ll send it to you.
19. August
On the 19th we are going to have a 🎇TipTop convention in Berlin🎇. If you are around, and want to give us some feedback face to face, just drop us a note in the comments.
Updated 28. August: Photoimpressions on Facebook.
28. August
Release will probably happen on the 28th of august, but no earlier then the WordPress 4.6 release.

New dynamic layout feature “Separate categories”

The feature support the option 'Number of posts per seperated categories'.

The feature support the option ‘Number of posts per seperated categories’.

With the Same Category Posts widget it is possible to get multi category selection with a new dynamic layout feature: “Separate categories”. Here it’s possible to separate all assigned categories for the post which is shown on a WordPress single page. And so we call it layout feature. (Hint: The widget gets all assigned categories if or if not checkt this new option.)

 

With one new number option: “Number of posts per separated categories” you can set the maximum number of post beneath a categorie headline. Which extends the existing parameters “Number of posts to show (overall)”. This option  remains unchanged and gets the overall counted posts.

 

Why it is called dynamic?

Its simple answer: Because it depends on the filter option order by ‘date’, ‘name’, ‘number of comments’, etc. And it goes further, the widget (shows and seperates) posts from this categories which the current post assigned to. If each shown post have other assigned categories, the widget will show for each post other categoies.

 

For example post ‘doostang’ is in the categories CARS and HOUSES and post ‘hipmunk’ is in the categories CARS, TECHNOLOGY and WEBTWO only one shown category is the the same. The other are dynamiclly and different.

 

'Seperate categories' is similar to a order by category.

‘Seperate categories’ is similar to a order by category.

If you want to picture latest news and your post begin date is important for your readers, so it’s better you don’t use ‘Separate categories’. ‘Separate categories’ may cause that not the newes post is on top. But have you many posts to show and you can hide your thumbnail. Order by categories with the feature ‘Separeate categories’ can be very helpful to show a huge number of posts and get a very clearly layout.

 

The idea for this option comes from Aecorn on WordPress.org. He gives the request for this layout because his site and widget area use a lot of post to show. Create idea – thank you Aecorn.

He has given us a 5-star rating on wordpress.org for the implementation of his option.

 

5-star rating on wordpress.org

5-star rating on wordpress.org.

 

 

 

 

 

 

 

 

 

 

 

 

Downlaod link: https://wordpress.org/plugins/same-category-posts


Related posts:

Make a dynamic landing page navigation

With few less custom code changes you make with your post previews a landing page navigation.

  1. Add a few posts in a same category and set for each post nice thumbnail feature images.

add a thumbnail feature image to each post

  1. Use [catposts] to add the the free widget Category Posts Widget to the content with shortcode.

add the widget to the content with shortcode

  1. Go to “View Post” and the added the widget should looks like blank post headlines while no widget options are set.

widget added to the content

  1. Use recent posts and order by filter option from Category Posts Widget

It will be dynamically changed …

… because you can use all the widget setting options for filtering the used posts and set order-by filters for a single category. If you want more and you use a bigger WordPress site, you can use the Term And Category Based Posts Widget wiche adds “custom post types”, “custom taxonomies”, WooCommerce products, multi selections, etc.

Use disable widget CSS option.

widget-option-settings-b

  1. And you get something like this.

configuration in the customizer

  1. Float left to make horizontal alignment.

And for transition you can add CSS3 transition time.

  1. After using the CSS attributs and selectors your content should looks like this.

 

Downlaod link: https://wordpress.org/plugins/category-posts

Live-preview with the WordPress customizer

wordpress customizer

Since WordPress 3.4 it is possible to deposit a theme-dependent Options menu: The WordPress “Customizer”.

Here can specified a variety of settings for the website layout and provided for the Theme user via the WordPress backend under “Appearance> Customize”. For example, texts deposited, CSS classes or complete CSS files are enabled or disabled individually, colors chosen etc. All this has to be processed without the source code. In particular, if one wants to make a theme for a wider audience, for example, on WordPress.org or Premium Theme, you are provided so an elegant way to the user all the important settings easily from the WordPress backend make changable.

One much technikal great feature from the customizer is: Your are in the backend, but the currently used webpage is visible. All changes are made with the visible customizer were displayed in the visible layout and thus receives an immediate preview – a “Live-preview”.

However, a small difference to normal WYSIWG-editors has a big impact. The options can be choosen by each Theme developer or by us widget developers. Our widget option settings where displayed here with the customizer and give spezific values to change the widget and widget area details

WordPress come-up with a new feature for the customizer to display mobile device screen dimentions.

Our posts widgets benefit enormously!

customizer-options

So the thumbnail sizes are changed and the change is immediately visible. Or options can be discovered and tried out. Since they are very specific, are from many widget developers made and give a web site administrator creative ways for shaping your WordPress website.

We spend much time to test the admin panel in the customizer. And increasingly think from the perspective of customizers. As long as WordPress supports and develop this great feature further, it will gives us the boost to make also new ideas and we arise inovativ options.