# Articles

### Usage

The articles can be used when creating a blog or news section for your website.

### Fields

#### **Title & Content**

The title, content and meta description fields are translatable so if your website is available in more than one language you will see flag icons at the top of the page. Clicking a flag will switch to the tab that contains fields for the selected language. The "title" and "content" fields are required (in all languages).

{% hint style="success" %}
Translations are possible thanks to the [spatie/laravel-translatable](https://github.com/spatie/laravel-translatable) package.
{% endhint %}

<div align="left"><img src="https://582218703-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0JvlXkNR9xWhK_ij0j%2F-M23uHAyTFlBSt7I3fUk%2F-M23vAZEjsfaNfhLaG_n%2Fadmin_articles_1.gif?alt=media&#x26;token=684dd65b-d42c-4e76-a5a4-e5866ad3e6eb" alt=""></div>

&#x20;The "**meta description**" field can be connected to the "description" meta tag in the front-end:

```markup
<meta name="description" content="{{ $article->meta_desc }}">
```

#### **Custom URL**

Each article must have a unique custom "**SEF URL**" (search friendly url or **custom url**). So for example if your website is available at **<https://mysite.com>** and you have entered "**my\_article**" for a custom url your visitors can access it on this address: **<https://mysite.com/my\\_article>**

<div align="left"><img src="https://582218703-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0JvlXkNR9xWhK_ij0j%2F-M23uHAyTFlBSt7I3fUk%2F-M23vJMVr2g63DmYC21d%2Fadmin_articles_3.png?alt=media&#x26;token=9f6386c7-2824-4d22-9479-7e8f1cf1778f" alt=""></div>

{% hint style="success" %}
Search engine friendly URLs thanks to the [taffovelikoff/laravel-sef](https://github.com/TaffoVelikoff/laravel-sef) package.
{% endhint %}

#### **Image attachments**

If you prefer you can disable the file manager from the [WYSIWYG editor](#tinymce) and use the "**Attach Images**" field. This way you can specify in the templates exactly where and how the images should be displayed. The WYSIWYG editor gives the admin the option to place any image anywhere in the content, but say you want to have a header image or maybe place a few images in a carousel for example, then it's better to use the "**Attach Images**" field. Here is an example of how to display a carousel in the front-end using the attached images:

```markup
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    @foreach($article->attachmentsGroup('images') as $image)
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="{{ $image->filepath }}">
            </div>
        </div>
    @endforeach
</div>
```

With the **thumbnail()** helper function you can generate a thumbnail with custom dimensions. You can use CSS to resize the image in the front-end, but **thumbnail()** will create a cached version of the image with the given dimensions, hence speeding up the loading time for the page. You can learn more about the function in the "**Helpers**" section of this documentation.

```
{{ thumbnail($image->filepath, '500x500') }}
```

{% hint style="success" %}
Attachments are available thanks to the [bnbwebexpertise/laravel-attachments](https://github.com/bnbwebexpertise/laravel-attachments) package.
{% endhint %}

#### **Tags**

You can tag articles. This gives you some additional functionalities:

```php
use TaffoVelikoff\HotCoffee\Article;
...
$article = Article::find(1); // get article with id 1

$article->tagNames(); // get array of related tag names

Article::withAnyTag(['Gardening','Cooking'])->get(); // fetch articles with any tag listed

Article::withAllTags(['Gardening', 'Cooking'])->get(); // only fetch articles with all the tags

Article::withoutTags(['Gardening', 'Cooking'])->get(); // only fetch articles without all tags listed

Article::existingTags(); // return collection of all existing tags on any articles
```

{% hint style="success" %}
Tagging is possible thanks to the [rtconner/laravel-tagging](https://github.com/rtconner/laravel-tagging) package.
{% endhint %}

### TinyMCE

[TinyMCE](https://www.tiny.cloud/docs/) is used as the WYSIWYG editor for the content field. You can easily change text color, size and **fonts**, add multimedia and much more. You can also link resources directly from the "**File Manager**" module.

<div align="left"><img src="https://582218703-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0JvlXkNR9xWhK_ij0j%2F-M23uHAyTFlBSt7I3fUk%2F-M23vQEz-hVhSsIMbI6F%2Fadmin_articles_2.png?alt=media&#x26;token=4ccede88-d6cf-4b41-9d06-26e0de0fd666" alt=""></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taffo.gitbook.io/hotcoffee/modules/articles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.