We adapt and test the style layouts for mobile devices, tablets and smartphones again. We want to give styles which are made for responsive websites. To achieve that and support all screen sizes for your layout we had fluid images.
What do we mean with “Styles”?
The widget support many layout styles and the feature for post list alteration. What do we mean? You can find a panel with the name Style. There are two options, the Layout and the Post Alterations drop downs.
What are the fluid images?
Here are more blog posts about our fluid images:
This both implementation are not new in our widget and we only fixed some wrong code lines. There are a lot of design questions which make better and better website layouts and each question will get the right answer.
Two examples to place the shortcode in the content
Here is our example site where we set two shortcodes on above the other.
- Responsive Rows, Post Alteration and fluid images
The upper shortcode uses the Style: Responsive rows, Post Alteration: Last items and starts after item: 1.
The first image dimension is 710 x 320 px with animation on mouse hover: Zoom and an image position: Top. For all other images we set the dimension 350 x 220 px, the same hover effect and position. But the number of posts to show is: 3.
As you can see on the screenshot above the first big image is adapted the width to the screen size. With smaller screen sizes the image width gets smaller. The both two images among them change on the tablet screen size from side by side to among themselves. At the smartphone size all three images adapt their width to the screen and show the whole image. Nothing is cut or out of the viewport.
- Masonry layout, Post Alteration and fluid images
The example among them use the Style: Masonry, Post Alteration: Repeat Pattern with Start after: 3, For: 1 and Repeat after: 3.
The image dimensions for the first three is 225 x 180 px. The big pictures have a dimension 710 x 430 px.
The behavior for smaller screen sizes is similar to the first shortcode. The difference is only one image gets a new row. The other two are side by side. The first shortcode knows only ether as a row or as a column.
The changes we made are also available with the download link for the 4.7.1. zip file. You can download the code and update it manually with an overriding or wait till we release the 4.8 in less weeks.