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.

“Disable widget CSS” to use own styles

Material Design"grid lists" have own spaces, font-sizes and other styles

Material Design”grid lists” have own spaces, font-sizes and other styles

If your WordPress Theme have own CSS styles and don’t need styles which comes with our widget you should check the option ‘Disable bild-in CSS for this widget’. An example would be the use of the CI (corporate identity) of Google’s flat-design UI framework Material Design2.

"Disable the built-in CSS for this widget" option

“Disable the built-in CSS for this widget” option

It’s a very small and unimpressive option in the admin panel area “General” which have to be checked and all built-in CSS isn’t rendered.

You want to run less effort to maintain your websites look

Material design has some characters that are to be retained in the widget area.

The similarity to the flat design is based on that the new material design relies heavily on icons and fonts as supporting design elements. That’s why Google also has the inhouse Android Font “Roboto” refined again.

In addition, large-area, single color elements for use come with high contrast and very bright colors. Unlike traditional flat style UI elements have in the material design, however, not only have an X and Y coordinate on the screen, but also have a Z coordinate, ie a three-dimensional factor. Thus, Google the elements independently superimpose, animate and their shadows calculate – so even somehow not so flat.

If selected “Disable the built-in CSS for this widget” no CSS will be added automatically to style the specific widget. Any styling will have to be done by adding your own CSS rules.


  1.  https://design.google.com/
  2.  https://www.google.com/design/spec/material-design/introduction.html

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.

Teaser-Bild-v2

 

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.

Custom Post Type, Custom Taxonomy and Tag

We want to offer with our pro plugin options for larger sites. For this purpose, WordPress has come up with something very exciting and has created a magnificent support that allows administrators and websites operators to adapt very large amounts of information on a website circumstances. With custom post types and custom taxonomies you can group, combine, abstract and tell posts together in more specific descriptions.

When Do I need a Custom Post Type?

Now please do not say you had no idea that you’re working for a long time with taxonomies. Yes, that’s true. WordPress comes with two default so called taxonomies, categories and tags are both Taxonomies. Now you can expand this with your own created custom Taxonomies. In the most ways categories will solve grouping posts. If you want to group a goup of posts than custom taxonomies will be a solution.

In return for grouping and classification, are the features such as sorting, displaying and arranging posts. In the first place for the website users. High priority is given including assignment and delivery of wealthy SEO content.

Custom Post Types are the way to distinguish posts, text and information. Give it a try and we guarantee you that the possibilities to build a WordPress site win amazing quality. Not only with the great variety of existing WordPress widgets and plugins.

CSS Image Crop

The new thumbnail feature CSS Image Crop should solve all problems? Yes, it does! 🙂  While WordPress release the best image size or image for responsive design layouts we can’t wait and redesign our thumbnail dimentions with a option for ‘CSS image crop’.

The benefit is that we us the responsive image HTML code which WordPress is rendered, with src, size and srcset and make a crop with CSS for the outputed image. The difference between the WordPress concept and ‘CSS image Crop’ is, WordPress use best fitted sizes and ‘CSS image Crop’ do a fill with the shorter size and crop the rest of the image.

This is a very huge benefit because the image dimentions is so not depent on the used image size or best image which is rendered to the srcset. The image dimentions is so correct for width and height.

Do I lost WordPress functionality?

No! Another great advantage is that predefined image sizes do not matter here, but the best most appropriate image is loaded by the browser as it was written by WordPress in the responisve img attribute srcset and size. This means there is a real added feature that supports existing WordPress functionality to 100% and they only expands.

  • This is good when there are already many images exists, in the upload directory.
  • It is also good that no additional image size is generated and so many unnecessary images are generated.

Of course, it is possible under Settings> Media to produce per PlugIn or add_image_size () an additional image size, as suggested by Sanjayrath: WordPress.org support request “Feature image size”. Sanjayrath proposes to generate new images with your choosen image dimentions for existing uploaded images with a PlugIn, e.g. with ‘Ajax Thumbnail Rebuild‘.

  • There is then no additional ‘CSS Image Crop’ code processed and rendered as HTML when an WordPress- or custom image size exactly matches with the setted image dimentions.

That sounds as you want even more.

What we want subsequent delivery is a drop down selection box that displays existing image formats and thus can fill in the values for image width and height dimention easier. A dropdown selection could be ‘WP best image’, ‘thumbnail’, ‘medium’, ‘Large’, ‘Custom sizes’, …

We feel here because it seems more confusing to users, which aren’t use and deposed there own image size. Much worser will be a misconfiguration. If an image size is selected, but not all images are in the present, it can easily lead to poor image quality. We work on it and will keep you up to date.

Do you use ‘CSS Image Crop’? We like to hear from you and your experiences.


Updated 2016-06-07:

We want to use ‘CSS image crop’ as default and not as option. Our estimation is that WordPress recommend to work with own custom image sizes when a workflow is desired. Only in this way the WordPress core classes ensure exact image sizes to present.

This workflow is not inhibited with our ‘CSS Image crop’. It is merely the image size are specified in our widget and we give the best most appropriate picture back – the custom image size.

Our widget will switch and doesn’t change the standard WordPress behavior, when this occurs: There is an custom image size with the same image dimensions as they registered in the widget.


Related posts: