How to use an image from the folder wp-contentimages from a php file?

1 Views

I have a WordPress website that was customized by a php developer. He created a folder for images in the root of the website. I have a requirement to move this foder from the root of the website to inside the wp-contentimages folder.

Here is how the php file is written today using the image files from the folder in the root:

Read More
<img src="images/img1.jpg" border="0" style="padding-right:44px;"/>
<img src="images/img2.jpg" border="0" style="padding-right:44px;"/>
<img src="images/img3.jpg" border="0" style="padding-right:44px;"/>
<img src="images/img4.jpg" border="0" style="padding-right:44px;"/>
<img src="images/img5.jpg" border="0"/>

Now that I moved the images to the wp-contentimages folder, I tried many combinations (wp-content/images/img1.jpg; /wp-content/images/img1.jpg; public_html/wp-content/images/img1.jpg;/public_html/wp-content/images/img1.jpg), but the images are not showing up. How should I refer to the images in that folder?

Many thanks!
Rob.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. If your images are associated with a custom theme then they should be in your theme directory.

    You can use the get_bloginfo wordpress api to get an absolute url to this directory.

    bloginfo('template_url')

    See the above link for important information on different variations of this.

    So you would replace your image links with something like 

    <img src="<?php bloginfo('template_url')?>/images/img1.jpg" border="0" style="padding-right:44px;"/>

    1. Add Image Directory to Active Theme

      Add /images folder to your current active theme.

      Add Local Image Directory to Active WordPress Theme (Child)

    2. Optimize Your Images for Production

      This is important for user experience and pagespeed. A faster website shows visitors you care about their time. If using the native media manager, there are several free plugins that will optimize your images automatically on upload– in addition to online services (like TinyPNG), OS applications (like Codekit for Mac, JPEGMini for Windows) and the command line.

    3. Display Local Image in WordPress

      If Parent Theme is active: use template_directory

      <img src="<?php bloginfo('template_directory')?>/images/YOUR-IMAGE-HERE.jpg" alt="Image Title" border="0" width="" height="" style="padding-right:44px;"/>

      If Child Theme is active: use stylesheet_directory

      <img src="<?php bloginfo('stylesheet_directory')?>/images/YOUR-IMAGE-HERE.jpg" alt="Image Title" border="0" width="" height="" style="padding-right:44px;"/>

      Add this code to your template files where you want your image to display, changing ‘/images/YOUR-IMAGE-HERE’ (and attributes) to match the correct file location, name and attributes:

      Include alt, width and height information for every image in production to increase pagespeed and enhance content accessibility.

    4. That’s it!

    Additional Notes

    • If using a child theme, you’ll want to change template_directory to stylesheet_directory

    • In most cases you’ll want to use the native WordPress media manager to insert and display images. There are also several free plugins that can help you optimize and enhance image quality dynamically:

      • EWWW Image Optimizer
      • WP Retina 2x
      • Regenerate Thumbnails

    • In addition, WordPress has a list of available parameters that can be used to target a specific (different) directory or url. Check that our here:
      http://codex.wordpress.org/Template_Tags/bloginfo

    Include image set as separate file for reuse

    If reusing this same ‘set’ of images in several places, create an include file for the set and add them via [shortcode] as needed. To update, you would then only need to update the extended file, which would in turn update all exported code where the [shortcode] has been placed automatically.

    <?php include( get_template_directory() . '/includes/myfile.php'); ?>

    Best, -K