Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1355538

    Hi, I am using the Blog Posts widget to display a single blog post. I am using the Blog Style option of “Single Author, big preview Pic (no author picture is displayed, featured image is big)”. The featured image that I associated with the blog post is 1204 x 890px. When that image is displayed within the Blog Posts Widget the image gets changed to a much smaller image with the dimensions of 260 x 185px. That means the image becomes blurry since I have selected the “featured image is big” option.

    Within the Blog Posts widget there is an option under Styling > Appearance where I can set the Preview Image Size, but no matter what option I select the image stays the same small size. Looking at the HTML here is the code for the image:

    <img width="260" height="185" src="https://www.jbmpackaging.com/wp-content/uploads/2022/02/2a_Solutions-260x185.jpg" class="wp-image-9147 avia-img-lazy-loading-not-9147 attachment-portfolio_small size-portfolio_small wp-post-image" alt="">

    As you can see above it’s setting the class to “attachment-portfolio_small size-portfolio_small”. I assume this is the issue. Instead I just want to use the real size of the image that I uploaded. If the image is 1000 x 1000px then I want the image to load as 1000 x 1000px. I don’t want the featured image to be altered in any method.

    How can I change this behavior for the Blog Posts widget? Thanks!

    #1355592

    are you familiar with inspecting the DOM? Look what is your portfoliobox-ID

    use this to get influence on image source as a snippet in your child-theme functions.php:

    function my_avf_newsbox_image_size( $image_size, array $args, array $instance ){
      if( $args['widget_id'] == ( 'portfoliobox-3' || 'newsbox-2' || 'newsbox-4' ) ){
        $image_size = 'full';
      }
      return $image_size;
    }
    add_filter( 'avf_newsbox_image_size', 'my_avf_newsbox_image_size', 10, 3 );

    ______________
    just for INFO:
    change full to what you like to have ( small, medium, large etc. pp.) you can find the names of the enfold image-sizes on functions.php lines 211ff:

    $avia_config['imgSize']['widget'] 		= array('width'=>36,  'height'=>36);			// small preview pics eg sidebar news
    $avia_config['imgSize']['square'] 		= array('width'=>180, 'height'=>180);		       // small image for blogs
    $avia_config['imgSize']['featured'] 		= array('width'=>1500, 'height'=>430 );			// images for fullsize pages and fullsize slider
    $avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 );			// images for fullsize pages and fullsize slider
    $avia_config['imgSize']['extra_large'] 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
    $avia_config['imgSize']['portfolio'] 		= array('width'=>495, 'height'=>400 );			// images for portfolio entries (2,3 column)
    $avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 );			// images for portfolio 4 columns
    $avia_config['imgSize']['gallery'] 		 = array('width'=>845, 'height'=>684 );			// images for portfolio entries (2,3 column)
    $avia_config['imgSize']['magazine'] 	= array('width'=>710, 'height'=>375 );			// images for magazines
    $avia_config['imgSize']['masonry'] 	= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
    $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321);		        // big images for blog and page entries
    $avia_config['imgSize']['entry_without_sidebar'] = array('width'=>1210, 'height'=>423 );		// images for fullsize pages and fullsize slider
    #1355817

    are there any questions on how to do it?

    you have to look into the frontend html code what widget ID is your portfolio :
    ( click to enlarge )

    this is what had to be inside that little snippet on top ( here on that example it would be : portfoliobox-2

    #1355854

    Hi Guenni007, I appreciate the additional details. I cannot find a “section” ID that relates to the blog post widget where the image is being set. I think it might be best if you take a look at the issue directly if you don’t mind. I’m including a link and login within the private content section.

    When you go to the page URL link that I sent, you will see the image that I am referring at the top. This image is blurry because the size being pulled by Enfold is using a small dimension. The actual image size however is very large and should not be blurry at this size. I just want the blog posts widget to use the real size that has been uploaded and not try to alter the size when displaying it.

    I hope that make sense. Please let me know if there’s anything you need while helping to troubleshoot. I appreciate the help!

    #1355864

    Sorry – I’m a participant like you – so there’s no private content area for me to see either.
    ( if it is the page that is part of your src in the first post – i can not see any widget )

    with all this – to style web pages it is useful to learn how to use the developer tools of the browsers. In Chrome, Firefox, Opera these are available by default. With Safari you have to activate the Developer Tools in the Settings – Advanced Settings at the bottom. Then you have the possibility to point to elements via the context menu of the mouse and to inspect them. Mostly a window is shown like this one above. On the left side there is the html structure and mostly on the right side the css settings related to the shown element.

    So you go with the mouse over your portfolio widget and open the context menu (usually the right mouse button). There you will see something like examine or inspect. The window above will show up.

    #1355880

    or do you realy mean “widget” – this is kind of technical term.
    I now think you are talking about the postslider – and the thumbnails shown on this.
    But be carefull – if you got a big list of portfolio – and each got a full resolution – performance will suffer on that.

    Try this snippet in your child-theme functions.php:
    f.e. on archiv pages like categories :

    function custom_post_featured_image_link( $image_link, array $current_post, $size ){
      if(is_tag() || is_archive()){
        $image_link = get_the_post_thumbnail( $current_post['the_id'], 'full' );
      }
      return $image_link;
    }
    add_filter( 'avf_post_featured_image_link', 'custom_post_featured_image_link', 10, 3 );
    #1355899

    Hi Guenni007, my apologies I didn’t realize you were a participant. I really appreciate you trying to assist. I went ahead and created a development version of the website and here is the page I am referring that has the issue so you can see it: https://jbmpackagindev.wpengine.com/blog-2/.

    To your point I am referring to the “Blog Posts” widget within the Avia Layout Builder. If I go to edit the page, click on the “Content Elements” tab, and select the “Blog Posts” widget, this is the selection I am using for the page.

    Once I add the “Blog Posts” widget to the page, I am showing just one blog post. The featured image associated with this blog post has a large height and width, but the Blog Posts widget is setting the dimensions to 260px wide and 185px tall. Here is the HTML when I view the source:

    <img width="260" height="185" src="https://jbmpackagindev.wpengine.com/wp-content/uploads/2022/05/header2-260x185.png" class="wp-image-9303 avia-img-lazy-loading-not-9303 attachment-portfolio_small size-portfolio_small wp-post-image" alt="">

    Even though the class names has “portfolio” in the name, the item is really the featured image for the selected blog post. For some reason Enfold is pulling the featured image for this blog post and then setting the dimensions to 260×185. I just need Enfold to use the full size image that I uploaded as the featured image and not try to shrink the dimensions.

    I hope that helps better. Let me know if there is anything else I can provide. I appreciate all your help, thank you!

    #1355903

    hm … i try to get what you have taken for the alb element inside that page.

    First – if you use the blog post alb element to insert. There is on the Styling Tab the option “Preview Image Size”
    there you can choose the image size.

    At the moment i could not say if there is a filter to preset that image_size attribute

    What you can do as “quick and dirty” solution is to have a child-theme postslider.php
    But then you will have in all alb elements getting the infos from postslider.php the full resolution.

    #1356053

    Hi Guenni007, thanks again for all the help. The last message regarding the styling tab unfortunately doesn’t work for me. It’s something I tried initially and I was hoping that setting the “preview image size” would fix the issue, but it didn’t. I actually do not know what this option does to be honest. It either does something completely different that what I’m expecting it to do, or it doesn’t work and is buggy.

    Anyway, I revisited the code you sent previously that should set the image to full size and I was able to get that to work. At first the code was not working but I removed the “if” statement and after I removed that code the feature images went to full size and resolution. I’m not sure if this will affect other parts of the website but so far it’s looking good. Here is the code I ended up using:

    function custom_post_featured_image_link( $image_link, array $current_post, $size ){
        $image_link = get_the_post_thumbnail( $current_post['the_id'], 'full' );
      return $image_link;
    }
    add_filter( 'avf_post_featured_image_link', 'custom_post_featured_image_link', 10, 3 );

    For now I think I am good to go. I really appreciate your help, thank you!

    #1356060

    but on your example page i can see that the full image is taken for the source:
    ( click to enlarge – red underlined )

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.