Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Setting an article image as a css background
I have an article form where I want my article image to be background-size: cover, which I am currently doing like this:
<section class="fullscreen-article-image" style="background-image: url('<txp:image_url id='<txp:custom_field name="article_image" />' />')" >… which works splendidly for articles that have an image ID in the article image field. However I also have some articles where the article image was uploaded by FTP and isn’t in the images database and so is assigned like this: /images/gallery/center.jpg (is this bad?), in which case the code above quite rightly returns bupkis. I am working on something like this:
<txp:variable name="article-image-url" value="<txp:image_url id='<txp:custom_field name="article_image" />" />
<txp:if_variable name="article-image-url" value="">
<txp:variable name="article-image-url" value="<txp:custom_field name='article_image' />" />
</txp:if_variable>… which will not work, because in the first line there are three levels of quotes necessary. Can this be fixed with yet another variable, or is the whole thing a dead end?
Yes, I have tried turning it off and on.
Offline
Re: Setting an article image as a css background
How about using <txp:variable> as a container:
<txp:variable name="article-image-url">
<txp:image_url id='<txp:custom_field name="article_image" />' />
</txp:variable>Note that you’ll probably need to put it all on one line so the subsequent <txp:if_variable> compares to "" properly. It doesn’t trim spaces by default. We’re working on that.
Edit: or use txp:if_article_image in some capacity.
Last edited by Bloke (2016-10-12 13:26:34)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Setting an article image as a css background
Of course! I always forget about Variable as a container tag. Thanks!!
Yes, I have tried turning it off and on.
Offline
Re: Setting an article image as a css background
Self explain:
<txp:hide>
/**
* Display as background style the latest image url from an article
*
* Form name: "custom_img_url"
*
* To be called as:
* <code>
* <txp:article_custom section="my-section" limit="1" status="live" sort="Posted desc">
* background:transparent url(<txp:output_form form="custom_img_url" />) center center no-repeat;background-size:cover</txp:article_custom>">
* </txp:article_custom>
* </code>
*
*/
</txp:hide><txp:php>
global $variable;
$pic = custom_field(array('name'=>'article_image'));
// Prevent multiple image from a comma separated list of IDs
if (false !== ($pos = strpos($pic, ','))) {
$pic = substr($pic, 0, $pos);
}
$variable['cimg'] = $pic;
</txp:php><txp:if_variable name="cimg" value="">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=<txp:else /><txp:images id='<txp:variable name="cimg" />'><txp:image_url /></txp:images></txp:if_variable>
Can be used to preload images in your <head> part, too:
<txp:article_custom section="my-section" limit="1" status="live" sort="Posted desc"><link rel="preload" href="<txp:output_form form="custom_img_url" />"></txp:article_custom>Patrick.
Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.
Offline
Re: Setting an article image as a css background
Pat64 wrote #302161:
Self explain:
<txp:hide>...Can be used to preload images in your
<head>part, too:
<txp:article_custom section="my-section" limit="1" status="live" sort="Posted desc"><link rel="preload" href="<txp:output_form form="custom_img_url" />"></txp:article_custom>...
Hmm, I’m confused. What does this do, how is it better than the code I’ve got?
Yes, I have tried turning it off and on.
Offline