Travelographer

Hey Marcin,

thank you for your response.

One of my blogposts as an example:
https://www.travelography.de/2015/12/10/island-tipps-route-fotografie/

I have already fixed it on my blog, but I guess there are a lot of other people, who still have this issue.

To explain the issue I may have to go in greater detail.

The issue is just related to the dimension of the thumbnail images. Btw I couldn’t find any thumbnail images on you mentioned website?!

I configured my upPrev plugin that it should show the thumbnail of the previous post with a width of 300px.

Up to the wordpress 4.4 it worked fine. Since the update wordpress has a so called srcset (sourceset) feature to better support responsiveness.

Unfortunately it choose the wrong dimension from the sourceset. So there is a 578px width thumbnail displayed instead of the 300px width thumbnail. It is just resized to fit in the div.

But that’s an issue regarding to pagespeed and traffic volume of the website. Also it might have influence on your SEO.

As a workaround I changed the following code snippet:

apply_filters(
                        'iworks_upprev_get_the_post_thumbnail', get_the_post_thumbnail(
                            get_the_ID(),
                            array(
                                $iworks_upprev_options->get_option( 'thumb_width' ),
                                9999
                            ),
                            array(
                                'title'=>get_the_title(),
                                'class'=>'iworks_upprev_thumb'
                            )
                        )

to

apply_filters(
                        'iworks_upprev_get_the_post_thumbnail', get_the_post_thumbnail(
                            get_the_ID(),
                            'featured_small',
                            array(
                                'title'=>get_the_title(),
                                'class'=>'iworks_upprev_thumb'
                            )
                        )

and added to my functions.php

add_image_size( 'featured_small', 300, 300, false);

As I mentioned it’s just a workaround. Because I lost all the flexibility I had..

Hope you can better understand my issue now ??

Regards
Christian

Hey Marcin,

thanks for your quick reply.

As a workaround I replaced the array with one of the wordpress standard dimensions.

Regards
Christian

Finally I solved it..

I just forgot to set the container height to 100% … :S

Hey Dylan,

thank you for your support!

This was an excellent hint. I tried the option and used the trigger option of jQuery! Now it works perfectly.

Thank you again and probably you are interested to see my result on https://www.travelography.de

Regards
Christian

I placed the custom js code in the header.php. I customized the code a little bit and that’s how it works now:

<script>jQuery.noConflict(); (function ($) {
                                function readyFn() {
    $("a[title='Die Welt']").click(function()
            {
                if($('div.flexslider').is(':visible')){
                    $('div.flexslider').slideUp("slow");
                    $('div.nav-map').slideDown("slow");
                    bgmp_wrapper( jQuery );
                }else{
               //   $('div.nav-map').slideUp("slow");
	       //   $('div.flexslider').slideDown("slow");
                }
            })
        }
    $(document).ready(readyFn);
    })
    (jQuery);
</script>

For the google map I used the Basic Google Maps Placemark plug in, but there seems to be a incompatibility between jetpack and this plug in. If I use maps in my postings the share buttons are hidden, but anyway ..

I added also some code in the extra.php

echo ( '<div class="nav-map">');
	echo do_shortcode( '[bgmp-map center="italy" categories="places-ive-visited,places-i-want-to-see" zoom="3" type="terrain"]' );
	echo ( '</div>');

and some in the functions.php

add_filter( 'bgmp_map-shortcode-called', '__return_true' );

That’s it!

The result is visible on https://www.travelography.de

I did some scriptings and I think this will work …

But anyone got an idea where to place the custom code?

<script>jQuery.noConflict(); (function ($) {
                                function readyFn() {
    $("a[title='Die-Welt']").click(function()
            {
                if($('div.flexslider').is(':visible')){
                    $('div.nav-map').fadeIn();
                    $('div.flexslider').hide();
                }else{
                    $('div.nav-map').fadeOut();
                    $('div.flexslider').fadeIn();
                }
            })
        }
    $(document).ready(readyFn);
    })
    (jQuery);</script>