Article Image then Title H1

jaser · 2016-05-28 12:26:42

I am trying to produce a tumblog style theme. It has probably been answered before
somewhere I can’t figure it out.

Main article list how to have title after the main article image.

What about if it is a video in the code of the article body.
Is there a way to get it first before the title?

Thanks in advance for your help :)

NicolasGraph · 2016-05-28 12:45:20

To display the main image before the title, move the <txp:article_image /> stuff before your h1.

Then for the video I would suggest you to:
1. paste your video code in the article image field and then check its content;
or, easier:
2. use a custom field for your video and check which field is in use to output the article image or the video…

The second option can be achieve like this:

<txp:if_article_image>
    <txp:article_image />
<txp:else />
    <txp:custom_field name="video" />
</txp:if_article_image>

You can also check if the custom field is filled through a variable if needed…

Now it also depends of the way you embed your video, custom fields are limited to 255 characters by default, but you should be able to use the video url only in a perfect world…

Edited to complete.

Last edited by NicolasGraph (2016-05-28 13:39:44)

jaser · 2016-05-28 16:12:16

Thanks:) I have got the video loaded in the right place before H1 heading text. Using the custom field.
The only problem is if there is no image assigned or custom field. It just leave a blank space the same shape.
I have got the video in a div & iframe.

How do I make it collapse this space if not video/image is available.
Is this what a variable is needed for?

Thanks again I’m new to this. My head is hurting a little.

Last edited by jaser (2016-05-28 16:18:10)

jaser · 2016-05-28 17:12:27

Managed to get that sorted by following my nose :)

<txp:if_custom_field name="custom1"> <div class='embed-container'><iframe src='<txp:custom_field name="custom1" />' frameborder='0' allowfullscreen></iframe></div> </txp:if_custom_field>

It is just the links are a bit tricky to get working. youtube are different to soundcloud.

Thanks for your help. textpattern is more powerful than at first glance.

NicolasGraph · 2016-05-28 18:41:57

jaser wrote #299347:

How do I make it collapse this space if not video/image is available.
Is this what a variable is needed for?

In fact you don’t really need a variable, as you saw you can directly check if a custom field is filled with the <txp:if_custom_field>.
Here is what you should now have:

<txp:if_article_image>
    <txp:article_image />
<txp:else />
    <txp:if_custom_field name="video">
        <txp:custom_field name="video" />
    </txp:if_custom_field>
</txp:if_article_image>

Edit: I don’t really understand what you meant about youtube, but arc_youtube could maybe help you…

Last edited by NicolasGraph (2016-05-28 18:48:24)

jaser · 2016-05-30 12:12:37

I tried doing as above & it just splits out the link. not hyperlinked.
I have put back the way it was before.

I am trying not to use any plug-ins.
Keeping it stripped down & lighweight.

NicolasGraph · 2016-05-30 12:47:39

jaser wrote #299366:

I tried doing as above & it just splits out the link. not hyperlinked.

Did you try escape=""? See doc.
Otherwise, if you’re happy with your solution, that’s fine.

GugUser · 2016-05-30 13:20:13

I think you should public your code. I’m sure that there is a solution to this problem.

jaser · 2016-06-01 12:40:42

Add which bit. The whole default form code?

colak · 2016-06-01 18:07:00

jaser wrote #299388:

Add which bit. The whole default form code?

Hi jaser,
Let’s start with that:)

jaser · 2016-06-04 12:53:06

As it stands at the moment.

<article role="article" itemscope itemtype="http://schema.org/Article">
<!-- if not an individual article then make the title h1 a link -->
<txp:if_article_image>
<txp:images auto_detect="article" >
<figure>
<txp:article_image />
<figcaption> <txp:image_info type="caption" class="article figcaption" /></figcaption>
</txp:images></figure> 
<txp:else />
<txp:if_custom_field name="video">
<div class='embed-container'><iframe src='<txp:custom_field name="video" escape="" />' frameborder='0' allowfullscreen></iframe></div>
</txp:if_custom_field>
</txp:if_article_image>
<h1 itemprop="name"><a href="<txp:permlink />" itemprop="url"><txp:title /></a></h1>
</txp:if_individual_article>
<txp:else />
</txp:if_individual_article>
<div itemprop="articleBody">
    <txp:if_article_list>
    <! -- list page: display the short version -- >
    <txp:excerpt />
    <txp:else />
    <! -- article page: display the complete article -- >
    <txp:body />
    </txp:if_article_list>
</div>
<!-- only display categories if they are actually set for an article, otherwise omit -->
<txp:if_article_category>
<p class="tags"><span itemprop="keywords"><txp:category1 title="1" link="1"/><txp:if_article_category number="1"><txp:if_article_category number="2">, </txp:if_article_category></txp:if_article_category><txp:category2 title="1" link="1" /></span></p>
<!-- </txp:if_article_category> in <txp:section link="1" title="1" /> -->

<p class="date"><strong><txp:text item="" /></strong> <txp:permlink><time datetime="<txp:posted format='iso8601' />" itemprop="datePublished"><txp:posted /></time></txp:permlink></p>
<hr class="rule" />
<p class="share"><txp:arc_social_share_twitter>Twitter</txp:arc_social_share_twitter>&nbsp; <txp:arc_social_share_facebook>Facebook</txp:arc_social_share_facebook>&nbsp;
<txp:arc_social_share_gplus>Google+</txp:arc_social_share_gplus>&nbsp; <txp:arc_social_share_tumblr>Tumblr</txp:arc_social_share_tumblr>
</p>

<!--  <p><strong><txp:text item="author" /></strong> 
<span itemprop="author"><txp:author link="1" this_section="1" /></span></p>
<p><strong><txp:text item="comments" /></strong> <a href="<txp:permlink />#comments-head" title="<txp:text item='view' />&#8230;" itemprop="discussionUrl" itemscope itemtype="http://schema.org/UserComments"> -->

<!-- if comments then display the number, if no comments then print 'none' -->
<!-- <txp:if_comments>
<span itemprop="interactionCount"><txp:comments_count /></span>
<txp:else />
<span itemprop="interactionCount"><txp:text item="none" /></span>
</txp:if_comments>
</a>
</p> -->
<!-- if this is an individual article then add the comments section via form: comments_display.article.txp -->
<txp:if_individual_article>
<txp:article form="comments_display" />
</txp:if_individual_article>
</article>

Moderator’s annotation:
Corrected Textile markup for code display.
– Uli –

Last edited by uli (2016-06-04 13:05:11)

GugUser · 2016-06-04 13:47:32

I think from your line 2 to line 17 it should be:

<!-- if not an individual article then make the title h1 a link -->

<txp:if_article_image>
<txp:images auto_detect="article">
<figure>
<txp:article_image />
<figcaption><txp:image_info type="caption" class="article figcaption" /></figcaption>
</figure>
</txp:images> 
<txp:else />
<txp:if_custom_field name="video">
<div class='embed-container'><iframe src='<txp:custom_field name="video" escape="" />' frameborder='0' allowfullscreen></iframe></div>
</txp:if_custom_field>
</txp:if_article_image>

<txp:if_individual_article>
<h1 itemprop="name"><txp:title /></h1>
<txp:else />
<h1 itemprop="name"><a href="<txp:permlink />" itemprop="url"><txp:title /></a></h1>
</txp:if_individual_article>

Last edited by GugUser (2016-06-04 13:51:03)

Textpattern CMS

Textpattern CMS support forum

#1 2016-05-28 12:26:42