Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Old Boy
Posts: 1108
Joined: Fri 23. Nov 2012, 13:52

Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Old Boy » Tue 14. Feb 2017, 18:48

Ich habe gestern mal mit dem neuen ContentPart-Template Bootstrap.tmpl für den CP Text mit Bild experimentiert... sehr vielversprechend und nach einigen kleinen Änderungen ist das Ding sehr schön einsatzbar.

Leider ist es mir aber nicht gelungen, dem CP ein PopUp der Bilder abzuringen :(

Muss ich da ggf. noch etwas im Bereich der CSS oder in einer der Konfigurations-Dateien machen?

User avatar
Oliver Georgi
Site Admin
Posts: 9555
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Oliver Georgi » Tue 14. Feb 2017, 19:39

Musst Du doch nur einbauen:

Code: Select all

[ZOOM]<a href="img/cmsimage.php/1000x1000/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
    {IMAGE}
[ZOOM]</a>[/ZOOM]
Die Attribute rel, data bzw. class nur wenn benötigt bzw. wie auch immer Dein Lightbox-Trigger aussieht
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Old Boy
Posts: 1108
Joined: Fri 23. Nov 2012, 13:52

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Old Boy » Tue 14. Feb 2017, 20:05

Ahhhh, ja dann ist ja OK ... ich dachte, ich hätte was übersehen.

DANKE

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by update » Tue 28. Feb 2017, 15:56

Das habe ich jetzt mal probiert, aber ich bekomme kein klickbares zoombares Bild. Gibt es vielleicht ein komplettes Beispiel (zB für image float left...)?
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Oliver Georgi
Site Admin
Posts: 9555
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Oliver Georgi » Tue 28. Feb 2017, 16:01

zoom = 1
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by update » Tue 28. Feb 2017, 16:13

OK, danke, das war's :)
Und zusätzlich habe ich Dein obiges Codebeispiel um ein ">" ergänzt und jetzt geht's:
Oliver Georgi wrote: [ZOOM]<a href="img/cmsimage.php/1000x1000/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
{IMAGE}
[ZOOM]</a>[/ZOOM]
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Old Boy
Posts: 1108
Joined: Fri 23. Nov 2012, 13:52

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Old Boy » Tue 28. Feb 2017, 16:15

Ich hab mal einen Versuch mit allen möglichen Anordnungs-Varianten gemacht:
http://bootstrap-4.pepes-sandbox.de/text-mit-bild.html

Klappt alles ohne Probleme.

Als ich dann sah, dass auch die fancybox jetzt in der Version 3 vorliegt, hab ich auch das mal eingebunden,
nach dem Schnittmuster wie in Olivers GitHub Extended Bereich ... nur, dass ich den darin enthaltenen Ordner lib/fancybox von der neuen 3.0 Version verwendet habe...
http://fancyapps.com/fancybox/3/

Klappt auch, wie man sieht :-)

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by update » Tue 28. Feb 2017, 16:17

Pafeggd!
Jetzt muss ich nur noch mit den col-xs usw klarkommen...
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by update » Tue 28. Feb 2017, 16:31

Old Boy wrote:Ich hab mal einen Versuch mit allen möglichen Anordnungs-Varianten gemacht:
Genau das meine ich: Bild links und rechts IM Text switcht nicht auf 12 col...
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Old Boy
Posts: 1108
Joined: Fri 23. Nov 2012, 13:52

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Old Boy » Tue 28. Feb 2017, 16:35

Ist ja auch so nicht "programmiert"!!!! Wie sollte es dann???

Aber du hast ja deine phpwcms-Werkzeugkiste direkt neben dem Rollator stehen, also: Immer ran an die Paula!

Old Boy
Posts: 1108
Joined: Fri 23. Nov 2012, 13:52

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Old Boy » Tue 28. Feb 2017, 16:45

Andererseits... verwende doch dann lieber/schneller die Variante Tabelle, rechts/links!

Oder Klick auf das kleine Bild und du kannst auch alles in gross sehen, bei Bedarf.... es geht eben nicht Alles, zumindest nicht ohne viel Arbeit!
Aber meinst du ehrlich, den Besucher interessiert noch die Schönheit eines Layouts?
Die Zeiten sind unweigerlich vorbei, seit die iPhones das Rennen gemacht haben .
Heute geht alles nur noch mit dem "Kleinsten gemeinsamen Vielfachen", Layout braucht kein Mensch mehr.

Selbst ehrwürdige (?) Staats-Präsidenten kommunizieren heutzutage anscheinend nur noch über Twitter und beschränken sich auf 140 Zeichen für eine "Regierungserklärung"!
Vergiss ein ausgefeiltes "Läaut" einfach :lol:

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by update » Tue 28. Feb 2017, 17:05

In Ordnung! Made mei dei :lol:

Mann, das spart vielleicht. Ich geh mal den Rollator ölen... ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Old Boy
Posts: 1108
Joined: Fri 23. Nov 2012, 13:52

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Old Boy » Tue 28. Feb 2017, 17:10

Also mein "Legostein" zum Experimentieren sieht momentan so aus:

Code: Select all

<!--IMAGETEXT_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
class_top_left				= top-left
class_top_center			    = top-center
class_top_right				= top-right
class_bottom_left			= bottom-left
class_bottom_center			= bottom-center
class_bottom_right			= bottom-right
class_float_left			    = float-left
class_float_right			= float-right
class_column_left			= column-left
class_column_right			= column-right
class_column_left_image		= image-left
class_column_right_image    	= image-right
class_column_left_text		= text-left
class_column_right_text		= text-right
; width						= 550
; height					= 480
; zoom						= 1
; crop						= 1
; lightbox					= 1
; nocaption					= 0
<!--IMAGETEXT_SETTINGS_END//-->

[ATTR_CLASS]<div class="{ATTR_CLASS}"[ATTR_ID] id="{ATTR_ID}"[/ATTR_ID]>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]<div id="{ATTR_ID}">[/ATTR_ID][/ATTR_CLASS_ELSE]

    <div class="row image-text">
[TOP_LEFT]
        <!-- top left -->[IMAGE]
        <div class="col-xs-6 transparent-background">
            <figure class="img-responsive">[ZOOM]
                <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                    {IMAGE}[ZOOM]
                </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
        </div>[/IMAGE][TITLE]
        <div class="col-xs-12 transparent-background">
            <h3>{TITLE}</h3>[SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE]
            [TEXT]{TEXT}[/TEXT]
        </div>[/TITLE][TITLE_ELSE][SUBTITLE]
        <div class="col-xs-12 transparent-background">
            <h4>{SUBTITLE}</h4>
            [TEXT]{TEXT}[/TEXT]
        </div>[/SUBTITLE][SUBTITLE_ELSE][TEXT]
        <div class="col-xs-12 transparent-background">
            {TEXT}
        </div>[/TEXT][/SUBTITLE_ELSE][/TITLE_ELSE]
[/TOP_LEFT]

[TOP_CENTER]
        <!-- top center -->[IMAGE]
        <div class="col-xs-12 col-sm-6 offset-sm-3 transparent-background">
         <figure class="img-responsive">[ZOOM]
             <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                 {IMAGE}[ZOOM]
             </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
</div>[/IMAGE][TITLE]
<div class="col-xs-12 transparent-background">
    <h3>{TITLE}</h3>[SUBTITLE]
    <h4>{SUBTITLE}</h4>[/SUBTITLE]
    [TEXT]{TEXT}[/TEXT]
</div>[/TITLE][TITLE_ELSE][SUBTITLE]
<div class="col-xs-12 transparent-background">
    <h4>{SUBTITLE}</h4>
    [TEXT]{TEXT}[/TEXT]
</div>[/SUBTITLE][SUBTITLE_ELSE][TEXT]
<div class="col-xs-12 transparent-background">
    {TEXT}
</div>[/TEXT][/SUBTITLE_ELSE][/TITLE_ELSE]
[/TOP_CENTER]

[TOP_RIGHT]
        <!-- top right -->[IMAGE]
        <div class="col-xs-12 col-sm-6 offset-sm-6 transparent-background">
         <figure class="img-responsive">[ZOOM]
             <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                 {IMAGE}[ZOOM]
             </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
</div>[/IMAGE][TITLE]
<div class="col-xs-12 transparent-background">
    <h3>{TITLE}</h3>[SUBTITLE]
    <h4>{SUBTITLE}</h4>[/SUBTITLE]
    [TEXT]{TEXT}[/TEXT]
</div>[/TITLE][TITLE_ELSE][SUBTITLE]
<div class="col-xs-12 transparent-background">
    <h4>{SUBTITLE}</h4>
    [TEXT]{TEXT}[/TEXT]
</div>[/SUBTITLE][SUBTITLE_ELSE][TEXT]
<div class="col-xs-12 transparent-background">
    {TEXT}
</div>[/TEXT][/SUBTITLE_ELSE][/TITLE_ELSE]
[/TOP_RIGHT]

[BOTTOM_LEFT]
        <!-- bottom left -->[TITLE]
        <div class="col-xs-12 transparent-background">
            <h3>{TITLE}</h3>[SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE]
            [TEXT]{TEXT}[/TEXT]
        </div>[/TITLE][TITLE_ELSE][SUBTITLE]
        <div class="col-xs-12 transparent-background">
            <h4>{SUBTITLE}</h4>
            [TEXT]{TEXT}[/TEXT]    
        </div>[/SUBTITLE][SUBTITLE_ELSE][TEXT]
        <div class="col-xs-12 transparent-background">
            {TEXT}
        </div>[/TEXT][/SUBTITLE_ELSE][/TITLE_ELSE][IMAGE]
        <div class="col-xs-6 transparent-background">
          <figure class="img-responsive">[ZOOM]
              <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                  {IMAGE}[ZOOM]
              </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
        </div>[/IMAGE]
[/BOTTOM_LEFT]

[BOTTOM_CENTER]
        <!-- bottom center -->[TITLE]
        <div class="col-xs-12 transparent-background">
            <h3>{TITLE}</h3>[SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE]
            [TEXT]{TEXT}[/TEXT]
        </div>[/TITLE][TITLE_ELSE][SUBTITLE]
        <div class="col-xs-12 transparent-background">
            <h4>{SUBTITLE}</h4>
            [TEXT]{TEXT}[/TEXT]    
        </div>[/SUBTITLE][SUBTITLE_ELSE][TEXT]
        <div class="col-xs-12 transparent-background">
            {TEXT}
        </div>[/TEXT][/SUBTITLE_ELSE][/TITLE_ELSE][IMAGE]
        <div class="col-xs-12 col-sm-6 offset-sm-3 transparent-background">
            <figure class="img-responsive">[ZOOM]
                <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                    {IMAGE}[ZOOM]
                </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
        </div>[/IMAGE]
[/BOTTOM_CENTER]

[BOTTOM_RIGHT]
        <!-- bottom right -->[TITLE]
        <div class="col-xs-12 transparent-background">
            <h3>{TITLE}</h3>[SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE]
            [TEXT]{TEXT}[/TEXT]
        </div>[/TITLE][TITLE_ELSE][SUBTITLE]
        <div class="col-xs-12 transparent-background">
            <h4>{SUBTITLE}</h4>
            [TEXT]{TEXT}[/TEXT]    
        </div>[/SUBTITLE][SUBTITLE_ELSE][TEXT]
        <div class="col-xs-12 transparent-background">
            {TEXT}
        </div>[/TEXT][/SUBTITLE_ELSE][/TITLE_ELSE][IMAGE]
        <div class="col-sm-6 offset-sm-6 transparent-background">
             <figure class="img-responsive">[ZOOM]
                 <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                     {IMAGE}[ZOOM]
                 </a>[/ZOOM][CAPTION]
                 <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                 </figcaption>[/CAPTION]
            </figure>
        </div>[/IMAGE]
[/BOTTOM_RIGHT]

[FLOAT_LEFT]
        <!-- float left -->
        <div class="col-xs-12 transparent-background">[IMAGE]
            <figure class="img-pull-left img-responsive">[ZOOM]
                <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                    {IMAGE}[ZOOM]
                </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>[/IMAGE][TITLE]
            <h3>{TITLE}</h3>[/TITLE][SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
            {TEXT}[/TEXT]
        </div>
[/FLOAT_LEFT]
[FLOAT_RIGHT]
        <!-- float right -->
        <div class="col-xs-12 transparent-background">[IMAGE]
            <figure class="img-pull-right img-responsive">[ZOOM]
                <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                    {IMAGE}[ZOOM]
                 </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>[/IMAGE][TITLE]
            <h3>{TITLE}</h3>[/TITLE][SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
            {TEXT}[/TEXT]
        </div>
[/FLOAT_RIGHT]

[COLUMN_LEFT]
        <!-- column left -->[IMAGE]
        <div class="col-sm-6 transparent-background">
            <figure class="align-left img-responsive">[ZOOM]
                <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                    {IMAGE}[ZOOM]
                </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
        </div>
        <div class="col-sm-6 transparent-background">[TITLE]
            <h3>{TITLE}</h3>[/TITLE][SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
            {TEXT}[/TEXT]
        </div>[/IMAGE][IMAGE_ELSE]
        <div class="col-sm-6 offset-sm-6 transparent-background">[TITLE]
            <h3>{TITLE}</h3>[/TITLE][SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
            {TEXT}[/TEXT]
        </div>[/IMAGE_ELSE]
[/COLUMN_LEFT]
[COLUMN_RIGHT]
        <!-- column right -->[IMAGE]
        <div class="col-sm-6 push-sm-6 transparent-background">
            <figure class="align-right img-responsive">[ZOOM]
                <a href="img/cmsimage.php/960x960/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" data-fancybox="gallery" class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][CAPTION] title="{CAPTION}"[/CAPTION][/IMAGE_TITLE_ELSE]>[/ZOOM]
                    {IMAGE}[ZOOM]
                </a>[/ZOOM][CAPTION]
                <figcaption>
                    <span class="f-caption">{CAPTION}</span>[COPYRIGHT]<span class="f-copyright"> &copy;&nbsp;{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
        </div>
        <div class="col-sm-6 pull-sm-6 transparent-background">[TITLE]
            <h3>{TITLE}</h3>[/TITLE][SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
            {TEXT}[/TEXT]
        </div>[/IMAGE][IMAGE_ELSE]
        <div class="col-sm-6 transparent-background">[TITLE]
            <h3>{TITLE}</h3>[/TITLE][SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE][TEXT]
            {TEXT}[/TEXT]
        </div>[/IMAGE_ELSE]
[/COLUMN_RIGHT]
    </div>

[ATTR_CLASS]</div>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]</div>[/ATTR_ID][/ATTR_CLASS_ELSE]
<!-- C--SS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css -->
<!-- CSS: /* 1. Put this inside of your CSS file. 2. Remove it from the template! */
        .image-text [class*="col-"].transparent-background { background-color: transparent; }
        
        figure.img-responsive img { display: block; max-width: 100%; height: auto; border: none; }
        
        .image-text .img-pull-right { float: right; max-width: 35%; margin-left: 30px; }
        .image-text .img-pull-left  { float: left;  max-width: 35%; margin-right: 30px; }        
        
        figcaption   { font-size: 11px; margin-top:5px; }
        .f-caption   { color: #369; }
        .f-copyright { color: #777; }
-->
           

photojo
Posts: 679
Joined: Wed 15. Nov 2006, 20:02
Contact:

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by photojo » Fri 5. May 2017, 19:06

**I have this in the template**

Code: Select all

[TITLE]
       <div class="col-xs-12">
            <h3>{TITLE}</h3>[SUBTITLE]
            <h4>{SUBTITLE}</h4>[/SUBTITLE]
         </div>[/TITLE][TITLE_ELSE][SUBTITLE]
        <div class="col-xs-12">
            <h4>{SUBTITLE}</h4>
         </div>[/SUBTITLE][/TITLE_ELSE][IMAGE]
        <div class="col-xs-12 col-md-12">
            <figure class="img-responsive">
                     [ZOOM]<a href="img/cmsimage.php/1000x1000/{IMAGE_HASH}.{IMAGE_EXT}" rel="lightbox" data-do="zoom" 
               class="zoom-image"[IMAGE_TITLE] title="{IMAGE_TITLE}"[/IMAGE_TITLE][IMAGE_TITLE_ELSE][/IMAGE_TITLE_ELSE] > [/ZOOM]
{IMAGE}
[ZOOM]</a>[/ZOOM]
           [CAPTION]
                <figcaption>
                  <div class="image-caption">{CAPTION}  </div>[COPYRIGHT], <span class="copyright">{COPYRIGHT}</span>[/COPYRIGHT]
                </figcaption>[/CAPTION]
            </figure>
         </div>[/IMAGE][TEXT]
        <div class="col-xs-12">
          {TEXT}
         </div>[/TEXT]
Everthing works fine, if "Vorschaubilder ohne Bildunterzeile" is DISABLED. But, if it is ENABLED, the link contains the image AND the text ({TEXT})

**Here is the resulting source-code:**

Code: Select all

 <a href="img/cmsimage.php/1000x1000/119fa78dec46e43e3c4b64b889e4c211.jpg" rel="lightbox" data-do="zoom" class="zoom-image" > 
<i m g src="img/cmsimage.php/1200x800x0/119fa78dec46e43e3c4b64b889e4c211.jpg" alt="
**broken end of link**</a>
       
            </figure>
         </div>
        <div class="col-xs-12" style="border: 1px solid red;">
           <p>TEXT aus BE</p>
<p>text text ... text</p>

User avatar
Oliver Georgi
Site Admin
Posts: 9555
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Text mit Bild: Bootstrap.tmpl = kein PopUp möglich?

Post by Oliver Georgi » Fri 5. May 2017, 19:43

Du nutzt veraltete Version, ist schon ewig behoben.
Bildschirmfoto 2017-05-05 um 19.40.39.png
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Post Reply