Suchen Sie nach einer Möglichkeit, Bilder mit einer einfachen Metabox zur Thumbnail-Auswahl an Beiträge anzuhängen? Obwohl es wahrscheinlich ein Plugin dafür gibt, haben wir einen schnellen Code-Schnipsel erstellt, den Sie verwenden können, um Bilder mit einer einfachen Metabox zur Thumbnail-Auswahl in WordPress an Beiträge anzuhängen.
Anweisungen:
Sie müssen diesen Code nur zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin einfügen:
add_action("admin_init", "images_init");
add_action('save_post', 'save_images_link');
function images_init(){
$post_types = get_post_types();
foreach ( $post_types as $post_type ) {
add_meta_box("my-images", "Pictures", "images_link", $post_type, "normal", "low");
}
}
function images_link(){
global $post;
$custom = get_post_custom($post->ID);
$link = $custom["_link"][0];
$count = 0;
echo '<div class="link_header">';
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' =>array(
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
),
'post_status' => 'inherit',
'posts_per_page' => -1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
echo '<div class="frame">';
$thelinks = explode(',', $link);
foreach ( $query_images->posts as $file) {
if(in_array($images[]= $file->ID, $thelinks)){
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" checked /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}else{
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}
$count++;
}
echo '<br /><br /></div></div>';
echo '<input type="hidden" name="link" class="field" value="'.$link.'" />';
echo '<div class="images_count"><span>Files: <b>'.$count.'</b></span> <div class="count-selected"></div></div>';
}
function save_images_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
update_post_meta($post->ID, "_link", $_POST["link"]);
}
add_action( 'admin_head-post.php', 'images_css' );
add_action( 'admin_head-post-new.php', 'images_css' );
function images_css() {
echo '<style type="text/css">
#my-images .inside{padding:0px !important;margin:0px !important;}
.frame{
width:100%;
height:320px;
overflow:auto;
background:#e5e5e5;
padding-bottom:10px;
}
.field{width:800px;}
#results {
width:100%;
overflow:auto;
background:#e5e5e5;
padding:0px 0px 10px 0px;
margin:0px 0px 0px 0px;
}
#results img{
border:solid 5px #FDD153;
-moz-border-radius:3px;
margin:10px 0px 0px 10px;
}
.frame label{
margin:10px 0px 0px 10px;
padding:5px;
background:#fff;
-moz-border-radius:3px;
border:solid 1px #B5B5B5;
height:60px;
display:block;
float:left;
overflow:hidden;
}
.frame label:hover{
background:#74D3F2;
}
.frame label.checked{background:#FDD153 !important;}
.frame label input{
opacity:0.0;
position:absolute;
top:-20px;
}
.images_count{
font-size:10px;
color:#666;
text-transform:uppercase;
background:#f3f3f3;
border-top:solid 1px #ccc;
position:relative;
}
.selected_title{border-top:solid 1px #ccc;}
.images_count span{
color:#666;
padding:10px 6px 6px 12px;
display:block;
}
.count-selected{
font-size:9px;
font-weight:bold;
text-transform:normal;
position:absolute;
top:10px;
right:10px;
}
</style>';
}
add_action( 'admin_head-post.php', 'images_js' );
add_action( 'admin_head-post-new.php', 'images_js' );
function images_js(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.frame input').change(function() {
var values = new Array();
$("#results").empty();
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
</script>
<?}
function wps_thumbnails_list(){
global $post;
$image = get_post_meta($post->ID, '_link', true);
$image = explode(",", $image);
foreach($image as $images){
$url = wp_get_attachment_image_src($images, 1, 1);
echo '<a href="';
echo $url[0];
echo '" class="lightbox">';
echo wp_get_attachment_image($images,'thumbnail', 1, 1);
echo '</a>';
}
}
Fügen Sie diesen Schnipsel in die Schleife Ihrer single.php-Datei ein, um die Bilder in Ihren Beiträgen oder Seiten anzuzeigen.
<?
wps_thumbnails_list()
?>
Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzuf ilde{A}gen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress kopieren / einf ilde{A}gen, damit Sie Ihre Website nicht versehentlich besch ilde{A}digen.
Wenn Ihnen dieser Code-Schnipsel gefallen hat, ziehen Sie bitte in Betracht, unsere anderen Artikel auf der Website zu lesen, wie z. B.: 11 beste kostenlose Webhosting-Dienste und wie man eine GoDaddy Website Builder-Site nach WordPress migriert.
Gibt es einen Grund für doppelten jQuery-Code?
Tolles Plugin. Ich versuche seit einiger Zeit, die entsprechenden Metadaten jedes Bildes auf der Seite oder im Beitrag abzurufen, ohne Erfolg. Hat das jemand herausgefunden oder ist das mit diesem Plugin überhaupt möglich?
Dies zeigt Ihnen, wie Sie Metadaten abrufen,
http://wpsnipp.com/index.php/loop/display-attachment-thumbnail-with-image-metadata/
Ich bekomme einen weißen Bildschirm, wenn ich diesen Code in functions.php einfüge. Ich benutze WP 3.8, gibt es eine Lösung? 🙂 Ich würde das gerne benutzen.
Hallo! Was ist mit mehreren Bildern, die an einen Thumbnail angehängt sind? Helfen Sie mir bitte
Hallo Kevin
Ich frage mich nur, ob es anstelle der Anzeige aller Anhänge in der Mediathek eine Möglichkeit gibt, nur die für jeden Beitrag hochgeladenen Bilder anzuzeigen, an die sie angehängt sind?
Danke
Fügen Sie einfach hinzu
‘post_parent‘ => $post->ID
Unter
‘posts_per_page‘ => -1,
Kevin, sind Sie auf etwas gestoßen, das den Bild-Upload für Benutzerprofilfelder ermöglicht. Ich habe ein paar Premium-Plugins gesehen, und ich vermute, dass dies mit ähnlichem JS gemacht werden muss, aber ich frage mich nur, ob Sie auf Code dafür gestoßen sind.
Meinst du so etwas wie eine Avatar-Upload-Funktion?
Danke, Mann. Einfach zu bedienen, so wie es ist, oder ein guter Ausgangspunkt für Anpassungen.
Cool, freut mich zu hören. Ich arbeite gerade an einer Plugin-Version dieses Snippets, die Dinge wie Lazy Load, Popup-Bildvorschau usw. unterstützt, und werde sie in naher Zukunft kostenlos veröffentlichen. Folge mir auf Twitter oder Facebook, ich werde eine Ankündigung dazu machen.
Das ist einfach super genial. Du hast in den Kommentaren erwähnt, dass du eine aktualisierte Version posten würdest, ich frage mich nur, ob du das schon getan hast oder nicht? Danke für das coole Snippet
Scheint eine großartige PHP-Funktion zu sein. Vielleicht liegt es nur an meinem Computer, aber er scheint mir sehr träge zu sein, gibt es eine Möglichkeit, ihn zu beschleunigen?
Guter Anfang! Aber benutze nicht $file->guid. Das zerstört die Proportionen. Benutze $thumbnail = wp_get_attachment_image_src($file->ID, ‘thumbnail’); und ersetze $file->guid stattdessen durch $thumbnail[0]. Viel, viel besser!
Danke Jens, ich werde eine aktualisierte Version mit den erhaltenen Vorschlägen posten. Freut mich zu hören, dass dir das Snippet gefällt,
Ich wollte nur sagen, dass es endlich funktioniert hat, nochmals vielen Dank. Deine Hilfe wird sehr geschätzt 🙂
Kein Problem, freut mich zu hören, dass alles richtig funktioniert hat.
Hmmm, ich wusste nicht, dass der „AT kevin“-Teil zu einem Twitter-Link mit dem Benutzernamen ‚kevin‘ wird.
Entschuldige das 🙂 Ich habe nur auf dich Kevin (Chard) geantwortet.
haha kein Problem 🙂
@Kevin:twitter , wow, das muss mein Glückstag sein, ich suche schon seit einiger Zeit nach so etwas! Ich bin sehr dankbar, danke! Das wird nützlich sein und funktioniert großartig, aber ich möchte wissen, wie ich die Mehrfachauswahl deaktivieren kann. Ich möchte nur, dass die Funktion nur eine Anlage auswählen kann 🙂
(Ich habe es bereits bearbeitet, um nur die URL/Quelle anzuzeigen, damit ich es in der Theme-Schleife implementieren konnte)…
Ändern Sie dies einfach von Kontrollkästchen zu Radio-Buttons, alles innerhalb derselben Gruppe.
Kevin, danke, aber das hat nicht funktioniert. Erstens, wenn ein Bild ausgewählt wird, wird das Bild ausgewählt, aber wenn bereits ein anderes Bild ausgewählt war, wird dieses nicht abgewählt, und es werden immer noch mehrere Bilder im Beitrag angezeigt (nicht wirklich ein großes Problem, aber benutzerfreundlicher, wenn ein Benutzer nur ein Bild auswählen kann :))
Zweitens möchte ich wissen, ob es möglich ist, die Größe des Bildes im Alt- oder Titelbereich oder unter dem Bild selbst in einem Span anzuzeigen. Ist das mit diesem Snippet überhaupt möglich? Ich habe Folgendes versucht:
(Ich weiß, dass es nicht richtig ist :))
title=”””
Das sollte für Sie funktionieren. Die Radio-Buttons müssen den gleichen Namen haben, sonst gehören sie nicht zur selben Gruppe und würden wie ein Kontrollkästchen funktionieren.
http://pastebin.com/vF6mjyZL
Ich habe zwei Versionen erstellt, eine, die einzelne Bilder für die gleichen Gründe, die Sie vielleicht hatten, unterstützt. Beide sollten zusammenarbeiten, obwohl diese einige auskommentierte Codes hat, aber sie sollte gut funktionieren.
Was ich versucht habe:
title = “‘ ‘”
Hallo Sir, kann ich sagen, dass dies eines Ihrer besten Snippets ist? Vielleicht!?
Danke, ich freue mich zu sehen, dass Ihnen das Snippet gefällt.