Jump to content
janpeeters

Everything Boxes and different sized featured images

Recommended Posts

janpeeters

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).

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

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

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?

Share this post


Link to post
Share on other sites
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

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.

Share this post


Link to post
Share on other sites
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cmunns

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

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
cmunns

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.

  • Like 1

Share this post


Link to post
Share on other sites
janpeeters

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!

Share this post


Link to post
Share on other sites
cmunns

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.

  • Like 1

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
janpeeters

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.

WP_Media_Settings.png

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

WP_Uploads_Library.png

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:

WP_AnyBox_Settings.png

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

Share this post


Link to post
Share on other sites
cmunns

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.

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • janpeeters
      By janpeeters
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

    • MooiWeb
      By MooiWeb
      Hello,

      I would like to align my qtranslate with my breadcrumb so that the flags are on the same hight.
      I'm aware of putting a code in the custom css and tryed severall codes from your site but for now, no succes

      The site i'm working on is http://nieuw.vazdias.nl

      Thx,
      Edwin



×