sourceSet Feature for Image

[yuliakbard]

Saya pengguna blogger yang masih dalam pembelajaran mengenai PHP, ingin transisi ke Mecha. saya mengharapkan fitur sourceSet untuk gambar. sesuatu yang mirip sourceSet(data:post.featuredImage, [240,330,600])

saya membayangkan cara menggunakannya, tinggal menuliskan seperti ini <?=self::sourceSet($image, [240,330,600]);?>

Dengan Output:
/gambar1-w240.jpg 240w, /gambar1-w330.jpg 330w, /gambar1-w600.jpg 600w
atau
/w240/gambar1.jpg 240w, /w330/gambar1.jpg 330w, /w600/gambar1.jpg 600w

Dengan banyak fitur-fitur yang mirip seperti blogger, dengan ini akan membuat para blogger pemula yang ingin lebih advance dalam mengelola Website akan migrasi menggunakan Mecha CMS, begitu juga para designer template blogger yang akan membuat desain template untuk Mecha yang lebih kreatif

[taufik-nurrohman]

Ide kamu sebenarnya masuk mas, cuma akan lebih efektif kalau pakai fungsi. Mas bisa buat fungsi source_set() misalnya, kemudian mengubah URL gambar yang ada di dalamnya menjadi thumbnail menggunakan ekstensi image:

function source_set(string $source, array $set = []) {
    $image = new Image($source);
    // Resize, crop, dsb…
}

Kendalanya ada di cara mengubah gambar tersebut menjadi URL yang baru. Kita bisa pakai rute tapi akan butuh langkah tambahan lagi. Cara yang paling mudah ya dengan menggunakan layanan pihak ke tiga, misalnya Statically:

function source_set(string $source, array $set = []) {
    $out = [];
    $source = ltrim($source, '/');
    // <https://statically.io/docs/using-images>
    foreach ($set as $v) {
        $out[] = 'https://cdn.statically.io/img/' . $_SERVER['HTTP_HOST'] . '/w=' . $v . '/' . $source . ' ' . $v . 'w';
    }
    return implode(', ', $out);
}

Contoh penggunaan:

echo source_set('/lot/asset/test.jpg', [100, 200, 300]);

[yuliakbard]

kang, ini output srcsetnya seperti ini, gak muncul gambarnya
https://cdn.statically.io/img/www.domain.com/w=100/https://www.domain.com/lot/asset/.cache/26/f9/05/e4/28/52/64/9d/e8/d6/b1/05/78/58/2b/5e.jpg 100w, https://cdn.statically.io/img/www.domain.com/w=200/https://www.domain.com/lot/asset/.cache/26/f9/05/e4/28/52/64/9d/e8/d6/b1/05/78/58/2b/5e.jpg 200w, https://cdn.statically.io/img/www.domain.com/w=300/https://www.domain.com/lot/asset/.cache/26/f9/05/e4/28/52/64/9d/e8/d6/b1/05/78/58/2b/5e.jpg 300w

pas ane kroscek secara manual url gambar yang muncul itu seperti ini:
https://cdn.statically.io/img/www.domain.com/w=300/lot/asset/.cache/26/f9/05/e4/28/52/64/9d/e8/d6/b1/05/78/58/2b/5e.jpg

Gimana cara mengatasinya kang?

ane panggilnya seperti ini
<?=source_set($page->image(600,600,100), [100, 200, 300]);?>

[taufik-nurrohman]

< v3.0.0

<?= source_set(URL::short($page->image), [100, 200, 300]); ?>

>= v3.0.0

<?= source_set(short($page->image), [100, 200, 300]); ?>

[yuliakbard]

mecha v3.0.0 itu udah versi stabil kah kang?

[taufik-nurrohman]

Belum mas 😄

Targetnya nanti mau Saya lengkapi dengan fitur basis data (sebagai ekstensi terpisah).

Cek proyek eksperimen basis data Saya di sini.

[yuliakbard]

pantesan, saya coba jalankan di localhost muncul pesan error. hehehe. oke deh kang, nanti di pantau deh update-an nya

[lokersumatera]

cara menggunakannya dalam bentuk file php gimana penulisan functionnya kang?

function source_set(string $source, array $set = []) {
    $out = [];
    $source = ltrim($source, '/');
    // <https://statically.io/docs/using-images>
    foreach ($set as $v) {
        $out[] = 'https://cdn.statically.io/img/' . $_SERVER['HTTP_HOST'] . '/w=' . $v . '/' . $source . ' ' . $v . 'w';
    }
    return implode(', ', $out);
}

biar bisa dipanggil seperti ini:
<?=self::source_set(URL::short($page->image), [240, 360, 600])?>

[yuliakbard]

kang, kalau url gambar dari blogger, gimana replace size nya kang, ane masih mau ngandelin penyimpanan gambar di blogger. gak kuat dana kalau nyimpan di hosting. hehehe

$url = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj98Uumck9jAwE001VwF5fSs7NZ0pvWTNz51JlZJ7JetW63sM0PdKkdV8THZz3zcq2HXATLLo8EH-9i6UcTqvs78f_EtWCUWI9QxDl1sJq6tRf8NpdqK8jrnkbuXTXQb2NlsGL_itKRaYCztSlmsFr6TtfdtB5XzX7P9L6r1OfVn7qGvvEgZB5ycCgv/s1280/Loker%20Sumatera%20-%20Barbekyu%20Steakhouse.jpg'
$replace = '/\/s[0-9]{2}-(w[0-9]+-)?c/'
$size = 's600'

[yuliakbard]

kalau misalkan, kita make url gambar secara eksternal, gimana cara nambahin gambar tersebut menjadi gambar featured image, yang bisa muncul juga di feed.xml? apa itu memungkinkan kang?

[taufik-nurrohman]

$url = preg_replace($replace, $size, $url);

[taufik-nurrohman]

Kalau pakai ekstensi image si seharusnya akan secara otomatis bisa.

[yuliakbard]

Kang, kenapa srcset ane gak jalan di gambar pertama di setiap halaman, gambar 2, 3, dst. ke render?

[yuliakbard]

Kang, kenapa disetiap hasil url sourceset pertama ane, outputnya NULL? di gambar ke dua, ke tiga outputnya normal

[yuliakbard]

tinggal beberapa permasalahan basiclagi nih, baru bisa dengan tenang ane desain website menggunakan mecha.

1. sourceset [done]
2. next pager [not solved] untuk versi 2.6.4 alternatifnya baru menggunakan javascript.
3. url gambar eksternal gak kebaca di feed.xml [not solved]
4. custom panel, masih progress. karena belum ada dokumentasi lengkap untuk penggunaannya [on progress]
5. menyisipkan iklan di setiap beberapa artikel di halaman index/ homepage [not solved]
6. untuk tag label, hanya bisa linear. kalau ada sub halaman, tag label nya ngikut di sub halaman, mau ane walaupun ada sub halaman tagnya itu tetap ngikut parentnya.

[taufik-nurrohman]

Untuk poin 2, pakai versi pre-release harusnya sudah bisa. Di repo dan situs web memang belum tampak, tapi bisa dicoba pasang pakai Composer.

composer create-project mecha-cms/mecha .
composer require mecha-cms/x.panel

Poin 3 bisa dijadikan isu untuk ekstensi feed dan image.

Poin 5 dan 6 bisa dibuat sebagai diskusi tersendiri.

[yuliakbard]

penggunaan composer bagus juga nih kang, dari kemarin ane cuma download langsung di github. wkwk

[yuliakbard]

cara menginstal layoutnya disimpan di folder y kah kang?

[taufik-nurrohman]

Iya. Versi 3.0.0 nanti akan mengembalikan fitur layout switcher.

[yuliakbard]

untuk url gambar eksternal yang tidak terbaca di feed.xml gimana cara mengatasinya kang? sedangkan gambar internal bisa muncul di feed.xml

[yuliakbard]

untuk panelnya ane menggunakan

        $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['page']['lot']['fields']['lot']['organization_logo'] = [
            'title' => 'Logo Perusahaan',
            'description' => 'isi Link Logo.',
            'type' => 'field/link',
            'name' => 'page[organization_logo]',
            'value' => $page['organization_logo'],
            'width' => true,
            'stack' => 2.8
        ];

penggunaan, yang ane terapkan di layout seperti ini: $image = $page->organization_logo??$page->image