innhold/content/docs/utvikling/hvordan/add-images/page.md

Hvordan legge til bilder

Lær hvordan du legger til og administrerer bilder i PnP.

Grunnleggende bildebruk

Legg til bilder i samme mappe som innholdet

Den enkleste måten å legge til bilder på er å plassere dem i samme mappe som innholdsfilen:

/content/blogg/mitt-innlegg/
  ├── article.md
  ├── bilde1.jpg
  └── bilde2.webp

Deretter refererer du til dem i markdown:

![Beskrivelse av bildet](bilde1.jpg)

Relative stier

PnP sikrer at relative stier fungerer korrekt ved å automatisk legge til skråstrek på slutten av URL-er. Dette betyr at bilder i samme mappe alltid fungerer.

Forsidebilder (Cover images)

For blogginnlegg og artikler kan du legge til et forsidebilde som vises i listevisninger:

1. Navngi bildet cover.jpg, cover.webp, cover.png, eller cover.gif
2. Plasser det i samme mappe som innholdet
3. PnP viser det automatisk i listevisninger

/content/blogg/mitt-innlegg/
  ├── article.md
  ├── cover.webp
  └── andre-bilder.jpg

Anbefalte bildeformater

WebP

Bruk WebP for beste kompresjon og kvalitet:

![Beskrivelse](bilde.webp)

JPEG

Bruk JPEG for fotografier:

![Foto](foto.jpg)

PNG

Bruk PNG for grafikk med gjennomsiktighet:

![Logo](logo.png)

SVG

Bruk SVG for vektorgr grafikk (logoer, ikoner):

![Ikon](ikon.svg)

Optimalisere bilder

Komprimering

Komprimer bilder før du laster dem opp:

• JPEG: Bruk 80-85% kvalitet
• WebP: Bruk 80-85% kvalitet
• PNG: Bruk verktøy som pngcrush eller optipng

Responsiv størrelse

Skalér bilder til passende størrelse:

• Full bredde: Maks 1920px bredde
• Forsidebilder: 800-1200px bredde
• Ikoner: 200-400px bredde

Bruke bilder i egendefinerte maler

I listemaler er forsidebilder tilgjengelige via $item['cover']:

<?php foreach ($items as $item): ?>
    <article>
        <?php if ($item['cover']): ?>
            <img 
                src="<?= $item['cover'] ?>" 
                alt="<?= htmlspecialchars($item['title']) ?>"
                loading="lazy"
            >
        <?php endif; ?>
        <h2><?= htmlspecialchars($item['title']) ?></h2>
    </article>
<?php endforeach; ?>

Lazy loading

Bruk loading="lazy" for bilder som ikke er synlige umiddelbart:

<img src="bilde.jpg" alt="Beskrivelse" loading="lazy">

Dette forbedrer sidelastingstiden betydelig.

Tilgjengelige bildestier

Bilder plassert i innholdsmapper er automatisk tilgjengelige via URL-en:

/content/blogg/mitt-innlegg/bilde.jpg
→ dinside.no/blogg/mitt-innlegg/bilde.jpg

Delte bilder

For bilder som brukes på flere sider, plasser dem i /app/custom/assets/images/:

/app/custom/assets/images/logo.svg
→ dinside.no/images/logo.svg

Deretter refererer du til dem med absolutte stier:

![Logo](/images/logo.svg)