Image in sidebar latest news widget - Support | Kriesi.at

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
April 30, 2021 at 5:08 pm #1297604

Erwin
Participant

Hi,

As I think to understand, there should be an image in the latest news widget, at least as it’s added as a featured image. I do have a image in my post, also a featured image, but it doesn’t show up in my excerpt. Can you tell me whys? I’ve added the url in the private content.

Regards,
Erwin

May 3, 2021 at 6:54 am #1297902
Nikko
Inactive Moderator
Hi Erwin,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
  ( to be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

Best regards,
Nikko
May 3, 2021 at 8:05 am #1297925

Erwin
Participant

Hi Nikko,

Thank you for looking into it. I’ve placed the credentials in the private section.

Regards,
Erwin

May 4, 2021 at 7:03 am #1298164
Rikard
Keymaster
Hi Erwin,

Thanks for that. You have this in Quick CSS, which is hiding the image:
```
.news-thumb, .no-news-thumb {display:none!important;}
```
Please remove or alter that code.

Best regards,
Rikard
May 5, 2021 at 9:46 am #1298479

Erwin
Participant

Thanks! I’ve changed it, now the thumb is displaying.

Thing is, it’s a bit a small. I’ve tried a few things to get it to 100% width of the sidebar, but it doesn’t work so far. Read in this forum about regenerating the thumbs, but this wouldn’t help, I think. In media the size is 80 x 80, it’s shown as 28 x 28. In the img code it’s set at 36 x 36.

How can I fix this?

Regards,
Erwin

May 7, 2021 at 2:39 pm #1298957
Mike
Moderator
Hi,
Thank you for your patience and the link to your sidebar news widget, so in this screenshot of your current source code please note that the current width & height of the image is 36px, and the “sizes” attitude has the max-width set to 36px, Red Arrows, but you also have a 180px source image available, Yellow Arrow

So I prepose this jQuery script to change the source image used to the 180px version which will give you a larger image and keep it looking crisp.
```
function newsbox_custom_script() { ?>
    <script>
(function($){
  $(document).ready(function(){
$('.sidebar .newsbox .news-thumb img.size-widget').attr('width', '180');
$('.sidebar .newsbox .news-thumb img.size-widget').attr('height', '180');
$('.sidebar .newsbox .news-thumb img.size-widget').attr('sizes', '(max-width: 180px) 100vw, 180px');
$('.sidebar .newsbox .news-thumb').css({'height': '180px','width': '180px'});
 });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'newsbox_custom_script');
```
Now if you want the image larger you could regenerate the thumbnails so you would have a larger option for a source and adjust the script, or if you don’t need the image to be very crisp you can adjust the last line of the script (css) to suit.

Best regards,
Mike
May 10, 2021 at 10:16 pm #1299495

Erwin
Participant

Thanks Mike!

`Now I have the image full width in the sidebar and the next ‘problem’ appears. The title of the post isn’t visible anymore. When I started I used the 180px width, width that setting the title was next to the image in a very small div. Now the image is full width, there isn’t any space anymore for the title.

Do you have a solution for that also?

Regards,

Erwin

May 11, 2021 at 12:19 pm #1299651
Mike
Moderator
Hi,
Glad to hear this helped, for the news headline please try this:
```
.sidebar .newsbox .news-headline {
    overflow: visible;
}
```
I believe this will work without !important; but you could try that also.

Best regards,
Mike
May 11, 2021 at 1:26 pm #1299667

Erwin
Participant

Thanks, the title is now visible. Last tweak…. is it possible to place the image below the title?

Regards,

Erwin

May 12, 2021 at 5:12 am #1299809
Nikko
Inactive Moderator
Hi Erwin,

Can you try adding this code in your child theme’s functions.php:
```
function move_newsbox_heading(){
?>
<script>
(function() {
    var newslink = document.querySelectorAll('.news-link');

    newslink.forEach(function(el) {
        var heading = el.querySelector('.news-headline');
        el.insertBefore(heading, el.childNodes[0]);
    });
})();
</script>
<?php
}
add_action('wp_footer', 'move_newsbox_heading');
```
Hope it helps.

Best regards,
Nikko
May 12, 2021 at 9:44 am #1299860

Erwin
Participant

Thank you!!

That finished it. Topic can be closed.

Regards,

Erwin

May 12, 2021 at 10:13 am #1299864
Guenni007
Participant
Or – by the way : you can use a filter to redefine the source for those images
you can do that box wise:
f.e. these widgets will use instead the square images ( 180px x 180px )
```
function my_avf_newsbox_image_size( $image_size, array $args, array $instance ){
  if( $args['widget_id'] == ( 'portfoliobox-3' || 'newsbox-2' || 'newsbox-4' ) ){
    $image_size = 'square';
  }
  return $image_size;
}
add_filter( 'avf_newsbox_image_size', 'my_avf_newsbox_image_size', 10, 3 );
```
May 12, 2021 at 10:57 am #1299874

Nikko
Inactive Moderator

Hi Erwin,

We’re glad that we could help :)
Thanks for using Enfold and have a great day!

@Guenni007 thanks for helping out :)

Best regards,
Nikko
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Image in sidebar latest news widget’ is closed to new replies.