Jump to content
IPSGoza

Adjusting background image placeholder

 Share

You've just bought and installed News Database and wondering why there's no background images showing up if you're not using a cover image. Obvious, its trying to call a image when there's isn't one. There are few places you can upload an image on your website.

  • Using the Page Management > media, you can upload an image and you can use the code there to display your placeholder image.
  • Customization > Themes > Theme (dropdown) Manage resources > add image.
  • Upload image through FTP on your server
  • Lastly, copy image address you found on the internet.

All the options will work but for simplicity, we'll stick with the first option as we're dealing with pages.  Go to Pages > Page Management > media > Upload new media. Once you have added your image, you want to click on the image and on the left side will appear, you will want to copy media tag. The media tag will represent the url to the image itself. 

Now that we have our media tag, we want to head to Pages > Page Management > templates. There's 2 files we want to edit:

  • News Article Display > record
  • News Article Listing > recordRow

News Article Display > record. If you see {media="4"} replace with your media number. If you're not using a media tag, just replace {media="4"} to whatever url is your placeholder image. 

<div class="cCmsRecordsArticleHeader" style="{{if $record->record_image}}background-image: url({file="$record->record_image" extension="cms_Records"}){{else}}background-image: url({media="4"}){{endif}}">
	<div class="cCmsRecordsArticleHeader__height"></div>
  		<nav class="cCmsRecordsArticleHeader__nav ipsLayout_container">
    	<ul>
      		<li><a href="{pageurl="news"}"><i class="fa fa-angle-left"></i> Blog Home</a></li>
      		<li><a href="{$record->container()->url()}">More in {$record->container()->_title}</a></li>
    	</ul>
  	</nav>
</div>

News Article Listing > recordRow. Same as before, replace media number with yours if your using media option but otherwise replace {media="4"} with your actual link to the placeholder image. 

 <div class="cCmsCategoryFeaturedImage" style="{{if $row->record_image}}background-image: url({file="$row->record_image" extension="cms_Records"}){{else}}background-image: url({media="4"}){{endif}}">
  {{if $row->record_image}}
      <img class="ipsImage" src="{file="$row->record_image" extension="cms_Records"}">
  {{else}}
      <img class="ipsImage" src="{media="4"}">
  {{endif}}
</div>

Edit our news css file. Replace media # or replace {media="4"} entirely to your URL of the image. 

.cCmsDatabasePageHeaderLogo {
  background-image: url({media="4"});
}

 

×
×
  • Create New...