Support » Fixing WordPress » How to upload/insert a sliced image with links

  • Resolved colormechanics


    Hello again, here I am with yet another question on how to insert stuff!! I’ve been learning a lot but stil, so much to discover!

    This time, I created an image in Photoshop, which I then sliced and assigned links to each slice. I’ve come to find I can’t just upload that image into my Media Library…so… how can I upload and insert said image into one of my WP pages?

    I have thought about the possibility of just inserting the whole HTML created by Photoshop into my header, instead of trying to place it within the Page body. Would this work? And if so, where would be the appropriate place to store my HTML?

    Here is the page as it is displaying right now just with a regular jpg, no links active obviously: Homepage

    As always, any help or ideas will be much appreciated!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • david.bailey


    You should be able to add the images into the theme directory in your theme, and add the html into the right template. I’m not seeing it show up on all the pages, so it doesn’t look like header.php would be an appropriate place for it, but that should work. If it doesn’t, from there you should be able to fix it up with some basic styling.



    Oh, ok I get the part about where to upload the images. Thing is this particular image should only show up in the Homepage, so you’re right, header.php wouldn’t work…nor page.php i think… I’ll try a few things and report back.

    Thanks @david.bailey!



    To do it on the home page only, copy the index.php file to a new file called fornt-page.php and then you can add your HTML code into that. This file will be automatically used to display your sites front page so you odn’t need to mess around with anything else.



    Hi @david.bailey and @michael.mariart !

    I’m reporting back after many attempts and happy to say I nailed it!!

    I had to combine what you guys advised me to do. Here’s what made it happen:

    * I created an image map with an online tool and copied the html code to my clipboard.

    * I tried doing a front page php by copying the index file, but that didn’t work. Instead, I copied the template php that I use to display all pages, I renamed it frontpage.php and also changed the name of the template in code at the top of of the file so that it would be available from a dropdown menu in the page editor.

    * I pasted the image map code into my new frontpage.php and adjusted the margins.

    * Opened the page editor in wordpress and selected frontpage as the template to be used to display that page. Uploaded and voila!!

    Here’s the result The Roofing Crew

    Took a lot of figuring out but your help certainly got me on the way, I am very grateful to you both!

    hi david.bailey, colormechanics and michael.mariart !! I was following this conversation and I am a newbi. I have a basic question, I am trying to make a custom front page for my site. So I made it in photoshop and tried to generate the html code with dreamweaver. I saved my file as php and copied the code and pasted it in a new page caleed slash.php in my wp-content/hatch. In wordpress I chose the templat as my slash page but the image I made in photoshop is not there (this makes sense as I just copied the code from dreamweaver but did not put the image file anywhere in cpanel) because I don’t know where/how to put in in cpanel (just drag and drop in wp-content/themes folder?). so i guess I am missing a middle part of the whole process, I can make a template image in photoshop and know how make the template to show up as front page in wordpress but the step by step process for generate coding and uploading in cpanel, i don’t know properly.

    Any help will be really appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to upload/insert a sliced image with links’ is closed to new replies.