Search code examples
phpwordpresssvgjpeg

Wordpress generates some weird links for images


Hy. After uploading an image to Wordpress it shows some weird link instead of "link-to-project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg"

I noticed it shows some info from the database. For example the ID and the date, the size etc. But idk why wordpress is doing this.

When I inspect the source I get this weird link:

<a class="logo" href="http://localhost/project/"><img src="22, 22, IMG_20171129_125745, IMG_20171129_125745.jpg, 667317, http://localhost/project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg, http://localhost/project/img_20171129_125745/, , 1, , , img_20171129_125745, inherit, 0, 2019-04-07 10:54:26, 2019-04-07 10:54:26, 0, image/jpeg, image, jpeg, http://localhost/project/wp-includes/images/media/default.png, 1700, 1000, Array" alt="logo"></a>

Here is the PHP code

<a class = "logo" href="<?php echo get_home_url(); ?>/"><img src="<?php the_field('website_logo','options');  ?>" alt="logo" /></a>

Note I'm using advanced custom fields here.


Solution

  • Just to add to your answer for people having issues in the future, the problem was the ACF Image field you was calling was set to image object and you was expecting it to return just the url. There are 2 ways to fix this:

    Option 1: Edit the image field to only return the Image URL

    Pros

    • Easy and simple to do, fastest solution
    • Good for inline background css

    Cons

    • Unable to control the image size that is returned
    • Unable to display the image alt tag which can impact SEO

    Option 2: Use the correct ACF Image code to display what you're looking for

    The better way to display the image will be to use the Image object field as it allows a much better approach as you have access to all image attributes not just the URL. In order to display these see below:

    $image = get_field('website_logo','options');
    
    <a class="logo" href="<?php echo get_home_url(); ?>/">
        <img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt'];?>" />
    </a>
    

    More information on using the image object when using ACF Image fields can be found by clicking here.

    Pros

    • Equally as easy and simple to do
    • Allows you to make use of the alt, sizes, title, caption etc. of the image
    • Allows you to use the same image with easy further down in the code by not needing to type out the field function again

    Cons

    • Not the ideal solution when inlining background image css, use image url for this reason instead