Verwendung: Externe Links

Higo's Avatar

Higo

04 Mar, 2017 01:54 PM

Produkt: Tao Contao

Guten Tag,
Das Icon hinter externen Links wird in tao nicht automatisch angezeigt.
Sie haben in diesem Beitrag (http://help.rocksolidthemes.com/discussions/contao/15771-verwendung...) zwar eine Lösung angeboten, die auch funktioniert, in meinen Augen aber unbefriedigend ist.
Beim Schreiben eines Artikels muss man also, nachdem man einen Link eingefügt hat, in den Quelltext umschalten, um dann beim <a>-tag manuell "class="external-link"" einzutippen. Das ist nicht nur umständlich. Es ist vor allem html-unkundigen Redakteuren nicht zuzumuten und widerspricht auch dem Sinn eines CMS.
Ich habe deshalb in die tinymce.css die Klasse .external-link{} eingefügt. Im Editor steht nun unter Formate "external-link" zur Verfügung (so wie "drop-cap"). Der Link lässt sich auch damit auszeichnen. Das Ergebnis ist aber leider nicht <a class="external-link" href...., sondern <span class="external-link"><a href=...</a></span>. Und damit funktioniert es wieder nicht. Das Icon wird nicht angezeigt. Haben Sie keine bessere Lösung?
Beste Grüße

  1. 1 Posted by Higo on 04 Mar, 2017 03:12 PM

    Higo's Avatar

    Sorry, in meinem Beitrag oben ist ein Teil des Textes ungewollt zum Link und abgeschnitten worden. Hier noch einmal der entsprechende Absatz:

    Beim Schreiben eines Artikels muss man also, nachdem man einen Link eingefügt hat, in den Quelltext umschalten, um dann beim »a-tag« manuell »class="external-link"« einzutippen. Das ist nicht nur umständlich. Es ist vor allem html-unkundigen Redakteuren nicht zuzumuten und widerspricht auch dem Sinn eines CMS.

    Ich habe deshalb in die tinymce.css die Klasse ».external-link{}« eingefügt. Im Editor steht nun unter Formate »external-link« zur Verfügung (so wie »drop-cap«). Der Link lässt sich auch damit auszeichnen. Das Ergebnis ist aber leider nicht

    a class="external-link"..., sondern span class="external-link"......

    Und damit funktioniert es wieder nicht. Das Icon wird nicht angezeigt.

  2. Support Staff 2 Posted by RockSolid Theme... on 06 Mar, 2017 09:48 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wenn Sie möchten, dass alle Links die in einem neuen Fenster (target="_blank") geöffnet werden das Icon erhalten, können Sie folgenden CSS-Code in die Datei files/tao/css/custom.css einfügen:

    .main-content a[target=_blank]:after {
        font: 0.8125em/1 "RockSolid Icons";
        content: "\e151";
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        text-indent: 0;
        display: inline-block;
        position: relative;
        margin-left: 0.25em;
    }
    

    Alternativ können Sie mit folgendem CSS-Code das Icon auf für span-Tags mit der Klasse anzeigen lassen:

    span.external-link:after {
        font: 0.8125em/1 "RockSolid Icons";
        content: "\e151";
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        text-indent: 0;
        display: inline-block;
        position: relative;
        margin-left: 0.25em;
    }
    
  3. 3 Posted by Higo on 06 Mar, 2017 03:00 PM

    Higo's Avatar

    Vielen Dank für die schnelle Antwort. Es funktioniert prima. Allerdings sieht es besser aus, wenn man den Abstand dahinter und nicht davor definiert, also "margin-right" statt "margin-left". Wenn der Link mitten im Text ist, hat man sonst quasi ein Leerzeichen zwischen Link und Icon, aber zwischen Icon und dem folgenden Wort nicht mehr.
    Was jetzt noch nicht so schön ist: Das Icon wird natürlich auch erzeugt, wenn Bilder, z.B. Logos, mit externen Links versehen werden. Gibt es eine Klasse in der Art von "image-link", mit der man das Icon bei Bildern wieder ausschalten könnte?

  4. Support Staff 4 Posted by RockSolid Theme... on 06 Mar, 2017 03:38 PM

    RockSolid Themes's Avatar

    Mit folgendem CSS-Code können Sie das Icon für Bild-Links entfernen:

    .main-content .image_container a[target=_blank]:after {
        content: none;
    }
    
  5. 5 Posted by Higo on 06 Mar, 2017 06:08 PM

    Higo's Avatar

    Super! Problem gelöst! Besten Dank!

    Ein kleiner Hinweis an alle, die vielleicht einmal über dem gleichen Problem "brüten": Die Lösung - also kein Icon hinter Bild-Links - funktioniert nur bei Bildern, die per Inhaltselement vom Typ "Hyperlink" eingefügt werden, nicht, wenn das Bild im tinymce eingefügt und verlinkt wird.

  6. 6 Posted by steininger on 16 Nov, 2021 02:41 PM

    steininger's Avatar

    Vielleicht für manche auch eine Idee:

    // Zeile 401 in main.scss
    a {
        color: $link-color;
        text-decoration: none;
        &:hover, &:focus {
            text-decoration: underline;
        }
        &:hover, &:active {
            outline: 0;
        }
        &.external-link:after,
        &[href^="http://"]:not([href*="example.com"]):after ,
        &[href^="https://"]:not([href*="example.com"]):after {
            @include icon("\e151", em(13));
            margin-left: em(4);
        }
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac