Test Instagram

[catch-instagram-feed-gallery-widget title=”Insta” type=”users” layout=”round” column=”two-columns” number=”1″ target=”true” link_type=”none” link_text=”Load More” ]

[catch-instagram-feed-gallery-widget title=”Insta” type=”users” layout=”default” number=”1″ target=”true” link_type=”none” link_text=”Load More” ]

[catch-instagram-feed-gallery-widget title=”” type=”tags” tag=”zellerdorfhaus” lightbox=”false” number=”1″ target=”true” link_type=”none”]

{catch-instagram-feed-gallery-widget title=”” number=”1″ lightbox=”false” link_type=”none”]

My Solution (only works for my needs) :

Changed code in catch-instagram-feed-gallery-widget-pro/public/js/catch-instagram-feed-gallery-widget-public.js
Commented out line 164 and 187 (red)

function image_adjust() {
   $('.catch-instagram-feed-gallery-widget-wrapper .item a.pretty').each(
      function() {
         var img = $(this).find('img.cifgw');
         var src = $(img).attr('src');
//       $(img).css('display', 'none');
         if( undefined !== src ) {
            $(this).css('background-image', 'url(' + src + ')');
         }
         $(this).css('background-size', 'cover');
         $(this).css('background-position', 'center');
      }
   );
   resize();
}

function resize() {
    $('.catch-instagram-feed-gallery-widget-wrapper .item a.pretty').each(
       function() {
          var width = $(this)
             .parents('li')
             .width();
          var rect = $(this)
             .parents('li')[0]
             .getBoundingClientRect();
          if (rect.width) {
             width = rect.width;
          }
//        $(this).css('height', width);
          $(this).css('width', width);
      }
    );
}

Images now in proper aspect ratio: look at bottom of this page.

Below error description:

Hi tikaram :
Since the image output is controlled via the background image, the background-size:cover; specifying would be a great thing. But setting height and width to a fixed – and same – value makes ‘covered’ output impossible.

I don’t know where this code comes from and in this case I don’t see a chance to get the correct aspect ratio via css styles or shortcodes.
Or are there other possible layout settings?

Took your example now – anyway all pictures are shown square and not in “standard_resolution”

Here the problem in the HTML code

<ul style="position: relative; height: 1220.56px;" class="masonry">
<li class="item masonry-brick" style="position: absolute; left: 16px; top: 0px;">
<a class="pretty" 
target="_blank" 
href="https://www.instagram.com/...." 
style=" height: 171.08px; 
width: 171.08px; 
background-image: 
url(&quot;https://scontent-cdg2-1.cdninstagram.com/v/...;); 
background-size: cover; 
background-position: center center;">
<img class="cifgw" 
src="https://scontent-cdg2-1.cdninstagram.com/v/...." 
style="display: none;">
<span class="cifgw-overlay"></span>
</a>
</li>
.
.
</ul>

catch-instagram-feed-gallery-widget title=”Catch Instagram Feed Gallery Widget” type=”users” username=”zellerdorfhaus” layout=”masonry” column=”four-columns” number=”10″ size=”standard_resolution” target=”true” link_type=”load_more” link_text=”Load More”

Regards
Dieter

Termine

Archiv