Snelle tip BFI-thumb gebruiken voor afbeeldingen op maat

Als WordPress-thema-ontwikkelaars kunnen we een thema maken - of thema's - waarbij afbeeldingen een bepaalde specifieke grootte (afmetingen) moeten hebben. Tegelijkertijd kunnen we de verantwoordelijkheid voor het maken van dergelijke dimensiespecifieke afbeeldingen niet plaatsen bij de eindgebruikers van onze thema's.

Dus wat is de oplossing? De beste manier om met dit probleem om te gaan, is door binnen onze thema ('s) de functionaliteit op te nemen om ter plekke aangepaste beelden te genereren.

In deze zelfstudie laat ik u zien hoe u de BFI Thumb PHP-bibliotheek gebruikt om dat te bereiken.

Uitgelichte afbeeldingen

Wat zijn uitgelichte afbeeldingen

Volgens de WordPress Codex:

Een Featured Image is een afbeelding die is gekozen als de representatieve afbeelding voor Posts, Pages of Custom Post Types. De weergave van deze afbeelding is aan het thema. Dit is vooral handig voor "tijdschriftstijl" -thema's waarbij elke post een afbeelding heeft.

Uitgelichte afbeeldingen werden miniaturen genoemd voordat de naam werd gewijzigd. U zult dus merken dat deze twee termen door elkaar worden gebruikt.

Ondersteuning voor aanbevolen afbeeldingen inschakelen

Thema's moeten hun ondersteuning voor postminiatuurnotities bevestigen voordat de interface voor het toewijzen van deze afbeeldingen wordt weergegeven op de schermen Post toevoegen / bewerken.

Als u ondersteuning voor postminiatuur in uw thema wilt inschakelen, voegt u de volgende regel toe aan uw functions.php het dossier:

Postminiaturen weergeven in uw thema

Om postminiaturen in uw thema weer te geven, plakt u de volgende code op een geschikte plaats in uw specifieke sjabloonbestand:

De bovenstaande code controleert of het bericht een miniatuur heeft voordat de functie wordt aangeroepen om het weer te geven.

De functie add_image_size ()

De add_image_size () functie stelt u in staat nieuwe beeldgroottes te registreren voor postminiatuurfoto's.

WordPress maakt standaard de volgende afbeeldingsformaten wanneer een gebruiker een afbeelding aan de mediabibliotheek toevoegt:

• thumbnail - (150 px x 150 px max)  
• medium - (300 px x 300 px)
• groot - (640px x 640px)
• volledig - originele grootte geüpload 

Nieuwe afbeeldingsgrootte registreren

Om nieuwe beeldgroottes te registreren, gebruiken we de add_image_size () functioneer als volgt:

 

parameters:

• name $ - (draad) (verplicht) De nieuwe naam van het afbeeldingsformaat. Standaard: Geen
• $ breedte - (int) (optioneel) De breedte van de postminiatuur in pixels. Standaard: 0 
• $ hoogte - (int) (optioneel) Hoogte van het berichtminiatuur in pixels. Standaard: 0 
• $ gewas - (Boolean / array) (optioneel)

Voorbeeldgebruik

Als u de nieuw geregistreerde afbeeldingsformaten in uw thema wilt weergeven, geeft u eenvoudigweg de naam van de aangepaste afbeeldingsgrootte van uw bericht door aan de the_post_thumbnail () functie, zoals deze:

Introductie van BFI Thumb

BFI Thumb is een PHP-klasse of -bibliotheek die fungeert als on-the-fly-reseller voor afbeeldingen / cropper / grijstinten / inkleuring / opacitor voor WordPress ontwikkeld door Benjamin Intal. 

Installatie en integratie

1. Download BFI thumb uit GitHub en sla het op in de hoofdmap van uw thema.

2. Neem op in uw thema door de volgende regel toe te voegen aan uw functions.php het dossier:

3. Gebruik de volgende functie overal waar u uw afbeelding op aangepaste grootte wilt weergeven:

 400, 'hoogte' => 300); bfi_thumb ("URL-naar-afbeelding.jpg", $ params); ?> 

Als je naar de bovenstaande functie kijkt ( bfi_thumb () ), zult u merken dat de URL van de afbeelding waarvan de grootte moet worden aangepast, als eerste parameter wordt gebruikt, gevolgd door de andere parameters (afbeeldingsdimensies). Dus je moet jezelf afvragen, hoe bepalen we de URL van onze postminiatuur?

Om de URL van een postminiatuur te bepalen, gebruiken we een functie genaamd wp_get_attachment_image_src () waarbij de bijlage-ID, de grootte en een optioneel pictogram als parameters worden gebruikt.

Dus we passeren get_post_thumbnail_id () functie als de eerste parameter. Het kost de Bericht ID als een parameter en retourneert de ID kaart van de afgebeelde afbeelding bij de post.

De tweede parameter is grootte Dit kan een tekenreeks met een reeks zijn (miniatuur, gemiddeld, groot of vol), aangepaste beeldformaten die u hebt toegevoegd met de add_image_size () functie of een matrix met twee items die de breedte en hoogte in pixels vertegenwoordigt. Maar om ervoor te zorgen dat onze afbeelding op maat de hoogste kwaliteit heeft, gebruiken we de originele grootte - vol.

 Inmiddels zou onze code er ongeveer zo uit moeten zien:

 400, 'hoogte' => 300); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); bfi_thumb ($ imgsrc [0], $ params);?> 

wp_get_attachment_image_src () geeft een geordende array terug met waarden die overeenkomen met de (0) url, (1) breedte, (2) hoogte en (3) schaal van een afbeeldingsbijlage (of een pictogram dat een bijlage voorstelt).

Maar we zijn alleen geïnteresseerd in de eerste geretourneerde parameter - de URL. We geven het door aan de bfi_thumb () functie, samen met onze andere parameters (breedte en hoogte) om onze afbeelding op maat te krijgen.

Het in een functie verpakken

Omdat we deze code waarschijnlijk steeds opnieuw zullen gebruiken in ons thema - of thema's - laten we het in een functie afronden.

 $ image_width, 'height' => $ image_height); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); return $ custom_img_src;?>

Bewaar dit bestand in uw functions.php het dossier.

Gebruik

Voor afbeeldingen:

Of voor achtergrondafbeeldingen:

... 
 

Voordelen van aangepaste afbeeldingen via miniaturen

Aangepaste afbeeldingen die on-the-fly zijn gemaakt met behulp van een bibliotheek zoals BFI Thumb hebben de volgende voordelen ten opzichte van aangepaste miniaturen gemaakt / toegevoegd met behulp van de add_image_size () functie:

•  the_post_thumbail () functies echoën een afbeeldingstag. Soms is wat je wilt de URL van de afbeelding. Een voorbeeld is waar u de afbeelding als achtergrond wilt gebruiken.
• Aangepaste beeldformaten geregistreerd met behulp van add_image_size () is niet van toepassing op oudere afbeeldingen die zijn geüpload voordat het beeldformaat was geregistreerd
• BFI Thumb heeft de mogelijkheid om het formaat van afbeeldingen zowel omhoog als omlaag aan te passen
• BFI Thumb heeft ook extra functies zoals: grijswaarden, kleur (inkleuren), dekking, negeren

Conclusie

In deze snelle tip hebben we gekeken naar aanbevolen beelden - wat ze zijn en hoe we ze kunnen gebruiken in onze thema's. We hebben ook gekeken naar de add_image_size () functie om te zien hoe we het kunnen gebruiken om aangepaste beeldformaten toe te voegen wanneer een afbeelding wordt geüpload naar de mediabibliotheek.

We hebben de BFI THumb PHP-bibliotheek geïntroduceerd en geïllustreerd hoe we deze kunnen gebruiken om een ​​afbeelding op maat te maken op basis van een berichtminiatuur of uitgelichte afbeelding.

We hebben toen gekeken naar de beperkingen van het gebruik add_image_size () om aangepaste beeldformaten te maken en de voordelen die BFI Thumb erover heeft.

Voeg deze functie toe aan uw functions.php bestand en gebruik het wanneer u een afbeelding op maat wilt maken vanuit een miniatuur.