Text wrap around pictures.

[JavierVelazquez]

Support

Hello all. Maybe this is a silly question but I can't get text to wrap around a picture. In the alignment options is either above, below and then no-wrap left or right. It is funny that when choosing the content type for text & image it says "Any number of images wrapped right around a regular text element." but wrapping is not possible. Am I missing something super obvious?

Any help greatly appreciated!!

[JavierVelazquez]

I am still trying to get wrapping to work through custom CSS but no luck so far. Chaining content objects wastes space and is, in my opinion ugly.

This is more what I am after:

Is going to be the largest repository of the Pilates method ever and the pages are getting way too long too quickly. www.pilatesart.eu/bc Any help or tips (or completely different approaches) are more than welcomed. Greets, Javier

[Moongazer]

Had the same problem, and solved it by extending the TypoScript for "textpic" CE:

tt_content.textpic {
    templateName.stdWrap.cObject {
        151 = TEXT
        151.value = TextpicRightInline
        152 = TEXT
        152.value = TextpicLeftInline
    }
} 

Than create a Textpic[Left|Right]Inline.html Template for the ContentElement, like:

    <div class="textpic textpic-item textpic-left">
        <f:render partial="Header/All" arguments="{_all}" />
        <div class="textpic-left-inline">
            <div class="textpic-text">
                <f:render partial="Media/Gallery" arguments="{_all}" />
            </div>
            <f:format.html>{data.bodytext}</f:format.html>
        </div>
    </div>

The rest is simple CSS.

[JavierVelazquez]

Thank you Moongazer! I have tried your solution, but I am afraid that I can't make it work (meaning "I" am missing something)

1. I added the lines: 151 = TEXT 151.value = TextpicRightInline 152 = TEXT 152.value = TextpicLeftInline

to the Texpic.typoscript file around line 2 (after: "126.value= TextpicCenteredLeft") Then created a TextpicLeftInLine.html in typo3conf/ext/bootstrap_package/resources/Private/Templates/ContentElements

with the following code:

{settings.responsiveimages.contentelements.textpic.centered_right}

{data.bodytext}

Nothing changes in the back end... no new choices. I also don't know where to add the CSS... I am a TYPO3 newbie... Any further help immensely appreciated Javier

[Moongazer]

1) Don't change the code inside the original extension, it will be lost after an update. Better is to copy the TypoScript into the setup of your backend template (or creating an own extension for it, but as newbie I'd recommend the easy way first).

2) Your template name has to match the TEXT value, so 152.value = TextpicLeftInline must be TextpicLeftInline.html. You can just make a copy of the original TextpicLeft.html file and rename it, save it in your templates/ folder specified in 3). Than change the HTML structure like in my first post (or how you want it).

3) Tell bootstrap_package where to look for your custom templates (copy this into constants of your backend template):

plugin.bootstrap_package_contentelements {
    view {
        layoutRootPath = fileadmin/templates/contentelements/layouts/
        partialRootPath = fileadmin/templates/contentelements/partials/
        templateRootPath = fileadmin/templates/contentelements/templates/
    }
}

4) load your CSS file (setup of backend template):

page.includeCSS.myContentElements = fileadmin/css/custom-contentelements.css

5) Adding the options to TCA in Configuration/TCA/Overrides/tt_content_columns.php (don't know how to do this without an own extension)

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'imageorient',
    [
        'Inline Text, floating Right',
        (string) 151,
        'content-mybootstrap-textpic-float-right' // this is an icon string, which you have to init in ext_localconf.php by $iconRegistry
    ],
    (string) 151,
    'after'
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'imageorient',
    [
        'Inline Text, floating Left',
        (string) 152,
        'content-mybootstrap-textpic-float-left'
    ],
    (string) 152,
    'after'
);

6) You might have to clean the T3 caches

[JavierVelazquez]

Thanks again Moongazer. I can't tell you how much I appreciate your help. I did as follows:

1. Added the following code to the Setup in the template for the site. tt_content.textpic { templateName.stdWrap.cObject { 151 = TEXT 151.value = TextpicRightInline 152 = TEXT 152.value = TextpicLeftInline } }

2. Then in the Constants for the site I added the following:

plugin.bootstrap_package_contentelements { view { layoutRootPath = fileadmin/templates/contentelements/layouts/ partialRootPath = fileadmin/templates/contentelements/partials/ templateRootPath = fileadmin/templates/contentelements/templates/ } }

3. I placed a TextpicLeftInline.html file in the directory above (fileadmin/templates/contentelements/templates/) with the code you gave me (for now :)

4 I did add the line page.includeCSS.myContentElements = fileadmin/css/custom-contentelements.css

to the setup and created the file custom-contentelements.css in that folder.

Nothing appears in the back end but I guess I have to add it through the css file, is that right? That is where I got stuck: I don't really know what to add so it "Left|Right in line" custom-contentelements.css appear in the back end as a choice somewhere... Or is the css file to style the display of the content in the front end? Typo3 is powerful but surely tough to learn. A million thanks for your input. Javier

[Moongazer]

Sure, you have to style the element inside your CSS! The custom template is essentially only placing the image content inside the text block so it can be wrapped/floated. Be aware that my solution is not the best if you add multiple images (gallery). But even for multiple images it might work with the right CSS styling. For single images you can use this (only left-image as example, add for right-image yourself):

.textpic-left-inline .gallery-row {
  display: block;
}
.textpic-left-inline .gallery-item {
  float: left;
  margin: 0 1rem 1rem 0;
  width: 50%;
}
@media (min-width: 576px) {
  .textpic-left-inline .gallery-item {
    width: 33%;
  }
}

I'd recommend to checkout some learning resources and ask for help in forums or Stackoverflow, as this issue tracker should not be the place for individual support.

[JavierVelazquez]

Hello Moongazer and thanks again, I did ask in Slack (and seached for previous posts) no one seems very interested, which I find a little weird since it is not such a strange request. I will ask again... maybe Benjamin will have it in his heart to add it to the extension. In the mean time, I am lost as to how to apply the "Inline" styling via the backend: in other words, what type of content element (I am guessing "Text & Image") one chooses and how to apply it. Where do I see the custom template in the back end? Thanks for the answer to that final question. Really thankful!! I will try now in stackoverflow... :-)

[Moongazer]

Oh sorry, I forgot to add the options to the TCA, so they can show up in the backend. I updated the post above, see point 5). Unfortunately I think you have to create your own extension, there are plenty of how-to's and tutorials out there. Still I'm not 100% sure if this is all now what I've done to solve this issue, its a while ago that I programmed it and now I just copied it together. But yes, these options should show up inside the config of the "Text & Image" content-element, beside where you can select the other image-above/below/left/right/whatever options.

[JavierVelazquez]

Hello Moongazer, I am so impressed by your help. I think I now get what needs to be done (which is a lot when you consider just wanting to get text to wrap around a picture, it seems like way too much code for such a simple task) and I obviously have a lot to learn. Yes, it does appear now in the back end. Thank you very much! But I can see how this will be broken when upgrading either Typo3 or the bootstrap extension and the need to make into another separate extension... Redesigning the site may just take less time!!! Again, thanks a lot. It is much clearer now.

[Moongazer]

You're welcome. Yes its not easy as beginner, but once you get into you will just love the flexibility. Also conciser to write your own extension where you can collect all kind of these custom content-elements and configuration of other extensions, so you can always re-use them for different projects by one click. Have fun

[JavierVelazquez]

Thank you! I have spent all weekend on it. I made it work the simple way then I started with the extension and so far I got some results. I don't know if you are on Slack but if you do and you have a minute free maybe you could look into https://typo3.slack.com/archives/C04CALXB9/p1568661339003400 and see if you have any ideas. I would really appreciate it! Thank you.

[hoelbing]

please fix this problem

[Hawkeye1909]

Hi! Just had the same problem as a customer wanted this functionality. Here is what I did in my sitepackage:

1. Edit tsconfig by adding: TCEFORM.tt_content.imageorient.removeItems := removeFromList(17,18) This keeps the options "In text, right" and "In text, left".
2. Add the following typoscript to set the templates:

   tt_content.textpic.templateName.stdWrap.cObject {
   17 = TEXT
   17.value = TextpicInlineRight
   18 = TEXT
   18.value = TextpicInlineLeft
   }
   tt_content.textmedia.templateName.stdWrap.cObject {
   17 = TEXT
   17.value = TextmediaInlineRight
   18 = TEXT
   18.value = TextmediaInlineLeft
   }

3. Add the templates. Here the code for TextpicInlineRight.html (for the others just use "left" instead of "right" or "textmedia" instead of "textpic"):

   
   <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
   <f:layout name="Default" />
   <f:section name="Header" />
   <f:section name="Main">
   
   <f:variable name="imageConfig">{settings.responsiveimages.contentelements.textpic.right}</f:variable>
   <bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{imageConfig.multiplier}" gutters="{imageConfig.gutters}" corrections="{imageConfig.corrections}" />
   <div class="textpic textpic-inline-right">
       <div class="textpic-item textpic-text">
           <f:render partial="Header/All" arguments="{_all}" />
           <div class="textpic-gallery">
               <f:render partial="Media/Gallery" arguments="{_all}" />
           </div>
           <f:format.html>{data.bodytext}</f:format.html>
       </div>
   </div>

</f:section>

4. Add styles in SCSS theme file:

.textmedia-inline-right, .textmedia-inline-left, .textpic-inline-right, .textpic-inline-left { .textmedia-gallery, .textpic-gallery { margin-bottom: 1rem; } } @include media-breakpoint-up('md') { .textmedia-inline-right, .textmedia-inline-left, .textpic-inline-right, .textpic-inline-left { .textmedia-gallery, .textpic-gallery { width: calc(50% - (#{$grid-gutter-width} / 2)); } } .textmedia-inline-right, .textpic-inline-right { .textmedia-gallery, .textpic-gallery { float: right; margin-left: #{$grid-gutter-width}; } } .textmedia-inline-left, .textpic-inline-left { .textmedia-gallery, .textpic-gallery { float: left; margin-right: #{$grid-gutter-width}; } } }

Maybe this will help others or it could be considered an addition to the core...