Login / Status
developer.Resource
Home . Extensions . Repository
Sponsors
hosted by punkt.deTYPO3 and Open Source MagazineAOE Media

Extension Repository

The official extension repository only consists of freely available extensions. New documentation is rendered once a day.

New and updated
Popular
Full list
Search

CSS styled IMGTEXT


InfoRatingsFeedback


  • Icon
    cron_cssstyledimgtext
    Title
    CSS styled IMGTEXT
    Extension key
    ( cron_cssstyledimgtext )
    State
    beta, Not reviewed!
    Author
    Ernesto Baschny
    Category
    fe
    Version
    0.4.1
    Manual
    Read online
    Downloads (total / this version)
    7405 / 6341
    Rating
    none
    Updated
    13.10.2005
    Upload comment
    Fixed typo in the defaultRenderMethod constant (value a, should be dl) in 0.4.0 release . Ups!
    Description
    CSS based implementation of the "Text with Image" and "Image" content types (from tt_content).
  • Dependencies
    • depends on typo3 0.0.2-0.0.2
    • depends on php 0.0.2-0.0.2
    • depends on cms
    • depends on css_styled_content
    Reverse dependencies

    The following extension versions depend on this extension:

    Version history
      Download extension

      Download compressed extension .T3X file

    • Filename Size View Date Download
      class.ux_tslib_content.php 4.9 K View 08.09.2005 Download
      ext_conf_template.txt 231 View 12.10.2005 Download
      ext_icon.gif 177 View 08.09.2005 Download
      ext_localconf.php 470 View 12.10.2005 Download
      ext_tables.php 2.3 K View 08.09.2005 Download
      ext_tables.sql 284 View 08.09.2005 Download
      locallang_db.php 1.7 K View 08.09.2005 Download
      doc/manual.sxw 495 K 13.10.2005 Download
      pi1/class.tx_croncssstyledimgtext_pi1.php 22 K View 12.10.2005 Download
      static/constants.txt 4.4 K View 13.10.2005 Download
      static/setup.txt 8.4 K View 12.10.2005 Download
      Preview for file cron_cssstyledimgtext-0.4.1-static__setup__txt:
      

      # We reference these later, so that they are more easily customizable:

      lib.imgtextrendering {
          dl {
            imageRowStdWrap.wrap = <div class="csi-imagerow" style="width:{register:rowwidth}px;"> | </div>
            imageRowStdWrap.insertData = 1
            noRowsStdWrap.wrap = 
            oneImageStdWrap.wrap = <dl class="csi-image" style="width:{register:imagewidth}px;"> | </dl>
            oneImageStdWrap.insertData = 1
            imgTagStdWrap.wrap = <dt> | </dt>
            editIconsStdWrap.wrap = <dd> | </dd>
            captionStdWrap.wrap = <dd class="csi-caption"> | </dd>
          }
          ul {
            imageRowStdWrap.wrap = <div class="csi-imagerow" style="width:{register:rowwidth}px;"><ul> | </ul></div>
            imageRowStdWrap.insertData = 1
            noRowsStdWrap.wrap = <ul> | </ul>
            oneImageStdWrap.wrap = <li class="csi-image" style="width:{register:imagewidth}px;"> | </li>
            oneImageStdWrap.insertData = 1
            imgTagStdWrap.wrap = 
            editIconsStdWrap.wrap = <div> | </div>
            captionStdWrap.wrap = <div class="csi-caption"> | </div>
          }
          div {
            imageRowStdWrap.wrap = <div class="csi-imagerow" style="width:{register:rowwidth}px;"> | </div>
            imageRowStdWrap.insertData = 1
            noRowsStdWrap.wrap = 
            oneImageStdWrap.wrap = <div class="csi-image" style="width:{register:imagewidth}px;"> | </div>
            oneImageStdWrap.insertData = 1
            imgTagStdWrap.wrap = <div> | </div>
            editIconsStdWrap.wrap = <div> | </div>
            captionStdWrap.wrap = <div class="csi-caption"> | </div>
          }
      }

      # alt and title from extra field

      temp.cron_cssstyledimgtext {
        altText = TEXT
        altText.field = tx_croncssstyledimgtext_altText
        altText.split = {$styles.content.imgtext.alttextSplit}
        altText.split.cObject = TEXT
        altText.split.cObject.field = tx_croncssstyledimgtext_altText
        altText.split.token = {$styles.content.imgtext.alttextSplitToken}

        titleText = TEXT
        titleText.field = tx_croncssstyledimgtext_titleText
        titleText.split = {$styles.content.imgtext.alttextSplit}
        titleText.split.cObject = TEXT
        titleText.split.cObject.field = tx_croncssstyledimgtext_titleText
        titleText.split.token = {$styles.content.imgtext.alttextSplitToken}

        # not working yet, need to integrate with showpic.php
        longText = TEXT
        longText.field = tx_croncssstyledimgtext_longText
        longText.split = {$styles.content.imgtext.alttextSplit}
        longText.split.cObject = TEXT
        longText.split.cObject.field = tx_croncssstyledimgtext_longText
        longText.split.token = {$styles.content.imgtext.alttextSplitToken}
      }

      # also use the alt/title fields for the IMAGE cObject:
      tt_content.image.20.altText < tt_content.textpic.20.altText
      tt_content.image.20.titleText < tt_content.textpic.20.titleText

      includeLibs.tx_croncssstyledimgtext_pi1 = EXT:cron_cssstyledimgtext/pi1/class.tx_croncssstyledimgtext_pi1.php

      tt_content.textpic.20 < tt_content.image.20
      tt_content.textpic.20 = USER
      tt_content.textpic.20 {
        userFunc = tx_croncssstyledimgtext_pi1->render_textpic
        captionSplit.stdWrap.wrapAlign >
        caption.1.wrapAlign >
        captionSplit = 1
        captionAlign.field = imagecaption_position
        defaultW = {$styles.content.imgtext.defaultW}
        defaultWInText = {$styles.content.imgtext.defaultWInText}
        borderSpace = {$styles.content.imgtext.borderSpace}
        separateRows = {$styles.content.imgtext.separateRows}
        addClasses = 
        rendering < lib.imgtextrendering
        renderMethod = TEXT
        renderMethod.field = tx_croncssstyledimgtext_renderMethod
        defaultRenderMethod = {$styles.content.imgtext.defaultRenderMethod}
        1 {
          params >
          imageLinkWrap {
            bodyTag = <body style="margin:0; background:#fff;">
            JSwindow.expand = 
          }
          altText < temp.cron_cssstyledimgtext.altText
          titleText < temp.cron_cssstyledimgtext.titleText
          longText < temp.cron_cssstyledimgtext.longText
          emptyTitleHandling = {$styles.content.imgtext.emptyTitleHandling}
          titleInLink = {$styles.content.imgtext.titleInLink}
          titleInLinkAndImg = {$styles.content.imgtext.titleInLinkAndImg}
        }
        text.10 = COA
        text.10 {
          if.value = 24
          if.isGreaterThan.field = imageorient
          10 = < lib.stdheader
          10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
        }
        text.20 = < tt_content.text.20
      }

      tt_content.image.20 < tt_content.textpic.20
      tt_content.image.20.text >

      plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE (
      /*
       * css-styled-imgtext
       */
      /*
        Licensed under the GPL, see http://www.gnu.org/copyleft/gpl.html
        (c) the TYPO3 content rendering group
        (c) Ernesto Baschny (ernst@cron-it.de)
      */

      /* Captions */
      P.csc-caption { margin: 0; }
      P.csc-caption {
        font-size: 80%; /* Customize me */
      }
      DIV.csi-caption-c .csi-caption { text-align: center; }
      DIV.csi-caption-r .csi-caption { text-align: right; }
      DIV.csi-caption-l .csi-caption { text-align: left; }

      /* Needed for noRows setting */
      DIV.csi-textpic DIV.csi-imagecolumn { float: left; display: inline; }

      /* Border just around the image */
      {$styles.content.imgtext.borderSelector} {
        border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
        padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
      }

      DIV.csi-imagewrap { padding: 0; }

      DIV.csi-textpic IMG { border: none; }

      /* DIV: This will place the images side by side */
      DIV.csi-textpic DIV.csi-imagewrap DIV.csi-image { float: left; }

      /* UL: This will place the images side by side */
      DIV.csi-textpic DIV.csi-imagewrap UL { list-style: none; margin: 0; padding: 0; }
      DIV.csi-textpic DIV.csi-imagewrap UL LI { float: left; margin: 0; padding: 0; }

      /* DL: This will place the images side by side */
      DIV.csi-textpic DIV.csi-imagewrap DL.csi-image { float: left; }
      DIV.csi-textpic DIV.csi-imagewrap DL.csi-image DT { float: none; }
      DIV.csi-textpic DIV.csi-imagewrap DL.csi-image DD { float: none; }
      DIV.csi-textpic DIV.csi-imagewrap DL.csi-image DD IMG { border: none; } /* FE-Editing Icons */
      DL.csi-image { margin: 0; }
      DL.csi-image DT { margin: 0; display: inline; }
      DL.csi-image DD { margin: 0; }

      /* Clearer */
      DIV.csi-clear { clear: both; }

      /* Margins around images: */

      /* Pictures on left, add padding on right */
      DIV.csi-left DIV.csi-imagewrap .csi-image,
      DIV.csi-intext-left-nowrap DIV.csi-imagewrap .csi-image,
      DIV.csi-intext-left DIV.csi-imagewrap .csi-image {
        display: inline; /* IE fix for double-margin bug */
        margin-right: {$styles.content.imgtext.colSpace}px;
      }

      /* Pictures on right, add padding on left */
      DIV.csi-right DIV.csi-imagewrap .csi-image,
      DIV.csi-intext-right-nowrap DIV.csi-imagewrap .csi-image,
      DIV.csi-intext-right DIV.csi-imagewrap .csi-image {
        display: inline; /* IE fix for double-margin bug */
        margin-left: {$styles.content.imgtext.colSpace}px;
      }

      /* Pictures centered, add padding left and right */
      DIV.csi-center DIV.csi-imagewrap .csi-image {
        display: inline; /* IE fix for double-margin bug */
        margin-left: {$styles.content.imgtext.colSpaceHalf}px;
        margin-right: {$styles.content.imgtext.colSpaceHalf}px;
      }
      DIV.csi-textpic DIV.csi-imagewrap .csi-image .csi-caption { margin: 0; }
      DIV.csi-textpic DIV.csi-imagewrap .csi-image IMG { margin: 0; }

      /* Space below each image (also in-between rows) */
      DIV.csi-textpic DIV.csi-imagewrap .csi-image { margin-bottom: 5px; }
      DIV.csi-equalheight DIV.csi-imagerow { margin-bottom: 5px; display: block; }

      /* Positioning of images: */

      /* Above */
      DIV.csi-above DIV.csi-text { clear: both; }

      /* Center (above or below) */
      DIV.csi-center { text-align: center; /* IE-hack */ }
      DIV.csi-center DIV.csi-imagewrap { margin: 0 auto; }
      DIV.csi-center DIV.csi-imagewrap .csi-image { text-align: left; /* Remove IE-hack */ }
      DIV.csi-center DIV.csi-text { text-align: left; /* Remove IE-hack */ }

      /* Right (above or below) */
      DIV.csi-right DIV.csi-imagewrap { float: right; }
      DIV.csi-right DIV.csi-text { clear: right; }

      /* Left (above or below) */
      DIV.csi-left DIV.csi-imagewrap { float: left; }
      DIV.csi-left DIV.csi-text { clear: left; }

      /* Left (in text) */
      DIV.csi-intext-left DIV.csi-imagewrap { float: left; }

      /* Right (in text) */
      DIV.csi-intext-right DIV.csi-imagewrap { float: right; }

      /* Right (in text, no wrap around) */
      DIV.csi-intext-right-nowrap DIV.csi-imagewrap { float: right; clear: both; }
      /* Hide from IE5-mac. Only IE-win sees this. \*/
      * html DIV.csi-intext-right-nowrap .csi-text { height: 1%; }
      /* End hide from IE5/mac */ 

      /* Left (in text, no wrap around) */
      DIV.csi-intext-left-nowrap DIV.csi-imagewrap { float: left; clear: both; }
      /* Hide from IE5-mac. Only IE-win sees this. \*/
      * html DIV.csi-intext-left-nowrap .csi-text { height: 1%; }
      /* End hide from IE5/mac */
      )