[The recipe is at end of this file. Fuller expls elsewhere.] This is really v.2 of DOCclip; summarising what the problem and sol.s are. Also: DOCimgPDF says how to show pdf docs as/like IMGs; perhaps clipped. A] IMGs AND OVERVIEW OF HOW TO DO CLICKABLE THUMBNAILS ======================= DOC on thumbnail images ... DOCclip THE GENERAL PROBLEM (brief) How to do clickable thumbnails, so can have small portraits and clicking on them gets more info/images. OVERVIEW OF THE BASIC SOL.s / SOL-ELEMENTS 1) A > IMG. max-width: 50px (or height but not both) in the inner (IMG_) creates the thumbnail from a bigger pic.

2) Oval img borders: just border-radius: 50%; in IMG (or SPAN), but it doesn't work on . 3) For cropping: 5 params do and control scaling and cropping. A > SPAN > IMG 4) For getting it to work in lists, an outer

inside
  • but outside, and w/o any special style, the rest. It gets the thumbnail to inherit the border from IMG and be 2-colour depending on whether visited. 5) For binding pic and text: Really only 2 sols: a) Use a table (or modern CSS equiv); but this allows only vertical divisions, not wrap round of text and pic. Can get v-centering of text rel. to pic. b) Use wrap (pic align-left, text not) BUT then can't get v-centering if text shorter (vertically) than the pic. b2) Could then use other visual-binding techniques e.g. a hairline border or bg colour of the whole LI or

    element surrounding this pic and its text; to subsitute for v-centering. b99) Possibly I could find/invent some technique to push down the text when wrapping by an empty

    above the text whose size is half of (VertSizePic - VertSizeText). OTHER IMG PROBLEMS B] 2-D gallery pic layout, either of random pics or of people C] 1-D pic layout, enforcing equal size pics, as large as window allows. D] Trouble pre-loading remote imgs CSS CONSTRUCTS PARTICULARLY DEALT WITH IN THE SOL.S clip: float: overflow: valign: THE GENERAL PROBLEM (longer): THE 6-ODD RELATED but SEMI-SEPARATE ISSUES 1. Reducing the size of a pic = getting a thumbnail. 2. Non-rect pic borders 3. Cropping a pic: picking out a head from a bigger pic. 4. Binding a pic. to text / flow of text round the pic. 5. Getting this to work in bulleted lists as well. 6. What should come up on clicking / hovering the thumbnail: Bigger version of same pic; Diff. pic.; A page about the person (text as well as probably a pic); A menu offering more than one possibility. 7. Installing an anchor at the thumbnail. Futher explanations of the recipes are in: DOCanchor DOCimg1 DOCimg2 DOCimgPDF DOCclip ================ BEST CURRENT RECIPES =================== Currently, myNewWave/mhealth.html page is best demo of thumbnail use. = RECIPE 1 ========= If I store /own a copy of the pic, then it's easiest to have 2 versions of it: small/thumbnail, and full scale. Recipe/cliche then is, including creating an anchor tag for jumping to the point marked by the thumbnail: -------------------------------------------------------------------

    Naomi Clark: Mindfulness   #nclark

    Passport photo
    Del. the 'Q's as required to control size on the page; and oval, and spin animation. = RECIPE 2 ========= ------------------------------------------------------------------- If I'm going to use only pictures hosted remotely (i.e. owned by the person shown), then the full recipe and instrs are below. It is a "cliche" / pattern for using thumbnail photos and includes: A) Cropping to a reduced-scale pic from a much bigger original pic. B) Allows for, to some extent, using more than one pic of same person i.e. not having large and small versions come from same pic. C) The CSS stuff that lets text appear beside the pic; but not run on to the area where the next thumbnail is. D) Installing an Anchor for jumping to the place on the page where the thumbnail is. E) Fancier effects (rotating pic; oval pic;) Instructions (explanatory notes below the recipe) * Check the file/page has these includes in : *Copy all this including these instructions. * Delete surrounding DIV unless inside a
  • list. * Get the thumbnail (inner) version to work by iterating over Q1 to Q5 and getting each size right in turn to extract and scale the pic bits you want. * Then decide whether to include extra effects: Q9, Q10 *Don't use the Q10 rotate class for the IMG, only? in SPAN. *The outer HREF may be either an alt. home page or a full-size version of the pic or an alternative pic. *Use the clear:both above and below when doing thumbnails and text beside them. * Use extra
    in front of the text if it's too little to wrap and needs pushing down from upper top edge of pic

    Naomi Clark: Mindfulness   #nclark

    photo
    text to show beside the thumbnail...
    --------------------- Notes (relevant if you start editing the recipe): 1) SPAN not DIV. The border is not from IMG (rounding hides that anyway), but from SPAN. SPAN will inherit color from , at least if you create a border but spec NOTHING not even 'inherit' as a border-color. 2) The cropping doesn't work unless either: a) set SPAN's float: left/right b) set SPAN's display:inline-block SO: it doesn't work within an
  • bullet list. 3) Surround the whole with a
    to make it work in
  • lists. 4) Use my css class .clear to get auto-clearing of floats/text.
    Also: I detect
  • followed by div.clear and suppress LF. =========================