Textpattern CMS

#1 2014-06-21 13:39:16

giampablo

Member

From: Italy

Registered: 2008-07-17

Posts: 86

Website

article_image as background in a responsive website

Hi, I’m trying to get an article page with a large “hero” picture (and article title) in the head in a responsive layout (mostly with hive theme css).

Using the following tag:

<div class="hero_sfondo" style="height: 650px; background-image:url(<txp:image_url id="10"/>);”></div></code>

and this css styling:

.hero_sfondo {
	background: no-repeat fixed 50% 50%;     
	background-size: cover;  
	width: 100%;  }

I get a full width, 650px high, fluid image that scales smoothly according to the window size.

But, instead of a fixed image (in above example id=“10”), I want to dynamically display the article-image.
Ideally, I only should change the in-line style as follows:

background-image:url(<txp:article_image width=“0” height=“0” />)

but the article_image tag replaces the Html URL tag with <img src=”…” />

Using:

<txp:article_image width="0" height="0" class="hero_sfondo" />

fully displays the original image, still responsive, but I can’t get the container height limit of 650px.

So, is there a way to get just the article-image URL, stripping out <img src…> ?

P.S. I already tried: style=“height: 650px; background-image:url(<txp:article_image />);”> without success.

#2 2014-06-21 13:49:49

gaekwad

Server grease monkey

From: People's Republic of Cornwall

Registered: 2005-11-19

Posts: 4,355

GitHub

Re: article_image as background in a responsive website

See forum.textpattern.com/viewtopic.php?id=40117 – specifically forum.textpattern.com/viewtopic.php?pid=275682#p275682

---

Textpattern CMS demo – tech updates

Code is Poetry; Text is Pattern.

#3 2014-06-21 14:14:11

giampablo

Member

From: Italy

Registered: 2008-07-17

Posts: 86

Website

Re: article_image as background in a responsive website

gaekwad wrote #281568:

See forum.textpattern.com/viewtopic.php?id=40117 – specifically forum.textpattern.com/viewtopic.php?pid=275682#p275682

Great, gaekwad!
Dragonz’s solution works.
I didn’t need Stef’s little hack, since my images are stored in the db.

Both clever ideas, by the way.
Thanks again.