Asking any web developers for help? [Creating a image with text]

Discussion in 'Programming' started by NetherGoblin, Aug 3, 2018.

  1. So i have been toying around with it for atleast 2 hours now and simply can't find out how to do what i want,
    im trying to set an anchor with a round border around it at the center of the buttom of ALL images, i can't find good words to explain but here is an example
    upload_2018-8-2_17-51-8.png
    i can't really find out how to do it but i'd like to learn if someone could link me or explain, Thanks anyone who can help
    Another try at explaining : (Edit 1)
    I found a better way to explain it if the image isn't enough,
    You know how youtube timestamps every video with the length? I'm trying to do that on every one of my images, images will be dynamically placed depending on screen size so I can't really set them for just myself,
    [​IMG]
    How would I put something like that box on every image on the size? (Preferably in the center)
     
    #1 NetherGoblin, Aug 3, 2018
    Last edited: Aug 8, 2018
  2. Try this:

    https://codepen.io/anon/pen/XBqOPd

    Use
    Code (Text):
    text-align: center;
    on the parent div if you want everything to be centered.
    As for the background, use
    Code (Text):
    background: url("path-to-image.jpg");
     
  3. Strahan

    Benefactor

    Using straight HTML/CSS or a scripting language? I've done that before with PHP/GD.
     
    • Funny Funny x 2

  4. Looking into them now Thanks

    Id prefer HTML/CSS but if its better with PHP/GD (Don't know what GD is...) then id be glad to learn how
     
  5. How are HTML and CSS comparable to PHP? One is not better than the other since they do completely different things. You don't need one of them, you need all. HTML is a markup language, CSS is styling, and PHP is a server sided programming (some call it scripting) language. There is absolutely zero similarity between. If you're gonna make a website, you need HTML and CSS none the less. What server sided code you use is up to you, but PHP is very common.
     
    • Like Like x 1
  6. o_O? I'm aware of this, But i was asking mainly if its better to do this kind of thing with something like php/gd, i was saying id perfer doing it with html/css because it makes more since to do it with that (rather then php, a serverside language as you clearly stated for no reason)
    No offense but i don't need you telling me what i need to use, i know what i need and would be glad to learn more if needed,
     
  7. I disagree. Judging from this statement it still seems like you don't know the purpose of HTML, CSS and PHP individually. If you know what these languages are used for, why do you have this thread? You can't make a website without HTML or CSS, and PHP is simply very common. Other things like Javascript may also be needed. It heavily depends on what you need to do.
     
    #8 MrDienns, Aug 3, 2018
    Last edited: Aug 3, 2018
  8. mathhulk

    mathhulk Retired Moderator
    Retired

    I don't see a need for these comments. How I understood what the author was saying was that he would rather create these images client-side via HTML, CSS and JavaScript rather than create the image via a server-side language like PHP and then having to serve that image to the client. However, he stated that he wouldn't mind using a server-side language like PHP depending on what is more efficient. I'm sure there was just a misunderstanding here.
     
    • Friendly Friendly x 1
  9. For the record is still need help, I found a better way to explain it if the image isn't enough,
    You know how youtube timestamps every video with the length? I'm trying to do that on every one of my images, images will be dynamically placed depending on screen size so I can't really set them for just myself,
    upload_2018-8-8_11-10-59.png
    How would I put something like that box on every image on the size? (Preferably in the center)
     
  10. you have to:
    - create an element with
    Code (Text):
    position: absolute
    and then change its position with bottom, left, right or top properties
    - make the container of the video position: relative
     
  11. Yeah, i understand that but how would i do that on everyimage? Example: im going to have 5 rows each holder 2-4 images depending on screenn size, how would i make sure they all stay centered?
     
  12. Strahan

    Benefactor

    Dunno if PHP is an option for you but I threw together a quick n' dirty example using PHP/GD in case:

    Code (Text):
    <?php

      putenv("GDFONTPATH=" . realpath("."));

      $box_X = 100; $box_Y = 20; $ext = strtolower(pathinfo($argv[1], PATHINFO_EXTENSION));
      list($img_X, $img_Y) = getimagesize($argv[1]);
      $output = imagecreatetruecolor($img_X, $img_Y);
     
      switch ($ext) {
      case "jpg":
      case "jpeg":
        $source = imagecreatefromjpeg($argv[1]);
        break;
      case "png":
        $source = imagecreatefrompng($argv[1]);
        break;
      }

      $black = imagecolorallocate($output, 0, 0, 0);
      $white = imagecolorallocate($output, 255, 255, 255);
      $offset_X = ($img_X - $box_X) / 2; $offset_Y = $img_Y - ($box_Y + 10);
     
      imagecopyresampled($output, $source, 0, 0, 0, 0, $img_X, $img_Y, $img_X, $img_Y);
      imagefilledrectangle($output, $offset_X, $offset_Y, $offset_X + $box_X, $offset_Y + $box_Y, $white);
      imagettftext($output, 10, 0, $offset_X + 20, $offset_Y + 15, $black, "verdana", "Example");
      imagepng($output, pathinfo($argv[1], PATHINFO_FILENAME) . "_overlay.$ext");

      imagedestroy($source);
      imagedestroy($output);

    ?>
    It creates a white centered 100x20 box at the bottom of the image with "Example" in it overlayed onto whatever image is passed to it. Running in the context of a webpage just replace $argv[1] with the image filename (I was running it in my command prompt when testing). There is a function somewhere to get the resultant size of a text area so you can properly center the text, but I can't recall what that is.

    Test image I grabbed from Google Images:
    [​IMG]

    Output:
    [​IMG]
     
  13. oh this seems perfect will look into it now! Thanks a lot <3
     
  14. Oof, this is a little offtopic but you seem to know php better then me at least (Not hard) for some reason, no matter what i change my font to it won't work?
    "Warning: imagettftext(): Invalid font filename in D:\webserver\htdocs\project\ServerList 2.0\functions.php on line 41"
    all i edited was the font (Tried with the one you used too) and changed argv to the image dir? Did i do something wrong? Thanks for any help
     
  15. Strahan

    Benefactor

    Is the .TTF in the directory with it?

    I had headaches getting it to work too, till I read somewhere to add that environment set to tell PHP to where to look for the TTF file, then you specify the font as the filename of the .ttf just w/o extension. The actual truetype file has to be there though.

    You can copy from %windir%\fonts if on Windows to grab some truetype files.
     
  16. Hey,

    if you are looking for a solution without CSS (Real image creation):

    PHP: Check the ImageMagick extension (GD is so 90s)
    JS: Create a canvas, draw what ever you like on it and save the blob.

    CSS->Image: Setup a Headless chrome and use the api to take a Screenshot. (This would be way over engineered for this case)
     
    • Like Like x 1
    • Friendly Friendly x 1
  17. Strahan

    Benefactor

    Hey, I'm old, what can I say lol. I wasn't aware ImageMagick had an extension, cool. Have to go read up on it.
     
    • Like Like x 1

Share This Page