Accessing via HTML or PHP

[seanjkanderson]

How does one access components like slugs, albums, photos (under "Documentation") using HTML or PHP?

It doesn't seem like the syntax for markdown will work and not sure how to use SELF in this context?

EDIT: I basically want to be able to retrieve a list of the albums, open particular albums, and get lists of the photos in that album by url. Is that possible here?

Thanks!

[graker]

It works the same was it works for other components in October. For the list of albums you add Albums component to the page, for the listing of photos in specific albums you add Album component to the page. You do it the same way you do with RainLab.Blog for example.

[seanjkanderson]

Thanks. I'm still fairly new to working with components. I've basically just used the native components for accessing media, etc.

I've got the PhotoAlbums components added to my page of choice, but do I need to set anything in order to get all of the albums (in some sort of list/set object) or what's the proper syntax to access it? I was trying to dump the parameters from the different components but wasn't seeing anything printed out. I do have one album with a couple test images so far.

Cheers.

On Mon, Oct 12, 2020 at 1:55 AM Graker notifications@github.com wrote:

It works the same was it works for other components in October. For the list of albums you add Albums component to the page, for the listing of photos in specific albums you add Album component to the page. It works same way as you do with RainLab.Blog for example.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/graker/oc-photoalbums-plugin/issues/11#issuecomment-706981683, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI2REQZMDEQ3QON2I7QVMZ3SKLAANANCNFSM4SMBOQDQ .

[graker]

You attach the component to your page, set up the parameters in component's config, print it in page template, e.g. {% component "albumList" %} and that's basically it.

[graker]

If you want to alter the component's output, for example, change how each album is rendered, you copy the partial template of corresponding component to your theme and make the changes you need there.

[graker]

If you need further help, please provide some code examples and information on what you've got so far and what is that you're trying to achieve.

[seanjkanderson]

Thanks @graker.

I'm using lightslider for displaying some photos right now, but I want a better backend experience for managing the photos than just using the native octobercms "Media" plugin. What I would like to do is continue to use lightslider for the frontend and photoalbums for the backend UI/image organization. My understanding is that with PhotoAlbums I can

1) get the set of all albums, extract their handles and thumbnail/low-res image cover, and use that to generate the available albums (see what I have already on this test site). I already have the formatting I desire, so I just want to be able to get the url for each album and their associated cover photo. Pseudocode: albums_list = retrieve_existing_albums_from_photoalbums() for album in albums_list: album_handle, cover_image_url = extract_relevant_properties(album) display_necessary_info_on_page(album_handle, cover_image_url)

2) given an album name/url, get the ordered urls for all the photos in the album. Right now, I have folders in Media that are filled with the photos for each "collection/album" that I want to make. This just makes it difficult to reorder photos, add any metadata etc, so I'd like to use PhotoAlbums. This creates a gallery in my paradigm (e.g. desert. ordered_photos_url_list = retrieve_photos(album_name) for photo_url in ordered_photos_url_list: display_formatted_photo(url=photo_url)

Is this possible? I can handle the frontend formatting, I just am having trouble accessing url parameters from any of the attached components. Is there a good way to print out the properties for each component? I've tried using this: "{{ dump(this.page.components['albumList'].properties) }}" but it is somewhat opaque to me. If I could walk the structure, that would be easiest I think.

Many thanks!

[graker]

I still don't understand the issue :) Here's the default template to render Album component. See this cycle:

{% for photo in album.photos %}
        <div class="photo col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <a href="{{ photo.url }}"><img
                    data-src="{{ photo.thumb }}"
                    src="{{ photo.thumb }}"
                    alt="{{ photo.title }}"
                    title="{{ photo.title }}"
                    style="max-width: 100%" />
            </a>
            <a href="{{ photo.url }}"><strong>{{ photo.title }}</strong></a>
        </div>
    {% else %}
        <div class="col-xs-12 no-data">Album doesn't have any photos yet</div>
    {% endfor %}

The cycle is going over each photo and accessing it's properties. Isn't it what you need?

If you want to go straight for image file url instead of photo's page url, you can check out this template that renders a separate photo page. See how IMG tag is rendered:

<img
                data-src="{{ photo.image.filename }}"
                src="{{ photo.image.path }}"
                alt="{{ photo.title }}"
                title="{{ photo.title }}"
                style="max-width: 100%" />

Try to go for photo.image.path in your album's template. Or you can configure thumbs in album component to fit your needs.

[seanjkanderson]

I think my issue is actually more basic.

Right now, when I set up the page, I originally thought I was going to add the components (similarly to RainLab.Blog) like:

title = "TEST"
url = "/test"
layout = "default"

[album]
slug = "mountains"
[albumList]
[photo]
[randomPhotos]

However, only albumList and randomPhotos allow for the page to load (in debug mode). The other two throw:

Class name is not registered for the component "album". Check the component plugin. .../modules/cms/Classes/ComponentManager.php line 199

Is this an install issue, or the incorrect name for album and photo?

Furthermore, albumList does not seem to register that one album does in fact exist:

title = "TEST"
url = "/test"
layout = "default"

[albumList]
==
==
{% for album in albumList %}
        <div class="album-preview col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <h3><a href="{{ album.url }}">{{ album.title }}</a></h3>
            <a href="{{ album.url }}">
                <img
                    data-src="{{ album.latestPhoto.thumb }}"
                    src="{{ album.latestPhoto.thumb }}"
                    style="max-width: 100%" />
            </a>
            Created on {{ album.created_at|date('M d, Y') }}
            {{ album.photo_count }} images
        </div>
    {% else %}
        <div class="col-xs-12 no-data">You have not created any albums yet</div>
    {% endfor %}

Which returns:

You have not created any albums yet

Is this an incorrect usage of albumList?

Thanks again.

[graker]

@seanjkanderson ,

It seems from the first code sample that you haven't set component parameters. Check out how I attach album list to my page:

[albumList]
title = "Galleries"
url = "/galleries"
layout = "default"
description = "Galleries page"
is_hidden = 0

[albumList]
albumPage = "album"
thumbMode = "crop"
thumbWidth = 640
thumbHeight = 480
albumsOnPage = 30
==
<div class="blog-posts">
    <h2>Galleries</h2>
    {% component "albumList" %}
</div>

See those params under [albumList]? I think albumPage is mandatory.

Also, have you had the plugin installed properly, with migrations etc? Do you see your one existing album here: /backend/graker/photoalbums/albums? Because this plugin can not pick up your Media content, you have to create albums and upload photos via PhotoAlbums backend.

[graker]

Also I'm not sure this would work:

[album]
slug = "mountains"
[albumList]
[photo]
[randomPhotos]

because two components here definitely require different slugs to pick up album and photo.

Could you maybe try to create several test pages and display components one by one to figure out what you can do with them?

[graker]

Also, for the Album component ([album]), did you add it via page backend, or manually in the template? Because when I add it to a page via backend, it's default alias is photoAlbum, not album, see this example:

title = "Photo album"
url = "/galleries/:slug"
layout = "default"
description = "Single album page"
is_hidden = 0

[photoAlbum]
slug = "{{ :slug }}"
photoPage = "photo"
thumbMode = "crop"
thumbWidth = 640
thumbHeight = 480
photosOnPage = 30
==
<div class="photo-album">
    {% component "photoAlbum" %}
</div>

Same goes for photo component, it's default alias is singlePhoto. Try to add it via backend's CMS page.

[seanjkanderson]

So I can I get this to work (it displays the two existing albums):

title = "TEST"
url = "/test"
layout = "default"

[albumList]
albumPage = "albums"
thumbMode = "crop"
thumbWidth = 640
thumbHeight = 480
albumsOnPage = 30

==

<body>
    {% component "albumList" %}
</body>

However, this just prints out "You have not created any albums yet":

title = "TEST"
url = "/test"
layout = "default"

[albumList]
albumPage = "albums"
thumbMode = "crop"
thumbWidth = 640
thumbHeight = 480
albumsOnPage = 30

==

<body>

    {% for album in albumList %}
        <div class="album-preview col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <h3><a href="{{ album.url }}">{{ album.title }}</a></h3>
            <a href="{{ album.url }}">
                <img
                    data-src="{{ album.latestPhoto.thumb }}"
                    src="{{ album.latestPhoto.thumb }}"
                    style="max-width: 100%" />
            </a>
            Created on {{ album.created_at|date('M d, Y') }}
            {{ album.photo_count }} images
        </div>
    {% else %}
        <div class="col-xs-12 no-data">You have not created any albums yet</div>
    {% endfor %}

</body>

Should I be iterating over a different object?

[seanjkanderson]

I think I've found a different solution now that will be easier for my purposes. Thanks for your help!

[graker]

Okay, now I see it doesn't have anything to do with the plugin :)

Should I be iterating over a different object?

You shouldn't have replaced {% component "albumList" %} with your cycle to begin with, because that's not how it works in October. If you wanted to replace the default component markup with your code, you should have overrode component's partial as I suggested earlier. See this in docs: https://octobercms.com/docs/cms/components#overriding-partials they explain there, where you should put your custom markup for the component.

Because when you remove {% component "albumList" %} from the page it means that October doesn't see the component anymore. So your cycle will always yield You have not created any albums yet because the system doesn't know what is that albumsList you're iterating over.

[seanjkanderson]

I see now. Thanks very much for your help @graker!

On Tue, Nov 17, 2020 at 11:41 AM Graker notifications@github.com wrote:

Okay, now I see it doesn't have anything to do with the plugin :)

Should I be iterating over a different object?

You shouldn't have replaced {% component "albumList" %} with your cycle to begin with, because that's not how it works in October. If you wanted to replace the default component markup with your code, you should have overrode component's partial as I suggested earlier. See this in docs: https://octobercms.com/docs/cms/components#overriding-partials they explain there, where you should put your custom markup for the component.

Because when you remove {% component "albumList" %} from the page it means that October doesn't see the component anymore. So your cycle will always yield You have not created any albums yet because the system doesn't know what is that albumsList you're iterating over.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/graker/oc-photoalbums-plugin/issues/11#issuecomment-729157681, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI2REQ7KTRI5PO4C63HBC2TSQLGWHANCNFSM4SMBOQDQ .