WP 3.0 Abgerundete Ecken

press · 15.08.2010, 13:56

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/tutor...e-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.

bego · 15.08.2010, 14:25

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-Code:

  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-Code:

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

});
</script>

press · 15.08.2010, 15:39

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;

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 · 15.08.2010, 17:08

Zitat:

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 functions.php vorgenommen? jQuery-Aufruf geändert?

Code:

jQuery(document).ready(function($){...

statt

Code:

$(document).ready(function($){

?

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 · 15.08.2010, 21:04

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>

so eingefügt, aber es tut sich nichts.

maxe · 15.08.2010, 21:46

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

Code:

<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>

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

press · 16.08.2010, 17:21

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-Code:

  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-Code:

  <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-Code:

  <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-Code:

  <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>

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-Code:

<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>

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;}

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 $ anstatt jQuery 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.