Download all Joomla templates including quickstart (demo)only $24.99

Forum

Important - Hands Up!

- Please ask using the account with which you made the purchase or download of our products and in its respective category.
- If you bought our products in another market, ask your questions in that market, not here.

* ADD PRODUCT NAME IN START OF SUBJET

Joomstagram - Pictures are oversized

  • C
  • chris73 New Member
  • Topic Author 2 years 3 weeks ago #1
Hello,

first of all I would like to congrat you for the UT Joomstagram plugin.
But there is an issue since a while, because sometimes the pictures are "exploding". They are oversized. This is happing not always, but quite often.
They are also not horizontally aligned anymore, but vertically and are filling up the complete website screen.
Do you have any idea how to fix this?
Thanks in advance for your support.

Best

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 2 years 2 weeks ago #2
Hello,
when that happens send us the url as confidential and we will check if it is a large image or if the styles have been overwritten by those of your template or some other plugin or script

Regards

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 2 years 2 weeks ago #3
Hello,

this what I am thinking as well. But it is not happening all the time. Sometimes it is normal sized and sometimes extended when I open the website. I was curious to know if this issue is known or also happening to other users as well. I have some coding experience. If you can give me a hint for the CSS I can probably fix it.
This is the reason why I was putting the topic into the forum.
Thanks in advance.

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 2 years 2 weeks ago #4
The CSS is created inline depending on the number of columns selected by the user. IF you have some experience with CSS, what you need to do is use your browser's element inspector to identify the cause of the problem.

regards

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 2 years 2 weeks ago #5
This is the CSS:
.instagram_profile{text-align: center;}.instagram_profile_image{max-width: 125px;min-width: 50px;border-radius: 50%;margin: 0px auto 1rem}.instagram_username{font-size: 1.25rem;margin-bottom: 0.5rem}.instagram_biography{margin-bottom: 1.25rem}.instagram_items{display:flex;flex-wrap:wrap}.instagram_item{position:relative;width:100%;box-sizing:border-box}.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}

Not sure if this really helps.

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 2 years 2 weeks ago #6
Technically you shouldn't do this type of problem unless you have customized the css for the module or your site isn't loading the module style.

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 1 year 10 months ago #7
I think some of the installed modules including the respective CSS interfer to each other and causing this issue.
Do you have an idea what I could change in your joomstagram.css or any other file in order that the sizing of the pictures will not "explode" anymore and stick to their size.
Possibly there is the chance to put an !important somewhere in the css?!?
I believe it will be too difficult to check all the interfernces between the different modules an plugins installed in Joomla.

Thank you in advance.

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 1 year 10 months ago #8
Here the best thing is that when you have the problem you use the element inspector of your browser by right clicking on the image and in the tools that will open you verify that it makes it too big, if the CSS properties of the image container or the same image.

You can also override the image styling by adding the !important statement, if you use one of our templates that override is added to the custom.css file and uploaded to /templates/TEMPLATE_NAME/css/custom.css

Greetings.

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 1 year 10 months ago #9
The Inspector gives the follwing css:

.instagram_item img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;

Do you have a modification script for me, which I should put in the user.css?
Should I also activate the Container in the module functions?

Thanks for your support.

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 1 year 10 months ago #10
Assuming your images overflow the width of the container this might limit that.
Code:
.instagram-image{max-width:100%;} .instagram_item img{max-width:100%;}
If it works, we ask you to confirm here so that the community can also use it.

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 1 year 10 months ago #11
Unfortunately, it did not work at all.

I added your lines to the original joomstagram.css:

.instagram_profile{text-align: center;}
.instagram_profile_image{max-width: 125px;min-width: 50px;border-radius: 50%;margin: 0px auto 1rem}
.instagram_username{font-size: 1.25rem;margin-bottom: 0.5rem}
.instagram_biography{margin-bottom: 1.25rem}
.instagram_items{display:flex;flex-wrap:wrap}
.instagram_item{position:relative;width:100%;box-sizing:border-box}
.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}
.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}
.instagram-image{max-width:100%;}
.instagram_item img{max-width:100%;}

The images are still exploding. I believe that the 100% is still using somehow the complete Protostar template module space.

Is there not something to code else, in order to prevent this? It is really bad to have such huge Instagram Pictures filling up the website vertically.

Thanks.

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 1 year 10 months ago #12
Of course exists a solution but we cannot guess, the code of our modules works perfectly in any type of template. what we think is that the styles, whether loaded by your template or by another extension, have generic classes of the type div[class*="CLASS_NAME"] , div *, or another similar one that is causing this, for that you must discover what class it is the one that gives full width to the container of the images or the images to go out of the container, use the browser inspector and try solutions and the one that works you add to your css customization file.

Regards

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 1 year 10 months ago #13
Thanks for the answer again. I have already tried with the inspector, but without success.
I am using the Joomla Standard Template Protostar and therefore I believe more user are concernced. And yes you are right, this is a interference between your plugin and some other plugins respect. modules.
Therefore I had the question if you have a solution which gives prio to your plugin --> e.g. !important and how I have to code your CSS or something else in your plugin.
Can you support on this to have a kind of an update for Joomstagram to solve this?

Best

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 1 year 10 months ago #14
Possibly the !important can help, as long as there are no other !importants that come from a parent class, then it doesn't work either, it's you who has to test solutions using the element inspector and the developer tools of your browser.

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 1 year 10 months ago #15
Do you have any chance to support on this.
What would you change or add in your joomstagram.css?

.instagram_profile{text-align: center;}
.instagram_profile_image{max-width: 125px;min-width: 50px;border-radius: 50%;margin: 0px auto 1rem}
.instagram_username{font-size: 1.25rem;margin-bottom: 0.5rem}
.instagram_biography{margin-bottom: 1.25rem}
.instagram_items{display:flex;flex-wrap:wrap}
.instagram_item{position:relative;width:100%;box-sizing:border-box}
.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}
.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}

Thanks so much.

Chris

Please Log in or Create an account to join the conversation.

  • C
  • chris73 New Member
  • Topic Author 1 year 10 months ago #16
Dear leoalv,

do you have any proposal how to do that?
I believe 100% does not help too much, because this would fill-up all available space.
What do I have to change in those 4 lines of code in order that the pictures remain in the given setup?
.instagram_items{display:flex;flex-wrap:wrap}
.instagram_item{position:relative;width:100%;box-sizing:border-box}
.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}
.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}

Thanks so much.

Best

Chris

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 1 year 10 months ago #17
There is a problem here, it is that my advices of what can work have already been given to you, and they were thought according to the original structure and style of the module. I cannot do more or advise you more because this cannot be guessed, to solve it you have to see the problem live and test solutions. Unfortunately I can't help you without seeing the problem, because now we are just playing a guessing game. If you send us the url as confidential data, and that problem occurs in our environment, perhaps we can provide a solution, for which we need to know from which browser and version you are browsing as well.

Please Log in or Create an account to join the conversation.