Abgerundete Ecken

press

Hallo miteinander,

das Thema ist bisher auch schon angesprochen, bloß habe ich leider bisher nichts passendes gefunden, darum wende ich mich hoffnungsvoll an euch.

Ich möchte automatisch um alle Bilder bzw. Fotos, die ich in Wordpress hochlade abgerundete Ecken haben. Ich weiß, dass man es in PS einfach verändern könnte, aber das möchte ich nicht.

Am beste wäre es, wenn man aus den Bildern ein Hintergrundbild machen könnte. Es soll eine automatische Funktion geben, die das macht, dass hab ich hier gefunden:

http://www.webdesignerwall.com/tutorials/css3…ge-with-jquery/

Und zwar sollte es mit dieser Funktion irgendwie möglich sein:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});

});
</script>
Ich kenne mich leider nur in CSS aus, darum wollte ich euch fragen, wie genau übertrage ich das jetzt auf WP?

Über jede Antwort und Hilfe wäre ich euch wirklich sehr dankbar.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bego

Zum einen könntest Du das mit Hilfe von CSS erreichen:

Code

img {
width: 300px;
height: 100px;
padding: 20px;
border:3px solid #ccc;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
background: #fff;}

Siehe "Tricks und Tipps: Rahmen mit abgerundeten Ecken"

Was Deine jQuery-Funktion angeht:

in die functions.php setzt Du

PHP

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
   wp_enqueue_script('jquery');
}

um jQuery einzubinden. Anschließend setzt Du deine jQuery-Funktion in den Header:

PHP

<script type="text/javascript">
jQuery(document).ready(function($){  
 
 $("a").click(function(event){ alert("Hallo!"); });//hier Deine Funktion


});
</script>

press

Vielen Dank für die schnelle Antwort bego.

Das mit CSS war mir bekannt, allerdings ist da nur der Rahmen außenrum abgerundet, nicht jedoch das Bild bzw. Foto an sich. Dazu müsste es wohl ein Hintergrundbild sein.

Ich habe die zweite Möglichkeit gerade ausprobiert, wenn ich meine Funktion so wie sie ist in den Header einsetze, verändern sich die Bilder nicht, ich befürchte ich spreche nicht die img nicht richtig mit meiner Funktion an.

Ansonsten könnte man den Effekt ja noch mit divs erreichen, übereinander geleget

Code

#paket {   
    position:absolute;
    left:30px;
    top:30px;
    width:320px;
    height:420px;
}
#rahmen {
    position:absolute;
    left:0px;
    top:0px;
    width:320px;
    height:420px;
    background-image: url(rahmen.png);
    z-index:2;
}
#bild {
    position:absolute;
    left:10px;
    top:10px;
    width:300px;
    height:400px;
    z-index:1;

Alles anzeigen

Allerdings weiß ich hierbei nicht, wo ich das img in Wordpress finde, um die divs darüberzulegen.

Oder wie kann man ein span um die img legen?

Entschuldigt bitte meine Unwissenheit, über einen Rat wäre ich sehr dankbar.

bego

Zitat von press

Das mit CSS war mir bekannt, allerdings ist da nur der Rahmen außenrum abgerundet, nicht jedoch das Bild bzw. Foto an sich. Dazu müsste es wohl ein Hintergrundbild sein.

Ups, da hab ich wohl was falsch verstanden.

Zitat

Ich habe die zweite Möglichkeit gerade ausprobiert, wenn ich meine Funktion so wie sie ist in den Header einsetze, verändern sich die Bilder nicht, ich befürchte ich spreche nicht die img nicht richtig mit meiner Funktion an.

Änderung in der [FONT=Courier New]functions.php[/FONT] vorgenommen? jQuery-Aufruf geändert?

Code

[COLOR=#000000][COLOR=#0000BB]jQuery[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]document[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000BB]ready[/COLOR][COLOR=#007700](function($){...[/COLOR][/COLOR]

statt

Code

[COLOR=#000000][COLOR=#0000BB]$[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]document[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000BB]ready[/COLOR][COLOR=#007700](function($){[/COLOR][/COLOR]

?

Zitat

...
Oder wie kann man ein span um die img legen?

jQuery wäre da tatsächlich eine Möglichkeit.
Versuch doch erst mal, jQuery generell einzubinden und dann z.B. ein einfaches alert() auszugeben (um zu testen, ob die Einbindung klappt).

press

Zitat

Versuch doch erst mal, jQuery generell einzubinden und dann z.B. ein einfaches alert() auszugeben (um zu testen, ob die Einbindung klappt).

das "Hallo!" bei alert wird ausgegeben. Ich hab die Funktion:

Code

<script type="text/javascript">
jQuery(document).ready(function($){  


  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });


});
</script>

Alles anzeigen

so eingefügt, aber es tut sich nichts.

maxe

Wenn du die jquery von WP nutzt, dann alle "$" durch "jQuery" ersetzen:

Code

<script type="text/javascript">
[COLOR=Red]jQuery[/COLOR](document).ready(function(){


  [COLOR=Red]jQuery[/COLOR](".rounded-img, .rounded-img2").load(function() {
    [COLOR=Red]jQuery[/COLOR](this).wrap(function(){
      return '<span class="' + [COLOR=Red]jQuery[/COLOR](this).attr('class') + '" style="background:url(' + [COLOR=Red]jQuery[/COLOR](this).attr('src') + ') no-repeat center center; width: ' + [COLOR=Red]jQuery[/COLOR](this).width() + 'px; height: ' + [COLOR=Red]jQuery[/COLOR](this).height() + 'px;" />';
    });
   [COLOR=Red] jQuery[/COLOR](this).css("opacity","0");
  });


});
</script>

Alles anzeigen

Und hast du den Bildern im Artikel die Classen .rounded-img oder .rounded-img2 gegeben?

press

vielen Dank für die Antwort maxe, leider funktioniert es immer noch nicht.

Es liegt nicht an meinem Theme, ich habe es dann noch mit Default 1.7.2 und Plainscape 1.0.3 ausprobiert und es mit Firefox 3.6.8 und im Safari 4.0.3 getestet. Bei Plainscape hab ich zusätzlich alles unnötige in der style.css gelöscht.

So bin ich vorgegangen:
Ich hab in die functions.php:

PHP

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
   wp_enqueue_script('jquery');
}

eingefügt.

dann hab ich in den header.php zum testen die funktion:

PHP

<script type="text/javascript">
jQuery(document).ready(function($){  
 
 $("a").click(function(event){ alert("Hallo!"); });//hier Deine Funktion


});
</script>

eingefügt. Das hat funktioniert, genauso als ich es

PHP

<script type="text/javascript">
jQuery(document).ready(function($){  
 
 jQuery("a").click(function(event){ alert("Hallo!"); });//hier Deine Funktion


});
</script>

in diese Funktion abgeändert hatte. Auch hier wurde mir genauso das "Hallo!" beim Klicken ausgegeben.

Dann hab diese Funktion durch:

PHP

<script type="text/javascript">
jQuery(document).ready(function(){


  jQuery(".rounded-img, .rounded-img2").load(function() {
    jQuery(this).wrap(function(){
      return '<span class="' + jQuery(this).attr('class') + '" style="background:url(' + jQuery(this).attr('src') + ') no-repeat center center; width: ' + jQuery(this).width() + 'px; height: ' + jQuery(this).height() + 'px;" />';
    });
    jQuery(this).css("opacity","0");
  });


});
</script>

Alles anzeigen

diese ersetzt.

Dann habe ich ein Testbild über das Icon in den Artikel eingefügt. Dann bin ich zur html-Ansicht und habe z.B. so die Klasse aufgerufen:

HTML

<a  href="http://testecken.co.de/wp-content/uploads/2010/08/test2.jpg"><img  class="rounded-img alignnone size-medium wp-image-7" title="test2"  src="http://testecken.co.de/wp-content/uploads/2010/08/test2-300x199.jpg"  alt="" width="300" height="199" /></a>

[FONT=Arial][size=14]

[/SIZE][/FONT]In meiner style.css steht folgendes:

Code

.rounded-img { 
border:10px;
border-width:30px;
border-style:solid;
border-color:black;
-moz-border-radius-topleft: 13px;
-moz-border-radius-topright: 13px;
-moz-border-radius-bottomright: 13px;
-moz-border-radius-bottomleft: 13px;
-webkit-border-top-left-radius: 13px;
-webkit-border-top-right-radius: 13px;
-webkit-border-bottom-left-radius: 13px;
-webkit-border-bottom-right-radius: 13px;}

Alles anzeigen

[FONT=Arial][size=14]
[/SIZE][/FONT]Das Problem: Der Rahmen wird abgerundet angezeigt, jedoch sind die Ecken vom Bild immer noch eckig und nicht abgerundet, ich nehme an, das Bild liegt immer noch im Vordergrund. Ich habs dann vorsichtshalber nochmal mit [COLOR=DarkRed]$[/COLOR] anstatt [COLOR=DarkRed]jQuery [/COLOR]versucht, das änderte jedoch auch nichts an dem Problem.

Ich habs zum Testen mit dem Theme Plainscape auf:

http://testecken.co.de/?page_id=4

Irgendetwas mache ich falsch, ich würde mich freuen, wenn mir jemand dabei helfen könnte.

gericoach

versuche mal das hier, ist auch easy im Handling:
http://www.webdesignerwall.com/tutorials/css3…ge-with-jquery/

press

Zitat

versuche mal das hier, ist auch easy im Handling:
http://www.webdesignerwall.com/tutor...e-with-jquery/

danke dir, aber daher hab ich ja den Code ;), siehe ganz oben. Hast du das schon erfolgreich ausprobiert?

gericoach

yo, sehe ich auch gerade, war nur drübergeflogen...aber wieso kriegst Du es dann nicht integriert? Ist doch feinst erklärt.

maxe

okay, hab mir deine Testseite angeschaut und sehe keinen span ums Bild rum, was aber durchs jQuery angelegt werden sollte. Auch wurde dem Bild die Formatierung opacity:0 nicht übertragen. Dann teste jetzt mal bitte den Code komplett nur mit $

Code

<script type="text/javascript">
$(document).ready(function(){


  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });


});
</script>

Alles anzeigen

Probier's mal so ... aber die Frage ist sowieso, warum nimmst du eine externe jQuery wenn doch WP schon eine mitbringt?

press

Zitat

Probier's mal so ... aber die Frage ist sowieso, warum nimmst du eine externe jQuery wenn doch WP schon eine mitbringt?

Meinst du die unter: wp-includes/js/jquery/ ? Wenn ja, welche?
Ich hab den Forumsbeitrag http://forum.wordpress-deutschland.org/konfiguration/…e-template.html gelesen und gemerkt, 5d´ler hat ein ähnliches Problem wie ich.

Das:

PHP

$("a").click(function(event){ alert("Hallo!"); });//hier Deine Funktion

funktioniert bei mir bei allen Einbindungsarten.

Diese Einbindungsart funktioniert:

PHP

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

mehr schlecht als recht, wenn ich die Seite mehrmals hintereinander lade, kann es vorkommen, dass es klappt. Alle anderen Einbindungsarten funktionieren, wenn überhaupt sehr viel schlechter. Das heißt jQuery wird nicht immer geladen, sondern anscheindend nur hin und wieder?

So nun kommt das wirklich suspekte:
Diese Einbindungsart hab ich getestet und zwar auf einer anderen Seite, mit Wordpress 2.9.2.:

PHP

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script type="text/javascript">

und da funktioniert diese seltsamerweise relativ gut (hat nichts mit dem Theme zu tun, hab das gleiche Theme kopiert und hochgeladen), leider versagt das jQuery auch da hin und wieder.

Liegt das Problem vielleicht an der jquery-1.4.2.min.js gekoppelt an Wordpress 3.0.1? Oder ist das ein Problem von meinem Server http://de.selfhtml.org/javascript/intro.html
Hier ein Zitat von selfhtml:

Zitat

Es kann passieren, dass ein JavaScript, das in einer separaten Datei notiert ist, lokal wunderbar funktioniert, aber nach dem Hochladen der Dateien auf einen WWW-Server plötzlich nicht mehr. Bitten Sie in diesem Fall den Provider oder Webmaster des Servers, den MIME-Typ text/javascript für Dateien mit der Endung .js in die Konfiguration des Web-Servers mit aufzunehmen. Ansonsten können Sie im einleitenden <script>-Tag beim type-Attribut auch mal den MIME-Typ application/x-javascript anstelle von text/javascript ausprobieren. Bei einigen Servern funktioniert es dann.

Auf jeden Fall funktioniert es irgendwie, am besten unter WP 2.9.2 und auch da eher unzuverlässig. Hat das denn einer von euch zufällig irgendwann getestet und es hat funktioniert? Über sonstiges Tipps würde ich mich auch sehr freuen.

bego

Zitat von maxe

... aber die Frage ist sowieso, warum nimmst du eine externe jQuery wenn doch WP schon eine mitbringt?

Dafür sprechen mehrere Gründe:

Schnellere Reaktionszeit: Die CDN-Server von Google dürften schneller arbeiten, als mein Billig-Provider.
Weniger Transfervolumen auf dem eigenen Server
Caching: Der Besucher hat eher das immer wieder von Google kommende jQuery im Cache, als die Version von meinem Blog
Aktualität: durch die Verwendung von

PHP

wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '5.0');

[INDENT]wird immer die aktuelle jQuery-Version geladen.
[/INDENT]Ein Argument gegen die Verwendung von Googles CDN wäre, dass auch diese Webserver mal nicht erreichbar sein könnten. Aber, hey, das wäre doch auch mal eine tolle Erfahrung. ;-)

Grundsätzlich setze ich jQuery nur so ein, dass die Website auch bei deaktiviertem JavaScript noch "funktioniert". Sie sieht dann eben nur nicht mehr so schnieke aus. Stichwort "unobstrusive javascript".

bego

Zitat von press

Meinst du die unter: wp-includes/js/jquery/ ? Wenn ja, welche?

Das "eingebaute" jQuery lässt sich z.B. in der header.php ganz einfach durch

PHP

<?php wp_enqueue_script('jquery'); ?>
<?php wp-head(); ?>

nutzen (wichtig ist die Reihenfolge, also die Einbindung vor wp_head() ).

Zitat
PHP
$("a").click(function(event){ alert("Hallo!"); });//hier Deine Funktion
funktioniert bei mir bei allen Einbindungsarten.

Damit es beim Laden von jQuery nicht zu Konflikten kommt, arbeitet jQuery im no conflict-Modus. Dies hat zur Folge, dass man die jQuery-Funktionen entweder so:

PHP

jQuery(document).ready(function($) {
    // $() funktioniert 
});

oder so:

PHP

(function($) {
    // $() funktioniert innerhalb dieser Funktion
})(jQuery);

einbetten muss.

Zitat
Diese Einbindungsart funktioniert:
PHP
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
mehr schlecht als recht ...

Die Nachteile dieser Form der Einbindung von jQuery werden hier beschrieben.

Schau doch noch mal in den Codex. Vielleicht hast Du etwas übersehen?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Abgerundete Ecken

Jetzt mitmachen!