Big photo in first article

[Krzyzak]

Hi all.
I want to make quite big topic icon (or photo related to article, however) in first news- in other I want to have smaller one- I mean something like this:
Is it possible to do in Serendipity? If yes, how?
I would be greatful for any ideas how can I solve my problem.

[stm999999999]

and the big picture of the first entry should became the same image but smaller, when there is a new first entry, right?

[d_cee]

Hi there

you could use the photoblog plugin which only shows a full size image in the latest entry along with the media manager thumbnails for the smaller images.

sorry for the short reply - no time this morning

HTH

Dave

[Krzyzak]

stm999999999 - right.
d_cee - I`ll check it - If I`ll have some problems, I`ll write here:)

[Krzyzak]

ok, photoblog installed, full size image works. But currently, it works in everyone entry- I want to have full size in first entry, and then use the same but smaller one- I think, that I must do it in entry template- but how- I`ve got no idea :/

[judebert]

For this to work, you're going to need to know what the size of that image is. Then go into your template's entries.tpl (copy the one from the templates/default/ directory if your template doesn't have one) and find where the category icon is displayed:

Code: Select all

            <span class="serendipity_entryIcon">
            {foreach from=$entry.categories item="entry_category"}
                {if $entry_category.category_icon}
                    <a href="{$entry_category.category_link}"><img class="serendipity_entryIcon" title="{$entry_category.category_name|@escape}{$entry_category.category_description|@emptyPrefix}" alt="{$entry_category.category_name|@escape}" src="{$entry_category.category_icon}" /></a>
                {/if}
            {/foreach}
            </span>

That's inside a foreach loop that goes through each entry:

Code: Select all

        {foreach from=$dategroup.entries item="entry"}

Change the foreach loop so it has a name:

Code: Select all

        {foreach name="entryloop" from=$dategroup.entries item="entry"}

And you can check to see if this is the first entry, and make appropriate changes:

Code: Select all

{if $smarty.foreach.entryloop.first}
            <span class="serendipity_entryBigIcon">
{else}
            <span class="serendipity_entryIcon">
{/if}
            {foreach from=$entry.categories item="entry_category"}
                {if $entry_category.category_icon}
                    <a href="{$entry_category.category_link}"><img class="serendipity_entryIcon" title="{$entry_category.category_name|@escape}{$entry_category.category_description|@emptyPrefix}" alt="{$entry_category.category_name|@escape}" src="{$entry_category.category_icon}" /></a>
                {/if}
            {/foreach}
            </span>

Finally, change the style.css (again, copy from templates/default if your template doesn't have one, but it ought to have one) and copy the lines for serendipity_entryIcon to serendipity_entryBigIcon and make the size larger.

Alternatively, if you make your own larger-size thumbnails, you can name them in some reliable fashion and replace the "{$entry_category.category_icon}" with "{$entry_category.category_icon}_big" or similar.

[Krzyzak]

hmmm... is it possible to solve my problem through media library? For example in first entry- full-sized image, in rest- thumb only -if not, eventually I`ll do it through category images.
BTW: judebert, thx for wide answer

[judebert]

While the solution I provided does use the Media Library, the Media Library is not capable of providing all the features you desire by itself.

We'd need two image sizes specific to the category image: big and small. That would have to be separate from the thumbnail setting. The Media Library only supports one image size.

The big requirement that cannot be satisfied is changing from the large thumbnail to the small one automatically when the entry is not the first. For that, you either need to manually add the big image to the entry, and change it when you add new entries; or you need some way to automatically determine when the entry is the first in the list.

The Smarty template changes I gave you will do the automatic determination. Then you just need to provide the two sizes of icon.

I don't think CSS provides any cross-browser way to determine the first entry in a list. (More likely, CSS does provide something, but not many browsers support it yet.)

The only other way to do the automatic detection would be to add it to the PHP code somewhere. But that would violate the "separation" concept that we're trying to achieve through Smarty templating.