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

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

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.

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: