How I can use article image in the responsive website txp 4.5.7?

lythande · 2015-02-21 04:10:31

I wish to still having responsive website, and in my article there should have article-images. But I dont sure how works responsive webdesign, so I can making much own for this and so I use this, what txp has show me in the normal-installation from txp 4.5.7 (much thanks for that!!!).

In the default-article-form there is not any image-tag.
The images-diverse-form sounds very good and has any things for responsive website. How I can use this for my article with article-image?
I dont understand really good, how work this images-form, how I can use it.
(I have not change the standard-forms “images” and “default”.)

My article should be shown in this kind:

title
date
comments (x)

image (if there is any article-image-number in the article)
excerpt (if there is one)
article-body (only show in the if_individual_article, if there is an excerpt)

comments-formular

uli · 2015-02-23 22:41:08

lythande wrote #288483:

The images-diverse-form sounds very good and has any things for responsive website. How I can use this for my article with article-image?

You could begin with a simple <txp:output_form form="images" /> tag, put exactly where you want your image to appear. Have you bookmarked the tag reference page of the Textpattern docs already? There’s also a category only for image tags.

lythande · 2015-02-25 17:55:04

Hi Uli,
much thanks (am liebsten würde ich deutsch schreiben, dann verstehe ich dich besser).
If I understand correct, I should in the content – write (Inhalt – Verfassen) in the new article put after the title this form-snippet? And the form would be understand, that he should get the article-image, which I say it in the article left bottom?
I know the referent-page and have the book “Textpattern Solutions”, but there is no an explaination (erklärung) for the responsive webdesign. and the form for “images” look very other than the normal tags, so I cant easy use the normal tags…
So I have ask for.

uli · 2015-02-25 20:11:47

I’ve changed my default forms, can’t seem to recall where they’re online. Anyways, with the requirements you described ~~it might be sufficient to drop this tag <txp:article_image /> in your article text where you want the image to appear,~~ (forget that, it’s not a new website) and (if necessary) add these lines of CSS to your style sheet, so to make the images respond to changing window widths:

#content img {
    max-width: 100%;
    height: auto;
}

With some more tags you could have an automatism for multiple images (comma separated inside the image field on the Write panel) and would not have to think of adding that tag each time, though images would only appear above or below the article text, not amongst it. Tags would then go into your article form (most probably the “default” one), above or below the body tag:

<txp:if_article_image>
  <txp:images id='<txp:custom_field name="article_image" />' sort=' field(id, <txp:custom_field name=''article_image'' />)' break="">
    <txp:article_image />
  </txp:images>
</txp:if_article_image>

BTW, if you prefer you can write in German and post that together with a Google translation of your text so not only German forum members can read here.

Last edited by uli (2015-02-25 20:35:20)

uli · 2015-02-25 20:34:53

You do have images already on yor website, just didn’t see too many from the start. So it might be sufficient to add that portion of CSS above to your style sheet.

lythande · 2015-02-25 22:02:12

Hi Uli,

the problem is on the new site, not on my main-website. The main-website have old html, having not html5 and is not responsive.
But yes, the Postcard-series on my main-website has article-images, with comma-separate, but I used the plugin smd_gallery. On the new website I dont use smd_gallery, because the image-tags are better now in txp.

I have tried out your form, ~~but still not worked~~ now it worked (i forgotten, that the output-form should have _ instead – ), but I get two errors, because the <txp:image_info ...> are outside from a image-context. I am looking now and say again, where is maybe the error.
Edit: Okay, I have found the error in this line: <txp:variable name="caption" value='<txp:image_info type="caption" />' />. The txp:image_info... here is not working, because there is no txp:image. I have hiding this: <txp:variable name="caption" value='<txp:hide><txp:image_info type="caption" /><txp:hide>' />.
Now the errors dont more, the image is show in the article-list and individual-article. :-)

I send you the website-url in a message, because its not open.

The code in the form “images” for HTML5, responsive webdesign from textpattern:

<!-- set up a variable to check whether a image also has a caption associated with it... -->
<txp:variable name="caption" value='<txp:image_info type="caption" />' />

<!-- ...now use that image caption and wrap img inside a figure with figcaption tags, otherwise just use a plain img tag -->
<txp:if_variable name="caption" value="">

<!-- image - overriding the width and height to let the image scale to fit parent container -->
  <p><txp:image width="0" height="0" /></p>

<txp:else />

  <figure itemscope itemtype="http://schema.org/ImageObject">

<!-- image - overriding the width and height to let the image scale to fit parent container -->
    <txp:image width="0" height="0" />

<!-- you do not need to specify the attribute type="caption" as that is the default setting for <txp:image_info /> tag -->
    <figcaption itemprop="caption"><txp:image_info type="caption" /></figcaption>

  </figure>

</txp:if_variable>

I have tried out your form how here:

<!-- set up a variable to check whether a image also has a caption associated with it... -->
<txp:variable name="caption" value='<txp:image_info type="caption" />' />

<!-- ...now use that image caption and wrap img inside a figure with figcaption tags, otherwise just use a plain img tag -->
<txp:if_variable name="caption" value="">

<!-- image - overriding the width and height to let the image scale to fit parent container -->
  <p><txp:hide><txp:article_image width="0" height="0" /></txp:hide>
    <txp:if_article_image>
  <txp:images id='<txp:custom_field name="article_image" />' sort=' field(id, <txp:custom_field name=''article_image'' />)' break="">
    <txp:article_image />
  </txp:images>
</txp:if_article_image>
</p>

<txp:else />

  <figure itemscope itemtype="http://schema.org/ImageObject">

<!-- image - overriding the width and height to let the image scale to fit parent container -->
    <txp:hide><txp:article_image width="0" height="0" /></txp:hide>
   <txp:if_article_image>
  <txp:images id='<txp:custom_field name="article_image" />' sort=' field(id, <txp:custom_field name=''article_image'' />)' break="">
    <txp:article_image />
  </txp:images>
</txp:if_article_image>

<!-- you do not need to specify the attribute type="caption" as that is the default setting for <txp:image_info /> tag -->
    <figcaption itemprop="caption"><txp:image_info type="caption" /></figcaption>

  </figure>

</txp:if_variable>

And in the default-form for the article-output:

<article role="article" itemscope itemtype="http://schema.org/Article">

<!-- if not an individual article then make the title h1 a link -->
<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>

  <p><txp:hide><strong><txp:text item="posted" /></strong></txp:hide> <time datetime="<txp:posted format='iso8601' />" itemprop="datePublished"><txp:posted /></time><br>
    <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>

  <div itemprop="articleBody">
    <txp:output_form form="article-image" />
    <txp:body />
  </div>

 <txp:hide> <p><strong><txp:text item="author" /></strong> <span itemprop="author"><txp:author link="1" this_section="1" /></span> </txp:hide>

  <!-- only display categories if they are actually set for an article, otherwise omit -->
  <txp:if_article_category>
    <br><strong><txp:text item="categories" /></strong> <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>
  </txp:if_article_category>

  </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>

Last edited by lythande (2015-02-25 22:36:24)

Textpattern CMS

Textpattern CMS support forum

#1 2015-02-21 04:10:31

How I can use article image in the responsive website txp 4.5.7?

#2 2015-02-23 22:41:08

Re: How I can use article image in the responsive website txp 4.5.7?

lythande wrote #288483:

#3 2015-02-25 17:55:04

Re: How I can use article image in the responsive website txp 4.5.7?

#4 2015-02-25 20:11:47

Re: How I can use article image in the responsive website txp 4.5.7?

#5 2015-02-25 20:34:53

Re: How I can use article image in the responsive website txp 4.5.7?

#6 2015-02-25 22:02:12

Re: How I can use article image in the responsive website txp 4.5.7?

Board footer