CodeVoyager

WIP DUMP ON PROPER IMAGES MARKUP

Edit Page

WIP DUMP ON PROPER IMAGES MARKUP

  1. plugin koji se bavi sa brisanjem image sizes, i generisanjem novih, kao i definisanje parametara za konverziju za jpeg tu dodaj i dodavanje mime types

Ako server radi automatski rewrite webp na jpeg, kao što radi raidboxes, pa i za avif, dovoljno je samo instalirati adamsilverstein/modern-images-wp plugin image_editor_output_format. možda i to smestiti u onaj 1. plugin, jer je baš jednostavno

  1. ovo moje za picture generation. ali možeš i da definišeš i sa classes pored block-type.

  2. cleanup - tako što sve prebaci u drugi direktorij, a zatim u radu vraća u main folder. najbolji cleanup

  3. voleo bih da imam neki plugin koji ne stavlja sve slike u isti folder, a opet nije očajan za seo isti folder je nemoguće raditi. a za seo, bilo šta osim hash je glupost

Štao o

sizes=auto

sizes=auto is a great idea – Chris Coyier Sizes=“auto” pretty much requires width and height attributes — ericportis.com

PHP Funkcija kojom možeš da izlistaš veličine za svaku fotku u media library:

Better Image Management With WordPress — Smashing Magazine

Add file size to media column

How to add File Size admin column in WordPress Media Library - Sridhar Katakam

Please refer to the Media Files Tools WordPress plugin. This plugin has some additional minor options, but the main feature is the ability to add columns in the Media Library. The new columns that can be added are File Size and MIME Type.

Setting quality

1
2
3
4
5
6
7

add_filter( 'jpeg_quality', 'ewww_image_optimizer_set_jpg_quality', PHP_INT_MAX - 1 );
// Allows the user to override the default WebP quality used by EWWW IO.
add_filter( 'webp_quality', 'ewww_image_optimizer_set_webp_quality' );
// Allows the user to override the default AVIF quality used by EWWW IO.
add_filter( 'avif_quality', 'ewww_image_optimizer_set_avif_quality' );
// Prevent WP from over-riding EWWW IO's resize settings.
add_filter( 'big_image_size_threshold', 'ewww_image_optimizer_adjust_big_image_threshold', 10, 3 );

Backend Engines

ImageMagick 7 je prvi koji podržava neku opciju koja mi može zatrebati - mislim animated WebP ili slično.

Yeee ImageMagick 7 PHP extension is Imagick/imagick: 🌈 The Imagick PHP extension 🌈

Prvo ukloni staru verziju sa root@weddyplace:~# apt remove --purge imagemagick

Najbrže je koristiti custom PPA, i pronašao sam jedan, ali ako on prestane da radi, pređi na script metod.

vintagesucks/ppa

1
2
3

wget -qO - https://vintagesucks.github.io/ppa/key.gpg | sudo gpg --dearmor -o /usr/share/keyrings/vintagesucks-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/vintagesucks-keyring.gpg] https://vintagesucks.github.io/ppa/ubuntu/jammy ./" | sudo tee /etc/apt/sources.list.d/vintagesucks-jammy.list
apt update && apt install imagemagick

ppa:/

add-apt-repository ppa:vintagesucks/imagemagick-deb -y

I you want to compile from source, the best way to install is using ImageMagick Easy Install script SoftCreatR/imei: IMEI

1

t=$(mktemp) && wget 'https://dist.1-2.dev/imei.sh' -qO "$t" && bash "$t" && rm "$t"

Nema razloga ništa menjati na PHP extenziji jer od verzije 3.5.0 extension is compatible with PHP 8 and ImageMagick 7

1
2
3
4
5

magick -version
# or
identify -version
# the best in PHP
php --ri imagick

ImageMagick Engine sa repo na orangelabweb/imagemagick-engine: WordPress plugin to replace image engine with ImageMagick.

Još neki pluginovi:

Adaptive Images for WordPress is actually very interesting as it monitors folders and creates waves of desired sizes there, making it very “wild” yet understandable.

Images to WebP WP Compress – Image Optimizer [All-In-One]

what about SmartCrop?

Čovek se bavio istom Retina problemom kao i ja: There is no reason to create larger files than what your eyes can see. Retina Displays and File Sizes - Baekdal

Inače, So the node remains the placeholder for the image as chosen by the browser from the available sources, meaning CSS should continue to target and not or ?

WordPress će uskoro podržavati AVIF

I hope WordPress version 6.5 will support AVIF - yes, 6.5 or possibly 6.6. Yes, in 6.5 IT IS:

Ticket: Trac 51228: Add AVIF support · Issue #825 · WordPress/performance

I bukvalno sve što je objedinjeno izmenama: 51228.2.diff on Ticket #51228 – Attachment – WordPress Trac

WordPress 6.5 will be the first major release of 2024.

5% of WordPress sites use the picture element. koristi The HTTP Archive

Bitan WP dokument - Modern image format in WordPress i The HTML5 Picture Element: WordPress - Google Docs

Kako to napreduje - sve kroz Perfomance plugin

[Focus] Images [Images] Overview · Issue #166 · WordPress/performance

Sizes = Auto

Currently, it looks like we can apply auto sizes with a fallback (e.g., auto, (max-width: 960px) 100vw, 960px) only when an image has loading=“lazy” applied Module Proposal: auto-sizes for lazy-loaded images · Issue #791 · WordPress/performance

Već implementirano u Performance Lab plugin, Add: Auto Sizes for Lazy-loaded Images · WordPress/performance@9a14b1f

A oni koriste wp_content_img_tag, čisto da znaš. A koriste i wp_get_attachment_image_attributes

Peglanje kvaliteta slika

How to improve the quality of images in WordPress – Pixelgrade je prvi pomenuo sharpen.

Better Images – Sharpen, compress, optimize and resize image after upload je stvarno odličan plugin.

i nešto slično: WPSSO Tune WP Image Editors

Image saturation loss (yes sRGB, not Adobe RGB)

How to Fix Image Color and Saturation Loss in WordPress

Image Quality Thumbnail Compression in Wordpress? - WordPress Development Stack Exchange

Sharpen

ImageMagick Sharpen Resized Images dodaje šarpnes na slike prilikom prevelikog smanjenja, ili ovaj Sharpen Resized Images

sharpen image quality with PHP gd library - Stack Overflow, image processing - PHP GD sharpness filter - Stack Overflow, šta je onda - trepmag/unsharp-mask: Unsharp mask algorithm for PHP

Use WP_Image_Editor: Image-Manipulation-library

However, if you do need to step into the land of PHP image libraries, please opt for the WP_Image_Editor class. Since v3.5, this class has abstracted much of the functionality in GD and Imagick - WP_Image_Editor – Class | Developer.WordPress.org

A evo još jednog razloga da koristiš apstrakciju. Naime, napravljen je plugin binaryImagemagick sa repo heiglandreas/binaryImagemagick ako nemaš Imagick ili GD PHP extension a imaš i open_basedir restrictions on the folder containing the convert-binary, što je apstrakcija.

Inače, iz Laravela ili Symfony, je library getdave/wp-intervention: On-demand image manipulation for WordPress via the Intervention Library. koji koristi Intervention Image | Intervention Image v3 | intervention.io i koji je takođe abstraction layer.

Single Post Query Loop Selector

Requesting data in Gutenberg with getEntityRecords – Ryan Welcher

Napisao je dosta i bavio se slikama: A fresh new Image editor UI for WordPress | Marko Heijnen

markoheijnen/Debug-Image-editors je odličan i mali plugin za prikaz podataka o WP_Image_Editor, lista ih sve i sprovodi neke osnovne testove.

Improved Image Editor sa repo na markoheijnen/Improved-image-editor: All cool goodies WordPress core maybe should have je plugin ne koristi njegovu staru markoheijnen/WP_Image klasu, ali pravi sličnu Improved_Image_Editor. Inače, Improved Image Editor objedinjuje sve ostale njegove pluginove, a evo malo upustva: Image Manipulation in WordPress - CodeProject

Sitna unapređenja za GD library na markoheijnen/Improved-GD-Image-Editor uglavnom vezana za EXIF/IPTC data, pod imenom WP_Image_Editor_GD_Improved, a tu je i plugin sa tim lib Improved GD Image Editor

WP_Image_Editor_Vips je WP_Image_Editor za VIPS lib, sa repo na markoheijnen/vips-image-editor: WordPress integration for https://pecl.php.net/package/vips, ali postoji i noviji sličan projekat na repo CreunaFI/vips-image-editor: High performance WordPress image processing with VIPS koji je opisan na High performance WordPress image processing with VIPS

Njegov je i Gmagick koji pravi WP_Image_Editor za Gmagick (GraphicsMagick) koji je skoro identičan sa ImageMagick

josantonius/wp-image-handler: Save images to WordPress. je takođe neki WP_Image class.

Neke komande koje su korisne za media library

Skripte na media library, koje mogu biti korisne:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

cd uploads

# Delete all (JPEG, AVIF, WebP, etc) images ending with -XXXxYYY, except for -150x150 because that's the thumbnail
find . -type f \( -iname '*-[0-9]*x[0-9]*.*' ! -iname '*-150x150.*' \) -delete

# Delete auto-generated WebP and AVIF files of jpeg/jpg/webp
find . -type f \( -iname '*.jpeg.webp' -o -iname '*.jpg.webp' -o -iname '*.webp.webp' \) -delete
find . -type f \( -iname '*.jpeg.avif' -o -iname '*.jpg.avif' -o -iname '*.webp.avif' \) -delete

# It's safe to delete even the 150x150 thumbnails before import as we have an option to force images
find . -type f -iname '*-150x150.*' -delete

wp media regenerate --only-missing

usage: rclone ls “weddy-stage:” –max-depth 1

rclone sync “weddy-dev:/source” “weddy-stage:/destination” –exclude “/node_modules/” –exclude="/.git/" –progress

rclone sync “weddy-dev:/wp-content/plugins/_customize” “weddy-stage:/wp-content/plugins/_customize” –progress

rclone sync “weddy-dev:/experiments/ghost2wp” “weddy-stage:/experiments/ghost2wp” –progress

rclone sync “weddy-dev:/wp-content/plugins/_debug-log-denoiser” “weddy-stage:/wp-content/plugins/_debug-log-denoiser” –progress

p=“avif-support” ; rclone sync “weddy-dev:/wp-content/plugins/$p” “weddy-stage:/wp-content/plugins/$p” –progress

p="_pinpins" ; rclone sync “weddy-dev:/wp-content/plugins/$p” “weddy-stage:/wp-content/plugins/$p” –exclude “node_modules/” –exclude=".git/" –progress

watch free disk size

watch -n 10 ‘df -h’

the size of uploads folder

watch -n 30 ‘du -hs wp-content/uploads/’

number of files in uploads

watch -n 5 ’ls -1 wp-content/uploads/** | wc -l'

Funkcije za ubacivanje slike sa lokalnog diska, i sa eksternog URL-a

Re-building and Re-inserting Images into the WordPress Media Library from External Sources – Krasen Slavov

Kako da dobijem attachment ID kada imam image URL, ili URL bilo kog fajla?

Ugrađena funkcija je attachment_url_to_postid(). Kao parametar može da se navede http://example.com/wp-content/uploads/subfolder/picture.jpg ili subfolder/picture.jpg, potpuno je svejedno.

1

SELECT post_id, meta_value FROM $wpdb->postmeta WHERE meta_key = '_wp_attached_file' AND meta_value = 'subfolder/picture.jpg'

Alternativa, koja mislim da ne radi dobro: Verifying Existing Attachments in the Database – Krasen Slavov i drugi autor za istu stvar Retrieve Attachment ID from Image URL - Pippins Plugins

Međutim, sledeći pristup baš ima smisla - unapređenje originalne funkcije da uključuje i resizeovane i crop-ovane images za URL:

Najbolja implementacija je Get Attachment ID from a WordPress Image URL - WP Scholar sa gist na get-attachment-id.php, a tu pominje i neke ranije pokušaje Turn a URL into an Attachment / Post ID - WordPress Development Stack Exchange

Ovaj drugi pristup samo skida dimenzije sa URL, ali to je baš jednostavno i efikasno: How to get WordPress Attachment ID by image URL odnosno Get attachment ID by its thumbnail URL in WordPress | Epiphyt, i slična stvar na Get Image Attachment ID from Image URL in WP - Tutorial Shares. Razne diskusije vezano za ove pristupe su na Get attachment ID by file path in WordPress - Stack Overflow

Odlučio sam da korisim samo malo unapređenu wrapper funkciju:

1
2
3
4

function image_url_to_postid( $url ) {
  $url = preg_replace( '/\-\d+x\d+\.(jpe?g|png|gif|webp)$/', '.$1', $url );
  return attachment_url_to_postid( $url );
}

Moja funkcija iz Ghost2WP:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function attachImage(string $path, array $metadata = null): int
{
    $filePath = $path;
    $fileName = basename($filePath);

    echo __n(). "Attach: $filePath";

    # needed for wp_generate_attachment_metadata
    require_once ABSPATH . 'wp-admin/includes/image.php';

    # https://gist.github.com/kjbrum/028ccc3ff718e77f9f78
    # create attachment
    $attachment_id = wp_insert_attachment([
        'post_mime_type' => wp_check_filetype($fileName, null)['type'] ?? null, # get from filename
        'post_title'     => $metadata['title'] ?? \sanitize_file_name($fileName),
        'post_excerpt'   => $metadata['caption'] ?? '', # caption is stored in post_excerpt
        'post_content'   => $metadata['description'] ?? '', # description is stored in post_content
        'post_status'    => 'inherit',
    ], $filePath);

    # read metadata from file and update attachment
    $attach_data = wp_generate_attachment_metadata($attachment_id, $filePath);
    wp_update_attachment_metadata($attachment_id, $attach_data);

    # add or update alt text
    if ($alt = $metadata['alt'] ?? '') {
        setAltText($attachment_id, $alt);
    }

    return $attachment_id;
}

WP_Image_Editor Class

WP_Image_Editor Classje each instance handles a single file.

Each custom image size in custom upload directory? - WordPress Development Stack Exchange i to u praksi IORoot/wp-plugin__thumbnail-folders: Creates subdirectories in the uploads folder for each thumbnail size

Resizing Images Programmatically in WordPress | Tom McFarlin

Bitni hookovi za manipulaciju:

WP_Image_Editor::multi_resize() – Method

Primer

Below is a simple, high-level example of a WordPress plugin. The plugin leverages the WP_Image_Editor class and hooks into WordPress’ image generation process to produce thumbnails as well as WebP and AVIF versions of images.

Please note, this code does not cover all the edge cases, but should give you a good starting point.

U mom pluginu:

  1. Image markup menjam odnosno insertujem sa ‘render_block’, ali bi pravilno bilo sa funkcijom za output wp_get_attachment_image(). Omogući i to u settings, iako je moje rešenje fleksbilnije.
  2. Proveravam thumbnails na hook ‘wp_calculate_image_srcset’ koji je pozvan iz ‘wp_get_attachment_image’ - i tu mislim da grešim. Inače, zbog brzine, ako si u admin, ne radim ništa.

Koje hookove koristiti?

Pogledaj WebP Uploads

  1. Essential:
    1. “Disable Generate Thumbnails” za gašenje image sizes i podešavanje rotacije
    3. “Admin and Site Enhancements (Utilities > Image Sizes Panel)” samo kao helpful utility
    4. Treba mi govno za kreiranje novih image sizes… 2.

  • Generating tag je bitno Radi ga: WebP Express (CDN friendly > Alter HTML), Avif Express (i WebP i AVIF), EWWW Image Optimizer (WebP, ne radi AVIF), ShortPixel Image Optimizer (only in paid, also AVIF)

  • Converting images je ujedno i kompresija a to je standardno podržano i u GD i u Magic

  • Recompressing images nije više toliko kritičan pošto jpeg nije više bitan, a uglavnom je tu bilo razlika

Plugin WebP Uploads, now named “Modern Image Formats”, je oficijelni WordPress Performance Team, postoji podešavanje “Settings > Media > Generate JPEG files in addition to WebP” that when checked will set WP generate both JPEG and WebP images for every sub-size, only for new images, i to moraš uključiti. Takođe, kada je ovaj plugin aktivan, rewrite-uje se IMG tako da ako postoji WebP, on je servovan, a ako ne, onda nije. Izgleda da se WebP slike sa ovim pluginom generišu samo ako su manje od jpeg koje su im bile source. Ja smatram manom što ne koristi već on problem starih browsera rešava sa malim JS (search: webp_uploads_wepb_fallback) koji stavlja na svaku stranu i onda vraća JPG ako browser ne podržava WebP. Dakle, za sada, konvertuje samo JPEG (a ne i PNG i GIF), čuva original JPEG ali nadalje koristi WebP.

  1. Istovremeno generisanje i WebP i AVIF.

The easiest way to set up a picture tag is via

The plugin implements the “WebP On Demand” solution koja konvertuje samo slike koje nisu konvertovane, described here webp-on-demand.md, ali je to only for Apache

Odlični i library od tog autora: rosell-dk (rosell-dk) / Repositories rosell-dk/dom-util-for-webp: Replace image URLs found in HTML

WebP Express has a “Scope” option, which for example can be set to “Uploads and themes”. Only images that resides within the selected scope are replaced with WebP.

If you have set the “How to replace” option to “Use content filtering hooks”, images inserted with some third party plugins/themes might not be replaced. To overcome that, change that setting to “The complete page”.

Kakav tool za prikaz ! I just want an image on my page

Glavni tekst: Enable element support · Issue #21 · WordPress/performance

Serve responsive images  |  Articles  |  web.dev The picture element  |  web.dev Responsive Images – Common APIs Handbook | Developer.WordPress.org

Die Braut trägt ein weißes Hochzeitskleid.

Najbolji primeri

http://weddy.jao.rs/magazin/warum-traegt-die-braut-weiss/ http://weddy.jao.rs/magazin/hochzeitsreise-roadtrip-durch-deutschland/ fale fotke: http://weddy.jao.rs/magazin/hochzeitsfeier/

Samo na stage:

https://www.weddyplace.com/magazin/kreuzfahrt-entdeckt-die-schoensten-flitterwochen-routen-mit-tui-cruises/ https://www.weddyplace.com/magazin/styled-shoot-cleane-eleganz/

Ovde ima ogroman animated GIF:

http://weddy.jao.rs/magazin/wann-darf-der-mann-die-braut-sehen/ http://weddy.jao.rs/magazin/wo-schlaft-die-braut-vor-der-hochzeit/

AVIF Support - ne generiše AVIF osim ako ne uključiš to kao target na Modern Images WEBP - neće da radi sa AVIF Support

da bi generisao nešto, mora da extenduje class WP_Image_Editor:

EWWW Image Optimizer naveliko koristi WP_Image_Editor, kao i sledeći

Post Thumbnail Editor je abandoned ali je omogućavao editovanje thumbnail-a i extenduje class na PTE_Image_Editor_GD, samo zbog crop-ovanja.

PBC Image Compress je prastari plugin koji koristi exec() function za lokalne toolove.

Letterbox Thumbnails je stvarno nebulozno nepotreban plugin, ali hajde?

(the_content, the_excerpt, etc)

Option in WebP Express to select between:

  • Use content filtering hooks (the_content, the_excerpt, etc)
  • The complete page (using output buffering)

webp-express/README.txt at master · rosell-dk/webp-express

Linije gde se vidi na šta se hook-uje.

Hooks used: the_content, the_excerpt, post_thumbnail_html, woocommerce_product_get_image, get_avatar, acf_the_content, a tu su i actions: dynamic_sidebar_before i dynamic_sidebar_after

Guido to define typical sizes that cover the most usage.

Width: (Desktop)

  • ignore - Scaled: 2048px (ne treba) Size: 1200px (large) Featured: 680px (medium) 2-Column: 360px (small) 3-Column: 240px (tiny)

@Vladan Colovic The Featured image needs to be 1200 x 628 px. So we need to scale that.

Width: (Mobile) Featured Image: 360px

Objašnjeno sve o Wordpress slikama, posebno za thumbnail rebuild:

Image Sizes in WordPress post thumbnails - WordPress adding scaled images that don’t exist (1536x1536 and 2048x2048) - WordPress Development Stack Exchange

Obavezno pročitaj komentare i remove_image_size, a pogledaj i sve ostalo.

https://developer.wordpress.org/reference/hooks/jpeg_quality/

Remove image sizes - WordPress Hooks Display EXIF and IPTC Metadata in the Edit Media Screen - WordPress Hooks

Debugging WP Mail - WordPress Hooks

Sizing Images

Guide to Properly Size Your Hero Images and Optimize Them for Site Speed

Ideal picture proportions:

  • Hero Image: 16:9
  • Blog Image: 3:2

For Dall-E, to use 16:9 proportions specify in prompt “The image should be presented in widescreen format”

banner hero image, header images, half-height hero image 16:5 aka 1600x500px

Ultimate Guide to Hero Images [Best Practices + Examples]

claviska/SimpleImage: A PHP class that makes working with images and GD as simple as possible. je ažuran i lep library za manipulaciju slikama u svim formatima.

define( 'IMAGE_EDIT_OVERWRITE', true );

WordPress creates a new set of images every time you edit an image but when you restore the original, it leaves all the edits on the server. Setting IMAGE_EDIT_OVERWRITE changes this so that when you restore the original, the edits are removed from the server.

Source: Editing wp-config.php

IMAGES! regenerate thumbnail programmatically Image Sizes in WordPress

Webp converter for WordPress

date 24. Feb 2024 | modified 14. Jun 2024
filename: Plugins » Uploads » Images » WIP Dump
Article Content