Inserting a linked image on a Weaver Xtreme page

[ToshMcIntosh]

I’m a moderately proficient user of Weaver themes with three websites up and running and a fourth in development using Weaver Xtreme.

I’m using a Mac running OS10.8.5 and building the image in Photoshop Elements 12 with the Elements+ add-on to obtain use of the slice tool, which is a feature of the full Photoshop version and available in PSE12 only with Elements+.

The image I’ve built has six circles arranged around the circumference of a seventh with the company logo. Each of the six has a single word representing the company’s major program areas, and the intent is for visitors to view the scope and breadth of the overall program graphically and from there navigate to individual pages dedicated to each of the six areas.

Using PSE+ for this task creates a parent folder with two items: 1) a sub-folder with the sliced images and 2) an HTML file.

Opening the HTML file presents the image with each of the circles correctly linked to the currently empty “placeholder” pages I’ve included in the developmental website.

What I’ve been unable to do is put this linked image on another page in the website so visitors can view it and link from there to the individual program pages.

My attempts to solve the problem so far have included posting a thread on a PSE forum and communicating with the developer of Elements+.

Some PSE forum users have suggested that building the image in the full Photoshop version (which I don’t have) might solve the problem. Others have suggested that I abandon PSE and Elements+ for this task and learn to build an “image map.” I’m no more than marginally knowledgeable of HTML, and have little interest in halting the project to learn it for this task.

I’m also not yet ready to try the full Photoshop solution because I’m not sure that the problem isn’t caused by my not knowing how to get both the folder with the images and the separate HTML file generated by PSE with Elements+ into a page on the website.

One of the suggestions was to open the HTML file, copy the code for the page, and paste it into an empty page on the website. I tried that with Tools > Web Developer > Page Source and it didn’t work. The result in visual view is a portion of the table generated In PSE+. In text view it’s the copied HTML, and when viewing the page, the content area is blank.

If anyone has a suggestion for solving this, I’d really appreciate it.

Thanks in advance for your assistance.

Tosh

[Weaver]

It will really depend on the exact html generated and the exact form of the image links. In theory you should be able to copy the html to a Wp page and get it to work. Most likely all the links will have to contain the full url and not relative paths. But this is not theme related but an html issue. Note also that what you’ve described is probably not going to display very well on mobile devices.

[ToshMcIntosh]

Okay, that helps guide me to dealing with that end of the problem. Thank you.

[scrambler]

For reference, an image map is not rs[pensive, this means that as the browser gets smaller and the image scales down, the links and the areas no longer match. I would recommend to test if the slicing is responsive, and check how it behaves on mobile before investing too much time into it.

If you are pasting the html in a page, make sure the option “allow raw HTML and script” has been checked, and that your content editor is in TEXT mode (not visual). You need to remove the html, head and body tags (opening and closing) and only keep the content part of the page.

To help more we would have to see the HTML

[ToshMcIntosh]

Thanks, scrambler. At this point I’m not all that concerned about the appearance of the page on mobile devices because I can’t get it to appear correctly on my cinema display. The only thing I haven’t checked is “allow raw HTML and script.”  Gonna do that now

[scrambler]

Make sure you cleaned up the html/head/body, and eventually paste the original and complete  html page source here

[ToshMcIntosh]

It wasn’t checked, but it made no difference. I can show you the HTML, although I’ve already been told “it’s a mess,” which may be due to using Elements+ with PSE.

One of the differences in that method and using the full Photoshop slice tool is that the export feature in PSE+ does not have the option of saving images and HTML with one save action. You save images only, then save the HTML into the same folder. With full Photoshop, you select “images and HTML” and save only once.

I don’t know if that makes a difference in the quality of the HTML, and I can’t check it out until I can get to a computer with the full Photoshop application.

[scrambler]

If the images are separate, it is likely that the HTML is using a relative path for them expecting them to be in the same folder as the HTML.

When you put the HTML in a WordPress page, this will no longer be the case.

You will need to upload the images in the Media library, then check their URL, then update the URL in the HTML to reflect the new wordpress path

[ToshMcIntosh]

Okay, I’ll try that, thanks.

[ToshMcIntosh]

Here’s the first portion of the HTML copied from the opening “table” tag to the closing one:

<table id=”Table_01″ width=”1801″ height=”2306″ border=”0″ cellpadding=”0″ cellspacing=”0″>
    <tr>
        <td colspan=”12″>
            <img src=”images/uwp-circle-diagram_v2_01.gif” width=”1800″ height=”665″ alt=””></td>
        <td>
            <img src=”images/spacer.gif” width=”1″ height=”665″ alt=””></td>

It appears to refer to slice 01, whose URL from the media library is shown as:

<!–
/* Font Definitions */
@font-face
{font-family:”ＭＳ 明朝”;
panose-1:0 0 0 0 0 0 0 0 0 0;
mso-font-charset:128;
mso-generic-font-family:roman;
mso-font-format:other;
mso-font-pitch:fixed;
mso-font-signature:1 134676480 16 0 131072 0;}
@font-face
{font-family:”ＭＳ 明朝”;
panose-1:0 0 0 0 0 0 0 0 0 0;
mso-font-charset:128;
mso-generic-font-family:roman;
mso-font-format:other;
mso-font-pitch:fixed;
mso-font-signature:1 134676480 16 0 131072 0;}
@font-face
{font-family:”Adobe Garamond Pro”;
panose-1:2 2 5 2 6 5 6 2 4 3;
mso-font-charset:0;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:7 1 0 0 147 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:””;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:none;
font-size:12.0pt;
font-family:”Adobe Garamond Pro”;
mso-fareast-font-family:”ＭＳ 明朝”;
mso-bidi-font-family:”Times New Roman”;
mso-fareast-language:JA;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
font-size:10.0pt;
mso-ansi-font-size:10.0pt;
mso-bidi-font-size:10.0pt;
font-family:”Adobe Garamond Pro”;
mso-ascii-font-family:”Adobe Garamond Pro”;
mso-fareast-font-family:”ＭＳ 明朝”;
mso-hansi-font-family:”Adobe Garamond Pro”;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.WordSection1
{page:WordSection1;}
–>

http://02a99e5.netsolhost.com/wordpress1/wp-content/uploads/2015/08/uwp-circle-diagram_v2_01.gif

So if I’m understanding this correctly, I need to replace a portion of the HTML for each of the images that will go on the page with the URL from the media library image, and I’m doing that because of the difference between a relative path and the WordPress path. In layman’s terms, a relative path only searches in the same folder, but the WordPress path looks farther afield for the source?

[scrambler]

As you can see in your html, the image tags have a relative path, that looks for the images in a folder images that is supposed to be in the same place as the html page itself.

<img src=”images/uwp-circle-diagram_v2_01.gif“

Of course, once you upload your images in the media library, they are no longer in that folder hierarchy, so you need to check each image path and use the new url from the media library

<img src=”http://02a99e5.netsolhost.com/wordpress1/wp-content/uploads/2015/08/uwp-circle-diagram_v2_01.gif“

[ToshMcIntosh]

Got it, thank you.

[scrambler]

But the whole thing appears to be in a table with fixed sizes which will not be responsive.

You may try to convert all the fixed width to percentages to make it responsive

[Gillian]

An image map really would be easier, and can be made responsive, unlike a table.  There are quite a number of online tools to create the map (eg tool 1, tool 2, tool 3 – just Google for others) so there isn’t a huge learning curve involved.

Once you’ve created your image map, you can make it responsive by using this plugin – just install and activate – no configuration required.

[scrambler]

Thanks for reminding us about that plugin, I had compeletely forgotten about it.

[ToshMcIntosh]

Thanks to all.

I found a tutorial titled, “How to Create Image Maps for WordPress.” Using the very clear, step-by-step workflow the author shows using Mobilefish.com, a guy who can barely recognize HTML was able to create the image map in about an hour, and it works perfectly. Here’s the tutorial for anyone interested.

[Author]

Posts