Resolved Everything Boxes and different sized featured images

[janpeeters 31]

Hi,

I've purchased Anything Boxes and I love this section a lot, thanks Adam! I'm using it on my front page at http://www.janpeeters.nl

It loads my latest blogposts. I'm looking to find a solution for the following:

I find the featured images on my blogpage http://www.janpeeters.nl/blog too tall, they take up too much space in relation to the text. But I do I like the form of the anything boxes featured images.

So what I hope to achieve is use different images (croppings of the same picture) on the blog posts and on anything boxes. I want to have full control (maniac I know) over the exact cropping of the images on both pages.This would also save some Kbytes from my front page because Anything Boxes shows the resized blogpost images. See Pagespeed mention below.

The following images are resized in HTML or CSS. Serving scaled images could save 185.4KiB (80% reduction).

• http://www.janpeeters.nl/cms/wp-content/uploads/leergang.jpg is resized in HTML or CSS from 600x371 to 266x164. Serving a scaled image could save 76.8KiB (80% reduction).
  
• http://www.janpeeters.nl/cms/wp-content/uploads/panassembla.png is resized in HTML or CSS from 600x371 to 266x164. Serving a scaled image could save 59KiB (80% reduction).
  
• http://www.janpeeters.nl/cms/wp-content/uploads/RSA_Robinson1.jpg is resized in HTML or CSS from 600x371 to 266x164. Serving a scaled image could save 49.7KiB (80% reduction).
  

Has anyone got any hints as to how to achieve this? I've thought of custom fields but have no clue how to use these in this matter.

Thanks a lot,

Jan

[Danny+ 1,327]

Hi,

I apologise but I am not sure as to what you're trying to do. Can you provide more information please or screenshots showing me please.

[janpeeters 31]

Hi Danny,

Thanks for your help. Anything Boxes uses the featured image of a blog post. It scales the blogpost featured image to the size of Anything Boxes. Scaling is according to Page Speed a no no but that is of secondary importance. Main thing is that I want the blogpost to have a less high image. As you can see on my blogpage the images are huge and I want them less high. If I choose a less high image as the featured image of that blogpost it will result in a also less high image in Anything Boxes on the frontpage. They are scaled with the same ratio. I would love to have more control over the images used. Maybe use two manually cropped images of the same picture. One that is 266x164 on the front page and another that it 600x200 on the blog post page. Do you have a strategie for that?

Thanks, Jan

[Danny+ 1,327]

Hi,

If you wish to change the height of the image to something smaller, you will also need to change the width of the image. Otherwise it will become distorted and look rather odd. Therefore, can you try this code and see if this works for you.

.post-meta .c_img img {

width: 80%;

}[/CODE]


Change the value of width: to what you like, this will keep the image in proportion.

[janpeeters 31]

Hi Danny,

Your solution works but I like my pictures on the blog to be full width. 80% doesn't look as nice. I was hoping to find a solution with two separate images that are cropped with different heights out of the same picture.

https://www.evernote.com/shard/s1/sh/feffeba8-ba04-4c55-82b3-4fc8d9fecb1b/ab7442816c0679c7e000e82d76420c2c

The above image shows the height that I'd like while keeping Anything Boxes the same.

So maybe it boils down to this... is there a way to add some sort of second smaller 'feature' image especially for Anything Boxes? Page Speed would love this too. Is there a way to do this via custom image fields and put that field in the Anything Boxes plugin?

[Danny+ 1,327]

I have never heard of anyway to do this before. Therefore, if you would like this type of functionality in PageLines I recommend you contact one of our Pros.

http://www.pagelines.com/pros

If you would like this functionality in Anything Boxes, then you will need to contact the developer of the store item.

http://www.pagelines.com/store/sections/anything-boxes/

[janpeeters 31]

Hi Danny, this functionality is used on many websites but maybe not on WP with Pagelines Framework, I don't knwo that. I'll write Adam about adding the possibility to override the image with a custom image. And maybe another member has came across a solution for this. So maybe this thread can remain open.

Thanks.

[catrina 103]

Let us know what Adams says so that the insight can be in this thread! Maybe another user will find the info useful.

[cmunns 16]

This is how the src gets generated in the plugin:

$ab_box_icon_ar = wp_get_attachment_image_src($ab_box_icon_id, 'large', false);

so I suppose I could create an option so that 'large' could be replaced by any default or user defined image sizes in WordPress. Obviously this reduces server load by pulling in smaller images, but I wanted to account for people that'd be using large images.

Will definitely add this into the next version instead of just using css to crop them at a max height

[janpeeters 31]

Hi Adam,

Thanks for your reply and explanation. I think I understand that you're saying that you could link to another smaller image of the same picture. Serverload would be less so that is great. But if you want another size AND aspect ratio of the same image on the two pages I think you're still stuck. I believe WP doesn't provide for that. It lets you apply scaling and cropping but gives you just three options: apply to all image sizes, to all imagesizes expect the thumbnail or only to the thumbnail.

Resampling of the less tall feautered image on the blogpage to a smaller size would give empty spaces above and below the image because of the different aspect ratio (1:3 on the blog page and the images in you anything boxes are more towards letterbox aspect ratio).

So my thought was, maybe you could include an image override function in your boxes where people could upload a smaller, different aspect ratio image to the post in the Anything Boxes box. Of course this would be more work so if there is a smarter solution I would embrace it but this way you have full control.

I hope my story is clear, you would almost make an animation to clarify it ;-) Thanks again.

Jan

[cmunns 16]

Jan,

There is no need for an override image uploader, furthermore no place to add these photos because the section does not create a custom post type which defeat its purpose. In WordPress you can specify the dimensions of the image you want to use. This is why I'm using the aforementioned function above instead of just the straight URL of the image...so that it can be optimized in size off the server. WordPress automatically creates different image sizes for you based on your media settings and other custom sizes and so we'll just tap into that to allow you save server load. I don't know that I want to allow for three image sizes all together because if no thumbnail is specified for the lightbox it automatically uses the same image as in the thumb instead of a completely new image which would rack up another http request.

Your concern is valid, but I will need to think about the best way to do this.

[janpeeters 31]

Hi Adam, thanks again for your thoughts. I'm looking forward to whatever you come up with that might solve my problem. Looking forward to it. Thanks!

[cmunns 16]

Hey Jan,

I added a max dimension input for this section so that independent of the thumbnail size you can choose what the max-width should be and wordpress will automatically look for the next biggest attachment from the media library.

This should really help cut down on load time if you have large native images.

[janpeeters 31]

Hi Adam, I will test this any of the following days, next week. Thanks for your work! Jan

[janpeeters 31]

Hi Adam,

I installed it right away to see if the page loading size changed already, but it seems something is missing. The Pollylang plugin can't distinguish between english and dutch posts anymore. So all posts are on the front page at the moment. Maybe some variable got lost in the update? (Not all posts are bilingual so not all posts are twice on the front page).

Jan

[janpeeters 31]

Hi Adam,

Some further testing didn't bring me further. Posts for all languages still on the frontpage so I hope that you have an idea.

Strangely enough I also don't get Anything Boxes to properly load the smaller image as a thumbnail.

I've set Wordpress Media Settings to the following:

266 x 164 is the size of the AnyBox thumb on my homepage.

My Blog features images are 600 x 371 pix. As wide as my post area. I only filled in the width so that I can include images in posts that are higher.

To be able to also link to larger images Large size is set to 1024 x 1024.

So far the settings.

When I upload any large image the filenames get the dimensions added to the filename (screenshot from Coda 2 fileview):

fog_sm is the image inside the post, you can neglect that.

But fulltestimage gives you an indication of how it looks like on the server with a regular too large image.

To have more control I upload prescaled images with dimensions 600 x 371 as the featured image (so that I don't have strange crops when it's being resized to 266 x 164 for Anything-Boxes).

So the fog.jpg file had 600x371 and the fog-266x164.jpg clearly is for AnyBox.

I set in Anything-Boxes Box Image Options like this:

I would say that this would lead to the smaller image being loaded instead of the Featured image.

But the images that are loaded in AnyBox are still the larger ones. When you drag them to your desktop you'll see. The Code (see Pastebin link) clearly says that it must be 266px.

http://paste.pagelines.com/8gw

Hopefully you have a clue what's going on.

I've experimented with Default Thumbnail Plus and Advanced Custom Fields but couldn't get is to work.

Best regards, Jan

[catrina 103]

Have you already tried deactivating all active plugins?

[cmunns 16]

You need to be setting the maximum attachment size. The max image size field is just for the actual thumbnail itself. I guess it might be redundant but the difference is that max image size controls actual html dimensions while max attachment size controls the img source.

[janpeeters 31]

Hi Catrina and Adam,

@catrina, I've disabled all plugins (except Polylang) it didn't solve the problem with Anything Boxes showing all boxes from all languages on the homepage.

@cmunns, Adam, thanks for explaining it further, it now works as described. It loads the smaller versions, yay! Hopfully we can tackle the language problem too. Some people recommend WPML, but Polylang can be used for free (untill I donate) because funds are low atm. And I've heard mainly positive responses about it.

Thanks, Jan

[catrina 103]

WPML is what I hear about most when it comes to language.

[janpeeters 31]

Hi Adam,

I just checked my website again for the Anything Boxes problem mentioned above and I thought it might be interesting to know that my blog page in Dutch and in English discriminate properly between Dutch en English articles. So I guess the posts are properly 'tagged'. Does this give any new clues as to why with your latest update caused the above?

Thanks, Jan

[janpeeters 31]

Hi Adam and Catrina,

I reverted to an older version of Anything Boxes (1.0.1) and the problem with all posts from different languages showing up on the same frontpage is solved. So I'm quite certain something changed in the code that prevents Polylang to correctly recognise the posts language. To be clear, the problem occurred when upgrading from 1.2.1 to 1.2.2 in which Adam implemented the smaller image solution to save server bandwidth.

Hopefully you can figure out what goes wrong Adam.

Thanks, Jan

[janpeeters 31]

Hi Adam (@cmunns),

I'm curious if you've been able to think about what causes version AnyBox 1.0.1 to work well with Polylang and version 1.2.2 to show all the boxes from both languages at the same time. I'd love to tackle this to be able to prevent bandwidth again as you've succesfully impemented in version 1.2.2

For now I'm stuck at 1.0.1. If it's something that can be done in Polylang please let me know. I'm almost certain that the Polylang dev is happy to optimise his plugin.

Thanks again, Jan

[Rob 547]

Jan, Adam isn't in this forum daily. Please write to him with this issue via the Contact link on the plugin page. He does not moderate the forums and actually, we do not support the 3rd party plugins or sections here.

Thanks for your understanding. I just want to make sure your issue isn't ignored.

[janpeeters 31]

Thanks Rob for explaining. I'll contact him there.