Preserving the mastodon profile photo ratio

  • Resolved kreincke

    (@kreincke)


    1 year, 8 months ago

    Dear friends;

    Recently I’ve started with my mastodon avatar on https://hessen.social/@peerceval While editing my profile, I’ve got the option to add a square account photo (which will be cropped to 400x400px) and a title image (cropped to the size 1500×500). Then I tried to use your plugin in my developement wordpress instance – which worked very well (better than the current twitter widget, which I still use on my production and which shall be replaced by the content gathered by your plugin). But there is one downside:

    In your widget my profile photo is stretched to 16:9 (or similar) ratio. The square photo is not used. I tried a bit by replacing my mastodon profile photo by a 16:9 phote etc. No results: Mastodon reduces the sizes to 400×400.

    So here is my question: How can I modify the picture code in the widget so that its aspect ratio is preserved? (As far as I know, it would be sufficient to delete the height size in the img tag.)

    Best regards an congratulations for your wonderful work. KR

    • This topic was modified 1 year, 8 months ago by kreincke.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Wolfgang

    (@wolfgang101)

    I embedded your feed in my test environment and sent you a DM including a screenshot on Mastodon. It looks OK to me, but maybe I misunderstood your request.

    If it does not look like my screenshot in your environment then most likely some CSS rule from your theme does interfere with the plugin. If you can send me the URL to any test page of yours I can debug it online and help you fix the issue. It should be a few lines of custom CSS that you can add to your WordPress settings.

    Thread Starter kreincke

    (@kreincke)

    Dear Wolfgang; many thanks for your support. Yes: the picture you sent looks as I am expecting the result should look like. I will redo my test on my plublic machine try to find the reason. And I will send you the URL so that you can see effect in the original environment …

    Plugin Author Wolfgang

    (@wolfgang101)

    Looking forward to it!

    Thread Starter kreincke

    (@kreincke)

    So, I’ve updated my production: see https://karsten-reincke.de/ I tried to find the reason by inspecting the elements. Eventually, I met the class avatar. The image itself got a rendered apsect ration of 4.1 of 80:20 although the internal size is 400×400. No idea, how this happens. Do you have any idea? I will send you a screenshot via DM. Many thanks for your help!

    Plugin Author Wolfgang

    (@wolfgang101)

    Your theme has the following definition in your main.css

    .avatar {
    width: 80px;
    }

    If I change it to width: auto it immediately works. I would not recommend to change this very generic css definition though, as to not break your theme.

    A quick fix would be to add something like that at the end of your stylesheet:

    .include-mastodon-feed .avatar {
    width: auto;
    }

    Either directly in your main.css or you can copy and paste the snippet in the backend in Settings -> Appearance -> Additional CSS

    Thread Starter kreincke

    (@kreincke)

    Many thanks!!!! What a great support! I’ve added your line into the file bootScore offers for such cases: scss/_bscore_custom.scss. Have a nice night…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Preserving the mastodon profile photo ratio’ is closed to new replies.