Website preview image

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Website preview image

Lieven Litaer
Hi there,

I got a question:

You all know that when you post a website on facebook, there is an image
chosen for preview. I noticed that from the foswiki page, it usually
picks the WebTopBar image - and I don't want that.

I have found a way to install ageneric image for each page (using "meta
property="og:image"), which is perfect in the first step. Nevertheless,
sometimes I'd like to show a photo used on the page.

My wish:
Is there a way to set the preview image in a way that "IF image is
displayed in the topic, then show it, ELSE show the generic image"?

Thanks,
   Lieven.
   Klingon Language Wiki Admin.
   klingonwiki.net

------------------------------------------------------------------------------
_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Website preview image

BramVanOosterhout
Hi Lieven
I don't know the internals of your site.  But what you want can be achieved
in principle with the following steps.

1. Assume we are processing ThisTopic

2. search the topic to find an image; %SEARCH{ search="IMAGE"
topic="ThisTopic" format="$pattern(...whatever ...) capturing the image
location" }%
   + If you use FilterPlugin you can probably use EXTRACT

3. Now you can use %CALCULATE{ $IF(...) }% from the speadsheet plugin to
decide what happens next. For instance
      %CALCULATE{$IF{$LENGTH(%SEARCH{...}%)>0),Insert image from
ThisTopic,Insert default image)}%

Something like this.

How exactly you find the image, how you format the search result and how you
get the selected image to display depends entirely of how your site organises
these things.

A word of warning: SpreadSheetPlugin is finicky with whitespace and quoting.
Don't quote strings.

%IF{...}% does not support selection on arbitrary strings to the best of my
knowledge. You may get it to work by putting the %SEARCH{...}% result in a
parameter to an include, with the include returning the resulting image.
 
If you want more help, I would need to know the details of the constructs to
search for and the desired results.

Hope this helps. Let us know how you go.

--
Bram van Oosterhout


------------------------------------------------------------------------------
_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Website preview image

Lynnwood Brown
In reply to this post by Lieven Litaer
Lieven -
Here's an idea of a fairly simple hack that represents part of the solution to your question:
- Create a skin template called something like "fb.view.tmpl".
- The first line of your template will have simply %TMPL:INCLUDE{"view"}% which will pull in all the skin definitions of your default skin.
- Then add one TMPL:DEF section that corresponds to the block of your default skin that defines the top-bar section containing the WebTopBar image. For pattern skin, I believe this is the "topbar" section (which is defined in viewtopbar.pattern.tmpl). For NatSkin, it's simply the "logo section (defined in foswiki.nat.tmpl).
- Copy the original version of that template into your fb.view.tmpl file and then modify it to make whatever conditional image reference meets your needs.
- Finally, when you make a post in Facebook, just add a "cover" url parameter. Something like this: "http://myfoswikisite.com?cover=fb"

The main benefits I see in this methods are:
1. It's easy to do.
2. It only modifies the "normal" view of your site for the Facebook post. If a visitor navigates away from the original posted link, your regular skin applies.

Regarding design of the conditional statement to identify what image to display in the header, here's one variation that I've used for similar purpose:
<img src='%FORMATLIST{"%QUERY{"'%BASEWEB%.%BASETOPIC%'/attachments.name"}%" limit="1" format="%PUBURLPATH%/%BASEWEB%/%BASETOPIC%/$1" null="$percntWIKILOGOIMG$percnt"}%'>
This simply looks if there is an image attached to the topic and displays. If not, it defaults to the image referenced by WIKILOGOIMG preference setting.

Hope this helps!
- Lynnwood Brown

> On Sep 19, 2016, at 3:21 AM, Lieven Litaer <[hidden email]> wrote:
>
> Hi there,
>
> I got a question:
>
> You all know that when you post a website on facebook, there is an image
> chosen for preview. I noticed that from the foswiki page, it usually
> picks the WebTopBar image - and I don't want that.
>
> I have found a way to install ageneric image for each page (using "meta
> property="og:image"), which is perfect in the first step. Nevertheless,
> sometimes I'd like to show a photo used on the page.
>
> My wish:
> Is there a way to set the preview image in a way that "IF image is
> displayed in the topic, then show it, ELSE show the generic image"?
>
> Thanks,
>   Lieven.
>   Klingon Language Wiki Admin.
>   klingonwiki.net
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Foswiki-discuss mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/foswiki-discuss


------------------------------------------------------------------------------
_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Website preview image

Chris Hoefler
In reply to this post by BramVanOosterhout
The question, as I understand it, is "How do I set a custom <meta> tag based on the existence (or not) of a particular image attached to the topic?"

The answer to the generic question, "How do I set a custom <meta> tag?", which you seem to have already figured out, is use <a href="https://foswiki.org/System/SkinTemplates">Skin Templates</a>. A very quick and dirty way is to set a default VIEW_TEMPLATE for your web (Set VIEW_TEMPLATE = MyView in WebPreferences), create a MyViewTemplate topic, and embed an %ADDTOZONE% directive in one of the %TMPL:DEF% blocks from view.tmpl. I use this approach quite often (as opposed to writing an actual .tmpl file) because it is much easier to "edit as you go" if you are tweaking, or "copy and change" if you want to quickly make a template derivative for another subset of topics. You can also write your own skin overlay, but I see this mostly as a way to make complex and semi-permanent changes to whole webs (as opposed to minor tweaks to subsets of topics), so I rarely do that.

To answer your (reworded) specific question, "How do I make %ADDTOZONE% conditionally dependent on the existence of an image attached to the topic?", I can think of three ways off of the top of my head, dependent on how you have decided to attach and organize these images.
  Scenario 1: Preview images are attached to the topic and named consistently (ex: "preview.gif"). Default image is stored in a fixed location (ex: /pub/System/MySkin/default_preview.gif).
  Solution: use block parameters in your %TMPL:DEF%. Ex:
    %TMPL:DEF{"setmeta" image="%PUBURLPATH%/%SYSTEMWEB%/MySkin/default_preview.gif"}%
      %ADDTOZONE{"head" id="PreviewImage" text="<meta content='%image%' property='og:image' />"}%
    %TMPL:END%

    %TMPL:DEF{"content"}%
      %TMPL:PREV%
      %TMPL:P{"setmeta" image="%IF{"'%TOPIC%'/attachments[attachment='preview.gif']" then="%ATTACHURLPATH%/preview.gif" else="%PUBURLPATH%/%SYSTEMWEB%/MySkin/default_preview.gif"}%"}%
    %TMPL:END%

  Scenario 2: Preview images are attached to the topic, but are not consistently named. You will use any image attached to the topic, or the first if there are multiple images.
  Solution: As above, but change the %IF% to a %SEARCH%

  Scenario 3: Preview images are not necessarily attached to the topic, but the location is known and can be specified in a topic form field (see <a href="https://foswiki.org/System/DataForms">Data Forms</a>)
  Solution: As above, but change the %IF% to a %QUERY% for the proper form field

As you can see, the specific answer depends on how you organize your wiki, and the more organized the easier it is to implement what you want.

On Tue, Sep 20, 2016 at 5:26 AM, Bram van Oosterhout <[hidden email]> wrote:
Hi Lieven
I don't know the internals of your site.  But what you want can be achieved
in principle with the following steps.

1. Assume we are processing ThisTopic

2. search the topic to find an image; %SEARCH{ search="IMAGE"
topic="ThisTopic" format="$pattern(...whatever ...) capturing the image
location" }%
   + If you use FilterPlugin you can probably use EXTRACT

3. Now you can use %CALCULATE{ $IF(...) }% from the speadsheet plugin to
decide what happens next. For instance
      %CALCULATE{$IF{$LENGTH(%SEARCH{...}%)>0),Insert image from
ThisTopic,Insert default image)}%

Something like this.

How exactly you find the image, how you format the search result and how you
get the selected image to display depends entirely of how your site organises
these things.

A word of warning: SpreadSheetPlugin is finicky with whitespace and quoting.
Don't quote strings.

%IF{...}% does not support selection on arbitrary strings to the best of my
knowledge. You may get it to work by putting the %SEARCH{...}% result in a
parameter to an include, with the include returning the resulting image.

If you want more help, I would need to know the details of the constructs to
search for and the desired results.

Hope this helps. Let us know how you go.

--
Bram van Oosterhout


------------------------------------------------------------------------------
_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss


------------------------------------------------------------------------------

_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Website preview image

BramVanOosterhout

Thanks Chris,

I finally understand the use of parameters on TMPL:DEF and TMPL:P.

And the use of TMPL:PREV. Very nice :-)

Bram

--
Bram van Oosterhout


------------------------------------------------------------------------------

_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Website preview image

Chris Hoefler
Sure. ;-)

Took a bit of head-scratching to figure them out at first, but I now find them indispensable.

On Tue, Sep 20, 2016 at 10:28 PM, Bram van Oosterhout <[hidden email]> wrote:

Thanks Chris,

I finally understand the use of parameters on TMPL:DEF and TMPL:P.

And the use of TMPL:PREV. Very nice :-)

Bram

--
Bram van Oosterhout


------------------------------------------------------------------------------

_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss



------------------------------------------------------------------------------

_______________________________________________
Foswiki-discuss mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/foswiki-discuss