Search code examples
phplaravelimgix

Why isn't text overlaying correctly using Imgix Typesetting Endpoints


I am using Laravel. I am trying to use the Imgix Typesetting endpoints to throw the staff bio overtop of the bio image. When I use the typesetting endpoint alone I get the proper formatted text. But when I encode base64 then append to the Bio image uri, the image looks fine but no text overlay. Does anyone know what I am doing wrong?

Here is the function

public function bioEncode($bio, $align) {

    $bioNoSpaces = str_replace(' ', '+', $bio);

    $bioTextUrl = base64_encode("http://newsong.imgix.net/~text?txt=" . $bioNoSpaces . "&txtclr=fff&txtsize=20&w=800&txtpad=20&txtfont=avenir-black&txtalign=center");

    if($align == 0) {

        $newUrl = "http://newsong.imgix.net/staffProfile/cameron-profile-desktop.jpg?fit=crop&crop=top&w=1220&h=500&mark64=" . $bioTextUrl . "&markalign=left,middle&markpad=0";

        return $newUrl;

    } else {

        $newUrl = "http://newsong.imgix.net/staffProfile/cameron-profile-desktop.jpg?fit=crop&crop=top&w=1220&h=500&mark64=" . $bioTextUrl . "&markalign=right,middle&markpad=0";

        return $newUrl;

    }

}

Here is where I am calling the function

srcset="{{$staff->bioEncode($staff->staff_bio, $staff->desktop_img_text_side)}}"

This is the url I am rendering in my browser: http://newsong.imgix.net/staffProfile/cameron-profile-desktop.jpg?fit=crop&crop=top&w=1220&h=500&mark64=aHR0cDovL25ld3NvbmcuaW1naXgubmV0L350ZXh0P3R4dD1DYW1lcm9uK0tpbmcraXMrdGhlK2xlYWQrcGFzdG9yK29mK05ld3NvbmcrQ2h1cmNoLitQYXN0b3IrQ2FtZXJvbitob2xkcythK2JhY2hlbG9y4oCZcytkZWdyZWUraW4rY2h1cmNoK21pbmlzdHJpZXMrd2l0aCthK2NvbmNlbnRyYXRpb24raW4rcHJlYWNoaW5nK2Zyb20rU291dGhlYXN0ZXJuK1VuaXZlcnNpdHkrYW5kK2ErTWFzdGVy4oCZcytkZWdyZWUraW4rZ2VuZXJhbCt0aGVvbG9neStmcm9tK0NvbHVtYmlhK0ludGVybmF0aW9uYWwrU2VtaW5hcnkuK0hlK2FuZCtoaXMrd2lmZSwrUmFjaGVsLCtsaXZlK2luK3RoZStNb25yb2UrYXJlYSt3aXRoK3RoZWlyK2ZvdXIrZGF1Z2h0ZXJzLCtBYmJ5LCtBbGVuYSwrTWFkZGllK0dyYWNlLCthbmQrRWxpYW5hLitIZStpcythbHNvK2Erc3VjY2Vzc2Z1bCtyZWFsK2VzdGF0ZStpbnZlc3RvciwrYW5kK3RoZSthdXRob3Irb2Yr4oCcK1RoZStrZXkrdG8reW91citjaHVyY2jigJlzK3Zpc2lvbjordGhlK3ByYWN0aWNhbCtndWlkZSt0bytwcmF5aW5nK2Zvcit5b3VyK3Bhc3Rvci7igJ0rUGFzdG9yK0NhbWVyb27igJlzK3Zpc2lvbitpcyt0bytzZWUrTmV3U29uZytDaHVyY2grdG8rYmUrYStjZW50ZXIrb2YrcmV2aXZhbCtvbit0aGUrRWFzdHNpZGUrb2YrQXRsYW50YS4mdHh0Y2xyPWZmZiZ0eHRzaXplPTIwJnc9ODAwJnR4dHBhZD0yMCZ0eHRmb250PWF2ZW5pci1ibGFjayZ0eHRhbGlnbj1jZW50ZXI=&markalign=left,middle&markpad=0

when entering this into the Imgix sandbox here: https://sandbox.imgix.com/create this url works. I have encoded and decoded the base64 string, and there seems to be nothing wrong.

I am still new to Php, so any help is very much appreciated.


Solution

  • with the help of a friend. I fixed the problem. The trailing equals was messing me up after the base64_encode(). This fixed the problem:

    $bioTextUrl = strtr(base64_encode("http://newsong.imgix.net/~text?txt=" . $bioNoSpaces . "&txtclr=fff&txtsize=20&w=800&txtpad=20&txtfont=avenir-black&txtalign=center"), '=', '+');