Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

SP Pagebuilder Instagram Gallery not displaying properly

Featured Lock Resolved Issue
Hi,

So I just saw, that the Instagram Gallery isn't displaying properly. And I have no Idea why. A few days ago it worked. And all of a sudden something went wrong.

I've got custom css but it didn't look like it because of that.

Anybody ideas why?

Thanks in advance

Attachments (2)

  • Bildschirmfoto 2017-08-30 um 14.01.22.png
    Bildschirmfoto 2017-08-30 um 14.01.22.png 544.5 KB
  • Bildschirmfoto 2017-08-30 um 14.01.30.png
    Bildschirmfoto 2017-08-30 um 14.01.30.png 341.3 KB

58 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Roy code is OK, but you have to remove addon ID, which is unique for each addon (site).


.sppb-instagram-images li { height: 50px; overflow: hidden; }
.sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 50px ; overflow: hidden; }

Paul Frankowski - Staff

More than a month ago #Permalink
hi,
make a simple test :
install this same quickstart on test subdomain and check there this addon
---
BTW
what version of SPPB Pro you have there?

Noah

More than a month ago #Permalink
hi,
make a simple test :
install this same quickstart on test subdomain and check there this addon
---
BTW
what version of SPPB Pro you have there?


Okay

But at first it worked and displayed correctly but since a few days it‘s not displaying correctly.

The newest I just updated it.

Paul Frankowski - Staff

More than a month ago #Permalink
Reasons can be two:
1) Instagram changed something in their code, we use their API
2) You installed/done something which have broken "design"

Alexandre

More than a month ago #Permalink
It's happening the same thing with me, I do not know if this is the problem, but the images are not the same size and the script is not adjusting the blocks, leaving them badly docked.

Can you verify this for us?

Look ~> http://gede.com.br/_bypastor/quem-somos

Noah

More than a month ago #Permalink
Reasons can be two:
1) Instagram changed something in their code, we use their API
2) You installed/done something which have broken "design"


So are you checking if Instagram changed their API? And release an Update?

That was also a thought of mine.

My custom CSS:


.invisible {
display: none;
}

.sp-page-title h3 {
border-color: white;
}

#sp-header {
top: 20px;
}

.com-spstrings #sp-main-body, .view-artists #sp-main-body {
background: white;
}

.strings-album-list:hover p a {
color: grey;
}

#sp-main-body {
background: white;
}

.sp-page-title:before {
background-image: -moz-linear-gradient(90deg,#fff 0%,rgba(255, 255, 255, 0.6) 38%,rgba(255, 255, 255, 0.1) 86%,rgba(0,0,0,0) 100%);
background-image: -webkit-linear-gradient(90deg,#fff 0%,rgba(255, 255, 255, 0.6) 38%,rgba(255, 255, 255, 0.1) 86%,rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient(90deg,#fff 0%,rgba(255, 255, 255, 0.6) 38%,rgba(255, 255, 255, 0.1) 86%,rgba(0,0,0,0) 100%);
}

.sp-performer-list .sppb-addon-content:before,
.sppb-addon-persion .sppb-addon-content:before {
content: '';
background-image: -moz-linear-gradient(90deg,#7a7a7a 0%,rgba(108, 108, 108, 0.7) 100%);
background-image: -webkit-linear-gradient(90deg,#7a7a7a 0%,rgba(108, 108, 108, 0.7) 100%);
background-image: -ms-linear-gradient(90deg,#7a7a7a 0%,rgba(108, 108, 108, 0.7) 100%);
}

.sp-performer-list .sppb-addon-content .person-content-wrap .ditails-page-link, .sppb-addon-persion .sppb-addon-content .person-content-wrap .ditails-page-link {
padding: 34px 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
background: black;
}

.sppb-addon-gallery .sppb-gallery .gallery-image .sppb-gallery-btn:before {
content: "";
background-image: -moz-linear-gradient(90deg,#7a7a7a 0%,rgba(108, 108, 108, 0.7) 100%);
background-image: -webkit-linear-gradient(90deg,#7a7a7a 0%,rgba(108, 108, 108, 0.7) 100%);
background-image: -ms-linear-gradient(90deg,#7a7a7a 0%,rgba(108, 108, 108, 0.7) 100%);
opacity: 0;
}

.sppb-addon-gallery .sppb-gallery .gallery-image:hover h3 {
background: black;
}

.music-videos-title {
color: white;
}

Paul Frankowski - Staff

More than a month ago #Permalink
Q; how it was before? there was images as boxes or Masonry layout

Noah

More than a month ago #Permalink
Q; how it was before? there was images as boxes or Masonry layout


Image as boxes like on the demosite

Alexandre

More than a month ago #Permalink
Q; how it was before? there was images as boxes or Masonry layout


there is no configuration asked in the SP Page Builder add-on (image insta-ssp.png)

as I said above, the error is apparently in the size of the image. (image insta-erro.png)

Attachments (2)

  • insta-ssp.png
    insta-ssp.png 223.2 KB
  • insta-erro.png
    insta-erro.png 999.1 KB

Paul Frankowski - Staff

More than a month ago #Permalink
In presented sites, not all thumbs are 640x640 px dimension images (Square), width yes, but not height.
It's because Instagram now has 3 image orientations: Square, Landscape (horizontal), Portrait (vertical) - not all are good for gallery.

Noah

More than a month ago #Permalink
In presented sites, not all thumbs are 640x640 px dimension images (Square), width yes, but not height.
It's because Instagram now has 3 image orientations: Square, Landscape (horizontal), Portrait (vertical) - not all are good for gallery.


Yeah, but before it just croped it that it‘s square and all of a sudden it doesn‘t any more.
Is there a solution? Or can we then only upload square pictures to instagram?

Alexandre

More than a month ago #Permalink
So I believe it is necessary to update the addon for SP Page Builder, it would be interesting if I could show the images as in SP Easy Image Gallery (Default, Mosaic or Rectangle)

Noah

More than a month ago #Permalink
So thats it?
No solution or something?

Noah

More than a month ago #Permalink
@Paul Frankowski

So is there now a solution for this problem?

Alexandre

More than a month ago #Permalink
Hello, I'd like to know why support takes a long time to troubleshoot. I like working with SP Page Builder, but I'm seriously thinking of switching to the competitor. Whenever I complain about a BUG they take a lot to solve! This MUST be done as fast as possible automatically, but neither with user, who is subscriber, you resolve or at least show respect and respond to request. I am very disappointed with Joomshaper support

Paul Frankowski - Staff

More than a month ago #Permalink
We are checking source of problem. Because Instagram changed rules of games , not we.

Noah

More than a month ago #Permalink
We are checking source of problem. Because Instagram changed rules of games , not we.


Thank you.

Aschwanden

More than a month ago #Permalink
We are checking source of problem. Because Instagram changed rules of games , not we.


Thank you.


Hello
I'm a bit disappointed about the "Instagram Gallery" tool. I have read in the forum that over 1 month ago the same problem was spoken, but it has not changed yet. It should be possible to make a better and more beautiful representation of the Instagram Gallery.
I have also installed ShortCode Ultimate. There is this possibility. Also the possibility of how many pictures should be displayed at the beginning. Then the site visitor has the possibility to click the "show more" button, then more pictures will appear. In addition, the pictures are all the same height. Looks very good.
When will this be the standard in the PageBuilder?

TripleC

More than a month ago #Permalink
Any update on this?

Paul Frankowski - Staff

More than a month ago #Permalink
Very sorry, I will remind developers again.

afavaro

More than a month ago #Permalink
where do i find css to change the layout of the images in the instagram module? and set spacing between images etc ..

Attachments (1)

  • Schermata 2017-10-25 alle 15.30.14.png
    Schermata 2017-10-25 alle 15.30.14.png 168.9 KB

Aschwanden

More than a month ago #Permalink
Hello
I updated Joomla to the latest version and also SP Page Builder. The Instagram Galery is still not working right. When will this be corrected?

Alexandre

More than a month ago #Permalink
Very sorry, I will remind developers again.


Paul, I have renewed my subscription now, I hope to have better support.

You see, since 30 August 2017 you have not fixed a simple CSS positioning problem.

I hope you do not disappoint me.

Fator 3 Informática

More than a month ago #Permalink
Hello!
Same problem here...

Could anyone help me to get a fix on it???

If you guys check this out, my client website is horrible.
Update template and SP Page Builder to the last version and now it is all wrong.

http://www.newmillennium.com.br

Paul Frankowski - Staff

More than a month ago #Permalink
@Fator 3 Informática
and was OK before?
Maybe use extra Instragram module instead - so you will be able to claim down client even today.
In mean time I will ask our developer when this fix planned.

Alexandre

More than a month ago #Permalink
Paul, look how worried I am about Joomshaper support.
This bug warning is on Wednesday, 30 August 2017!
Even after 3 months nothing was done, being a module of SP Page Builder (I believe to be the company's flagship) you did not correct the problem.

Attachments (1)

  • jsbug.png
    jsbug.png 891.5 KB

Fator 3 Informática

More than a month ago #Permalink
@Fator 3 Informática
and was OK before?
Maybe use extra Instragram module instead - so you will be able to claim down client even today.
In mean time I will ask our developer when this fix planned.


I'm sorry, Paul. Which module is that exactly? I only found one Instagram addon in SP Page Builder.

Paul Frankowski - Staff

More than a month ago #Permalink
Search module on JED, you know where....
---
Sorry, but I cannot speed up this process :(

Fator 3 Informática

More than a month ago #Permalink
Search module on JED, you know where....
---
Sorry, but I cannot speed up this process :(


I see. You mean a MODULE not an Addon.
So, no solution at all?

Paul Frankowski - Staff

More than a month ago #Permalink
MODULE - yes, I thought it's obvious. We have only one addon. (ONE)
It doesn't matter what you use, result is much more important for client.

Fator 3 Informática

More than a month ago #Permalink
MODULE - yes, I thought it's obvious. We have only one addon. (ONE)
It doesn't matter what you use, result is much more important for client.

Of course. I agree. Client first.
However we are here because we bought a solution, which is no longer working, even while it's working in your demo page. ;)

Anyways, I'll try something else and in the mean time I expect you guys come up with a solution.

Paul Frankowski - Staff

More than a month ago #Permalink
on our demo we used gallery with photos with this same shapes, not "crazy" ones like you have.

Fator 3 Informática

More than a month ago #Permalink
on our demo we used gallery with photos with this same shapes, not "crazy" ones like you have.


I just don't understand why it is not working now, since all the pictures was 'crazy'.

Paul Frankowski - Staff

More than a month ago #Permalink
we have all images in one resolution.

Alexandre

More than a month ago #Permalink
You'll excuse me Paul, but apparently it's not that hard to be fixed. It has been months since this topic was opened and nothing has been done so far!
You said that the customer comes first, we are not customers? How can you not get a solution for a BUG of your product? Other modules from other developers or even for Wordpress that even with photos of different resolutions, the behavior in the frontend is perfect.
I'm already annoyed with Joomshaper, as well as not solving a problem, they still resent customers badly!

Paul Frankowski - Staff

More than a month ago #Permalink
I put note about problem inside our system ~month ago,
I cannot personally fix it - if i could you would get, at least temporary, solution in less than 48h.
I am really sorry. Some aspects I cannot speed up :(
---
That's why I suggested to use alternative solution so far.

Aschwanden

More than a month ago #Permalink
Und jetzt? Gibt es für dieses Problem eine Lösung? Ich möchte keine Fremdmodule oder Komponente einsetzen wenn es irgendwie geht.

Aschwanden

More than a month ago #Permalink
And now? Is there a solution to this problem? I do not want to use any third-party modules or components if somehow it works.

Paul Frankowski - Staff

More than a month ago #Permalink

.sppb-instagram-images li { height: 280px; overflow: hidden; }
.sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 100%; }
.sppb-addon-instagram-gallery ul li a img { height: 100%; }


fix in next update

Attachments (1)

  • custom_css_for_pages_sppb.png
    custom_css_for_pages_sppb.png 7.6 KB

Alexandre

More than a month ago #Permalink
Shame on you, 7 months for 3 lines of code.

Has anyone tested?

anoel

More than a month ago #Permalink
I just added above mentioned 3 lines of code. It doesn't work properly. The images are too big now.

Alexandre

More than a month ago #Permalink

.sppb-instagram-images li { height: 280px; overflow: hidden; }
.sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 100%; }
.sppb-addon-instagram-gallery ul li a img { height: 100%; }


fix in next update


I tested it and it did not work, it was the same but with the images stretched vertically

Nayem Majhar - Staff

More than a month ago #Permalink
Alexandre

I don't know why other support guys would not explain how does Instagram API work.

Instagram API send images data including three type of size, one thumbnail ( 150x150 pixel), low-resolution image and full-size image whereas the 2nd and 3rd type of image size based on original image aspect ratio. We use the low-resolution size image in the Instagram gallery. That's why images appear in different sizes.

There are some solutions to avoid/fix this situation/issue.

1. Upload the images to Instagram with the same size.
2. Use thumbnail image to show Instagram gallery ( this worst solution )
3. Site and addon specific CSS fix. ( based on addon settings and Instagram image )

I got your page link ( http://bypastor.com.br/quem-somos ) from screenshot and added a fix for that page ( Instagram addon ). Please add below CSS code in the template custom.css file. Then remove Joomla and browser cache and check the view.

Please me know the update.

Thank You



#sppb-addon-1500046182242 .sppb-instagram-images li{ height: 230px; overflow: hidden;}
#sppb-addon-1500046182242 .sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 230px; overflow: hidden; }

Alexandre

More than a month ago #Permalink
Hello, for the problems I have found like this, I have migrated to wordpress. There are several plugins that work for instagram, they also give you several options for visualization, with or without border etc.

I include the code that you sent me and got in line, not ideal, but at least it's better than the previous one.

in the homepage footer still strange

Thanks for the return, even if time consuming.

Nayem Majhar - Staff

More than a month ago #Permalink
Below code for Home Page:


#sppb-addon-1500054808827 .sppb-instagram-images li { height: 50px; overflow: hidden; }
#sppb-addon-1500054808827 .sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 50px; overflow: hidden; }



I don't know why you are moving to WordPress. If it is only about instagram plugins, then there are lot of module in JED for instagram design.


Thanks

Roy Velthof

More than a month ago #Permalink
The CSS code doesn't work , is there a fix for the Instagram addon so images are all same size on front page?

#sppb-addon-1500054808827 .sppb-instagram-images li { height: 50px; overflow: hidden; }
#sppb-addon-1500054808827 .sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 50px; overflow: hidden;

Roy Velthof

More than a month ago #Permalink
OK, fixed

THANKS!

Nayem Majhar - Staff

More than a month ago #Permalink
You welcome

OK, fixed

THANKS!

Kaptan

More than a month ago #Permalink
Alexandre

I don't know why other support guys would not explain how does Instagram API work.

Instagram API send images data including three type of size, one thumbnail ( 150x150 pixel), low-resolution image and full-size image whereas the 2nd and 3rd type of image size based on original image aspect ratio. We use the low-resolution size image in the Instagram gallery. That's why images appear in different sizes.

There are some solutions to avoid/fix this situation/issue.

1. Upload the images to Instagram with the same size.
2. Use thumbnail image to show Instagram gallery ( this worst solution )
3. Site and addon specific CSS fix. ( based on addon settings and Instagram image )

I got your page link ( http://bypastor.com.br/quem-somos ) from screenshot and added a fix for that page ( Instagram addon ). Please add below CSS code in the template custom.css file. Then remove Joomla and browser cache and check the view.

Please me know the update.

Thank You



#sppb-addon-1500046182242 .sppb-instagram-images li{ height: 230px; overflow: hidden;}
#sppb-addon-1500046182242 .sppb-addon-instagram-gallery .sppb-instagram-images li a { height: 230px; overflow: hidden; }


Could you provide please a global solution. A step by step guidance to fix this. Unfortunately there was no acceptable solution. Other 3rd party extension did not have any similar problems like here.

regards,

Nayem Majhar - Staff

More than a month ago #Permalink
@Kaptan Thanks for your suggestion. We will try add a global solution with next update of SPPB. :)

badorc

More than a month ago #Permalink
Hello !

I can't find any solution or answer about the famous "Instagram Gallery addon". Its still not working properly ?

Paul Frankowski - Staff

More than a month ago #Permalink
yes, we all have to wait for next update. It's painful also for me , because I am on the front line.

Myriam

More than a month ago #Permalink
Good morning,
any news about the update?
Instagram gallery dosen't work :( :( :( :(

Paul Frankowski - Staff

More than a month ago #Permalink
so far no information since last update 3.2.8 (3.2.9 today), maybe you should concern to use extra Instagram gallery module instead. On JED there are few. Or give us more details.

Nayem Majhar - Staff

More than a month ago #Permalink
@Myriam# badorc Could you explain the issue in detail? We updated the 'Instagram Gallery Addon' a few weeks ago.

Thanks

Myriam

More than a month ago #Permalink
Instagram gallery don't desplay my post correctly.
Yes, i Know, photos on instagram profile aren't the same size.

Attachments (1)

  • instagram.png
    instagram.png 168.5 KB

Nayem Majhar - Staff

More than a month ago #Permalink
Instagram gallery don't desplay my post correctly.
Yes, i Know, photos on instagram profile aren't the same size.


Share site URL here. Did you override Instagram addon in the template? Please let me know. Thanks


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 106
Sifat

Sifat

Total Accepted Answers: 102
Toufiq

Toufiq

Total Accepted Answers: 41
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us