Daniel October 19, 2016March 8, 2017 Comments

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

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

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.

Daniel September 8, 2016September 24, 2016 Comments

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

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

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/

Daniel August 27, 2016November 12, 2016 Comments

Demo page shows upcoming 4.6 features for the Terms and Category Based Posts Widget

If you’re interested in our new version 4.6 features. We can help you with “start” to expose the final version on demo.tiptoppress.com/.

We release a beta version and use it for our customer sites. Beta means: No more features were added only bugfixes for this version.

All the features announced in further posts are final and we would let you participate with this. Till we decided to release a new version as the same time as WordPress do it. We had a timeline we’ll made a version ready. For the most features it’s good and make a end for coding and coding.

We need your feedback gladly also recognition – as we get it from you in the past. 😉

The demo site shows three main features:

and this demo site will grow in the next days with variations and other good looking and useful features for your website.

With 4.6 we support columns not only rows!

Now it’s possible to arrange your posts not only in rows rather columns are supported. This is possible with the shortcode we had implemented for a while in the free version and now shortcode is also possible with the pro version. (Put shortcode with the pro is: [termposts], with the free widget write [catposts] to the content.) It’s possible use many columns where ever you want, but in the content and not in the widget-area it make much sense and we recomment this layout features to use with shortcode.

Masonry

We had more ideas for all main features and how we improve this. There are a lot of recent topics we are not compleatly doing perfec right now. For the Masonry support we had even delete code we write because we haden’t much time to make it ready and stable.

So we decited to give you a teaser with Masonry and plane next features more sharper. We have to learn to understand this Javascript framework and it can be helpful for responsive websites. When we visit other sites and how to use it so we could be confident to offer it (tympanus.net/codrops or www.elmastudio.de).

Daniel August 27, 2016September 21, 2016 Comments

With one click to the WordPress “Customizer”

WordPress admin sides have some areas, configuration panels or widgets to configurate. So you can get all settings in only few clicks. And it wasn’t WordPress if you can configurate all. So we decided to expand this navigation buttons with a additional customizer link. If the user is in post or page edit mode and use our widgets: Term and Category based Posts Widget or Category Posts Widget.

WordPress don’t supports this link because there is no need for this link without using our widgets. But our widgets give you the oportunity to add shortcode in the content area and configurate it in the customizer. Right, we propose the shortcode configuration only in the customizer.

We propose to use the customizer to configurate widgets added with shortcode

We know and use widgets which extends WordPress’s admin navigation buttons, menus, etc. For example for navigating between posts or pages with a forward and backward button with the Admin Post Navigation. Widgets like this can be very helpful to change many posts in a row and there is no need to go back to the post edit-site and admins save a lot of time. We decided to write not a own widget and we also decided to make this link not configurable to show or hide. The link we set is fix.

After saving your post or page the “customizer link” is visible and available for use. And you’re with one click in the there:

In conclusion here is a interesting blog post why we decided to use the WordPress customizer for the widget options and settings configuration: tiptoppress.com/the-customizer-in-in-our-focus/
Second reason is we had a lot of options to configure and we search a more computed way to do this configuration with shortcode.

Help us us to improve this feature. Most of all we’re looking forward when you write as a comment or private message.

Mark August 4, 2016September 3, 2016 Comments

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.

Daniel July 12, 2016October 21, 2016 Comments

New dynamic layout feature “Separate 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.

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.

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

Daniel July 7, 2016May 20, 2017 2 Comments

Make a dynamic landing page navigation

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

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

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

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

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.

And you get something like this.

Float left to make horizontal alignment.

And for transition you can add CSS3 transition time.

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

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

Daniel June 17, 2016August 26, 2016 Comments

Live-preview with the 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!

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.

Mark June 11, 2016November 1, 2016 17 Comments

Use Shortcode to add “Category Posts Widget” to the content

YES!, the Category Posts Widget is escaping the WordPress sidebar and making its way into any place you can use Shortcode. I think the utility of such a feature is obvious, but to explicitly name at least one obvious use case it will be to give the list of the latest new/PR release. A more respectable place on your home page.

It is also creates a better experience for people that use page builders and tried to integrate the widget into the page builder content.

We are doing something innovative here. We are assuming that we will have to iterate several times before making it perfect. For that we will need your feedback 😉

How can you use it

The usage of the “widget in a shortcode” has several easy to follow phases:

Just place the shortcode [catposts] at whatever place in the post you want the list of posts to be displayed.
Go to preview of the post (it doesn’t have to be preview, any way in which you get the admin bar to show up when you are looking at the post will work)
Enter the customizer by clicking the “Customize” link located at the admin bar.
Locate the section named “Category Posts Shortcode” and click it (it should be at the bottom of the sections list)
Voila, you should see now all the settings in exactly the same way and functionality as you see them when configuring the widget when it is part of the sidebar.
Once you are happy with the changes, just save and the new settings will be saved

The shortcode itself do not change as a result of the manipulation in the customizer and there is no need to add to it any attributes which will clutter your content.

Limitations

You can have only one Shortcode per post. This is just a current code limitation, and we will probably remove this restriction if there is demand for more then one.
There is no simple way to duplicate the settings of one Shortcode into a short code in a different post
There are all kinds of plugins that let you “include” Shortcodes in all kinds of places. The result of using this shortcode with them are unexpected. We might look into how to integrate with specific plugins if there will be a lot of demand.

Daniel April 2, 2016December 30, 2016 4 Comments

Same Category Posts v1.0.5 gets CSS cropping feature

We added CSS feature image cropping to our youngest widget: Same Category Posts came up at the end of September 2015 with the version 1.0 and depends on a fork from ‘Related Posts’ Widget. The idea depends on a user request, don’t have to select the category each time but select dynamicly posts from the ‘same’ category. Ovidiu send us a lot request and featue request: Show from same category as current post instead of choosing is one his greatest.

Because we want to build lightweight, clearly structured widgets that allow the obese the widget area clearly. We opted for a standalone widget – which is designed to do one thing and do it well.

And Same Category Posts is not only the youngest, it’s also the first which gets CSS cropping for feature images.

Its a little check box ‘Use CSS cropping’, the feature is available and we are looking forward if you enjoy it.

Appropriate for widget areas

What is CSS cropping? If you had images with a other format as you want to show you have two options: Scale the image down than you can show the full image or you can crop the image so you can fill you desired image dimention. The first option has the following disadvantage that edges occur which remain empty. The second, the image is cropped and parts of the image was cutted. The third would be the image has the correct size, which is not usually the norm.

WordPress use and supports the first option for rendering HTML with the_post_thumbnail() and shows the full image but with a smaller size. And images of different dimensions is what does not look so great in the widget area.

That’s why we implement the second option for our widgets. With ‘CSS cropping’ your layout gets the configurated image dimentions.

If you don’t use ‘CSS cropping’ because you had a own image size you aren’t use the HTML img attributs srcset and size for ‘best’ images.

Another conceivable case is all your setted image sizes has the same dimention and only differ in there size. We don’t know any website which has only one image dimention.

To crop the image via CSS seems for us the most viable solution. So we will maintain this option and enhance it in the feature.

Tip Top Press

Premium WordPress Widgets - Designed to do one thing and do it well

UX Innovation