Architectural Details Direct - 903-356-2158

(approved ?.??.??/??)

Also, see Introduction (Category) Pages at Standard Formats.

(#15.91.95.61 Page Layout)
When graphics (photos or other images) need to be located in a area other than the "Image," "Icon," or "Inset" fields, they should be embedded in the Caption.

1. Text Flow
The graphic can be manipulated to have the text appear in a variety of ways:
A. Wrapped around the graphic
B. Aligned with the top, bottom, or middle of graphic
C. After the graphic (leaving the graphic alone on one line).

2. Permanently Embed Graphic = Putting into HTML on Webpage
A. First determine if a graphic has already been placed permanently at the store.
(1) Right click on graphic at Store page and select Properties.
(2) Look at Locations (Address). If placed permanently, the address will start with
http://lib.store.turbify.net/lib/vintagewoodworks/ei- ...
a. Permanently embedded graphics are saved on our Server and at the YS Library. (Winter Sale Banners are located at Server > i\40 Publishing\Images\Outside our Numbering System\Yahoo Store Embedded Images and at i\40 Publishing\Images\Outside our Numbering System\Sale Images\WS Graphics
b. Each permanently embedded graphic's name starts with ei-
(3) If graphic was previously placed permanently, simply use the following when embedding on a page:
a. <img src="https://sep.turbifycdn.com/ty/cdn/vintagewoodworks/ei-?t=1715110160&graphic name>
b. Don't forget to add other required Attributes to the HTML, such as ALT="text"
and TITLE="text"

B. To Save a Graphic Permanently to the Store into Lib Files:
(1) Upload the graphic with a new "ei" version name of the file to YS File Library (Lib Files)
a. Yahoo Store > Click 'Files' button in a new tab (CTRL + Files)
b. Click 'Upload' button (2nd row)
c. Click 'Browse' and navigate to graphic on Server
d. Double click on File Name.
e. Back in 'Upload' box, #2. Enter the name you want this file to have on the server (e.g. foo.gif). You have to choose some name for it. Enter the appropriate ei name for the image including suffix (.jpg)
f. Click 'Send'
g. Repeat steps b-f for each file you need to upload (currently, 3 for sale banners)
h. You can verify your work at Lib Files by clicking on a staged file and then opening it with your browser.
i. Note: Clicking "Publish All Staged Files" near top of Library Files (takes a few minutes and a rotating circle in tab name is the only indicator that publishing is taking place) will cause changes to display in public mode immediately after Staged File publishing is completed. To avoid this, such as when changing a banner file for the next sale in a series, you can stage changed files and wait for the entire Store to be published, as that will publish staged files automatically.
j. If you're waiting to publish entire Store before automatically publishing Staged Files, you can verify your changes in Edit Mode. (Be sure to refresh Store page after changing a Lib File.)

(3) Navigate to page where you want to embed this graphic (or where it's already embedded to see that changes have been made).
a. If embedding for first time, paste appropriate HTML code, changing the pop-up page URL, IMG SRC location, and ALT & TITLE tags as needed.
Examples for Sale Banner w/ pop-up:
HOME Banner
<CENTER><a href="javascript:testWindow('sale-popup.html')"><IMG SRC="/lib/vintagewoodworks/ei-promo-banner-home.jpg" ALT="Sale Banner" TITLE="Sale Banner" BORDER=0></a></CENTER>
PRODUCT Banner
<CENTER><a href="javascript:testWindow('sale-popup.html')"><IMG SRC="/lib/vintagewoodworks/ei-promo-banner-product.jpg" ALT="Sale Banner" TITLE="Sale Banner" BORDER=0></a></CENTER>
b. If HTML code already exists but changing from temporary to permanent file reference (or any other reason to change), simply replace IMG SRC lib file location.
Example: IMG SRC="/lib/vintagewoodworks/ei-promo-banner-home.jpg"

(4) If New Graphic doesn't display, file name is probably wrong. If so, go back to Library Files at Store, delete wrong file, and redo.

(5) Publish store

(6) To View a File from Library Files
a. Click on the File Name (URL) in Lib File list.
b. In popup box, click next to Open and then Browse to select Internet Explorer and click OK.
c. It should open in your browser.

Three HTML Attributes Required
Embedding a Graphic/Image into the Caption field requires the following HTML tag with 3 attributes:
<IMG SRC="image url" ALT="alternative text to be displayed when graphic cannot be displayed" TITLE="same text as in alt attribute">

Additional attributes to control location of graphic
align="right"
example

<img src="https://sep.turbifycdn.com/ty/cdn/vintagewoodworks/ei-prod-brkt-crescent1114.jpg?t=1715110160&" alt="example" title="example" ALIGN="RIGHT">
The graphic will be placed at the right margin of the page. All text will appear to the left of the graphic.

align="left"
example

<img src="https://sep.turbifycdn.com/ty/cdn/vintagewoodworks/ei-prod-brkt-crescent1114.jpg?t=1715110160&" alt="example" title="example" ALIGN="LEFT">
The graphic will be placed at the left margin of the page. All text will appear to the right of the graphic.

Adding space to graphic without editing graphic

Horizontal Space
example

<img src="https://sep.turbifycdn.com/ty/cdn/vintagewoodworks/ei-prod-brkt-crescent1114.jpg?t=1715110160&" alt="example" title="example" align="left" HSPACE="30">
HSPACE controls amount of space added to both left and right of graphic

Vertical Space
<img src="https://sep.turbifycdn.com/ty/cdn/vintagewoodworks/ei-prod-brkt-crescent1114.jpg?t=1715110160&" alt="example" title="example" align="left" VSPACE="20"> example

VSPACE controls amount of space
added to
both top
and
bottom of graphic.

Border around graphic
When graphics/images are used as links, the blue border around the graphic can be removed by adding the attribute BORDER="0"

Border around image - removed

Border around image should be displayed. Firefox does not display but IE does display link box border around image.

Sizing a Graphic
To manually size a graphic if it is too large or too small, you use a width and height command for the image.
width="150" height="135"

Adjust the width and height as needed until you get the size you need.

Steps 6 - 10 should be done by FBG office.
6. Review Embeded Graphics
A. Do monthly review of embedded graphics.
B. Do not correct embedded graphics for at least 2 months (allowing some time for changes)
C. In EDIT Mode select "Contents" then "images-in-caption-incorrectly"
D. Click on link to show graphic
E. Right click on graphic, click "Save As"
F. Locate file: \\Vww-39\i\40 Publishing\Images\Outside our Numbering System\
Yahoo Store Embedded Images
(1) Give graphic a proper new name
a. Unfortunately, the program at YS will replace a file with the same name without
notification.
b. In order to avoid naming our graphics with the same name as what YS or FP used,
we begin all graphic File Names with ei- (embedded image)
(2) Examples:
a. Info pages - ei-info-...
b. Google Feed pages - ei-gf-category-sku.jpg
c. Reference pages - ei-ref-....
d. Products - ei-prod-door7102-1 (use "-2" for larger pop-up graphics)
e. Promotions - ei-promo-....
f. Vendor - ei-'az'-(AZEK), ei-'yw'-(YellaWood) etc.....
g. View names on file for more examples
h. Follow the steps above for several graphics at one time
(3) Open the YS Library Files in a new tab (CTRL + Files)
a. Click "Upload"
b. Click "Browse" and navigate to location of all Yahoo Store Embedded Images
c. Double click on File Name
d. Enter the File Name you want this file to have on our Server
e. Use the ei-... name without the .jpg, .gif, or .png (ei-prod-door7102-1)
f. Once all saved files have been downloaded, click "Publish All Staged Files"

7. When the files have been published, return to the "images-in-caption-incorrectly" page

8. Click on link to edit the page.

9. Locate the embedded graphic HTML and replace the URL with the new URL at the YS Library File location
A. Example: "/lib.vintagewoodworks/ei-prod-door7102-1"
B. Update page.
C. Check to see that the graphics are the same - change as needed.

10. Do NOT publish store for these changes, just wait for next publishing.

====================================

(1) Open Fireworks (even if they graphic doesn't need editing)
a. File Menu > Open > Navigate to image location on our Server. (Winter Sale banners are located at Server > i\40 Publishing\Images\Outside our Numbering System\Sale Images\WS Graphics\
b. Click 'Open' or double-click
c. Do a 'Save As'
i. Save in the "Embedded Images" folder on Server > i\40 Publishing\Images\Outside our Numbering System\Yahoo Store Embedded Images
ii. Rename with "ei" prefix and "jpg" suffix.
Examples for sale banners:
ei-promo-banner-home.jpg
ei-promo-banner-product.jpg
ei-promo-banner-door.jpg
iii. If you are wanting to replace an existing graphic at YS, you must use the exact same file name. The computer will beep to let you know file exists and that you will be replacing with a file of the same name. Yes, you want to replace it.

Newsletter Signup Browse Archives
RELATED PAGES
Graphics
Graphics, Alt & Title Attributes
Graphics, Locating Files
Graphic, Link to a page
Graphic, Link to Pop-up
Links

Architectural Details Direct - 903-356-2158

Graphics, Embedded

Newsletter Signup