I am changing the HTML design of my website, converting all the pages into responsive ones. I am also planning the conversion of the AdSense units of the pages into responsive ones, and wondered if the transformation is as easy as the following.
This is the piece of code of one of the current AdSense units:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXX";
google_ad_slot = "YYYYYYY";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="">
</script>
Would it be as easy as adding the 'data-ad-format', removing the 'google_ad_width' and 'google_ad_height', and leaving the information of 'data-ad-client' and 'data-ad-slot'?
<script async src="//"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
data-ad-slot="YYYYYYY"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I mean, I do not want to remove my current custom channels and create new ones, and wondered if they would work with a new responsive design.
Thank you very much.
Info about YYYYYYYunit (with google_ad_width = 300 and google_ad_height = 250) is stored on the AdSense side, on AdSense servers, as "size":"SIZE_300_250".
(In my understanding scenario is:
with google_ad_width = 300 and google_ad_height = 250, their
script show_ads.js (or adsbygoogle.js) can quickly reserve 300x250 space for ad unit
YYYYYYY
which will be returned by
http://googleads.g.doubleclick.net/pagead/ads as
"size":"SIZE_300_250".)
Responsive ad units must be created as "responsive". (And in that case they'll be "size":"RESPONSIVE".)
(The AdSense platform has been, and is being, continually updated and refined, and I think they are sanitizing some bad requests now. But, relying on that is potentially risky - even if you see that your ad code modification works, that doesn't mean that it is safe to use. Only a limited set of modifications is allowed in AdSense and what you described is not one of them.)
I mean, I do not want to remove my current custom channels and create
new ones, and wondered if they would work with a new responsive
design.
When you create new responsive units you'll add them to custom channels you already have. There is no need to remove existing custom channels.
(If you mean "I do not want to remove my current ad units and create new ones", then I'm afraid you don't have other choice: standard ad unit can't be "converted" to responsive.)
Disclaimer: I can't quote relevant source for what I said above about AdSense ad serving scenario. What I said is based on my ten years experience of being an AdSense publisher, and few years RS and TC on the AdSense Help Forum. On that forum you can see cases of disabled accounts and ad serving because of code modification.)
No, it's not possible. You have to create a new tag.
Hint: You can use vertical, horizontal and auto for the data-ad-format attribute (e.g. data-ad-format="auto").
Related
Not sure if this is a bug or if 2sxc is doing this on purpose, "for reasons."
First, here is the goal. I am in a 2sxc App, in a View using Razor/C#. I need to get the following JS module linked up in the <head> like this:
<script src="//unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js"
type="module" async="async" defer="defer" crossorigin="anonymous">
</script>
Obviously if I just put it in as-is, it gets on the page, but not in the <head>.
If I add the attribute, data-enableoptimizations="true" then its in the <head> but all 4 of my attributes get stripped:
<script src="https://unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js" type="text/javascript"></script>
Additionally, notice that the src had only the leading "//unpkg...", and for some reason, the optimizations have added back "https:" which I do not want.
And where did type="text/javascript" come from? That hasn't been required for years.
I can solve this in the theme/skin by using the DnnJsInclude control like this. It uses ClientResourceManagement and allows me to specify all the attributes in HtmlAttributesAsString like this:
<dnn:DnnJsInclude
FilePath="//unpkg.com/#dnncommunity/dnn-elements/dist/esm/dnn.js"
ForceProvider="DnnPageHeaderProvider"
HtmlAttributesAsString="type:module,async:async,defer:defer,crossorigin:anonymous"
Priority="1001"
runat="server"
/>
This gets me the correct result, but it means my standard content editors now need the ability to edit page settings to use my 2sxc App. Which I do not want (the permissions or the training complication).
I realize I can probably use that DnnJsInclude control from my Razor code, but it seems like this is a valid use case that data-enableoptimizations should handle. Yes? No? Maybe? Maybe it already does it but I don't know the right syntax?
Anyone know how to get 2sxc to do this? Or is this a bug worth reporting regarding data-enableoptimizations? I was especially surprised that it just stripped my valid attributes.
So for some background: once the attribute is set, it will be picked up and taken apart, because DNN will need the parts given one by one, not as a <script> tag.
I would assume that as of now, there is no mechanism which tries to preserve the remaining bits. We haven't looked at this in a long time, and maybe the DNN APIs are missing in v7.4.2 (our minimum compatibility).
But in general: this is currently by design, and could be improved. I suggest you open an issue on github and/or contribute a change ;)
Okay, so I worked it out in code using the DnnJsInclude control. Here is the solution in a nutshell:
#using DotNetNuke.Web.Client.ClientResourceManagement
#{
// Add a <script> tag in the head as a JS module
var include = new DnnJsInclude
{
FilePath = "https://unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js",
ForceProvider = "DnnPageHeaderProvider",
Priority = 1001, // stay out of the way?
HtmlAttributesAsString = "type:module,async:async,defer:defer,crossorigin:anonymous",
};
var loader = (Context.CurrentHandler as Page).FindControl("ClientResourceIncludes");
if (loader != null)
{
loader.Controls.Add(include);
}
}
Which gets the exact output needed thanks to the HtmlAttributesAsString parameter.
I even wrote it up as a blog post with a lot of details.
DNN Details 004: Using the New Dnn-Elements in a 2sxc View?
Since this is dependent on Dnn, it doesn't benefit the Oqtane/hybrid coders.
Summary
I'm implementing Schema.org JSON-LD structured Data into a React application that's very content heavy. I've got it all set up properly, but I'm questioning whether the way I set it up is best practice or acceptable?
The Question
I have tags minified throughout the body of my code within each element. I question this approach because it seems inefficient to have script tags all throughout the body rather than trying to consolidate them in the head tag under 1 big script tag with all the JSON-LD.
Example:
Let's say I have an eCommerce category with a lot of products on the page. Each product is contained in a <div>. Within each product div I'm providing a schema.org tag.
<div className="product-1-example">
<script type="application/ld+json">{"#context":"http://schema.org/", "#type":"Product","name":"3rd thing"}</script>
</div>
<div className="product-2-example">
<script type="application/ld+json">{"#context":"http://schema.org/", "#type":"Product","name":"3rd thing"}</script>
</div>
Here's a screenshot if the example above doesn't help of how the code is outputting:
Is this an OK approach? It just seems bizarre to me to have script tags like this all over the place? The problem I'm having as well is that because of my component structure, I can't really bundle up 1 nice tag at the top with all the consolidated structured data (i.e. grouping all the product JSON-LD data into 1). I could maybe build a script tag at the top with most of the data, and then fill out the rest with microdata?
The only way to really know is to test with the systems you want to read your markup.
There is no reason doing it that way is wrong. And I presume its done that way as its added at the point the system is processing those entities. Maybe neater to have each add their own script at the top instead of inline if possible.
I personally prefer to keep entities in their own scripts. If there is a bug in one, it will not stop the others from being parsed. You can have entities cross reference to each other by their ids.
Try not to mix with microdata. You can't cross reference ids between the two.
You probably also need to think about your entity structure. Typically you only want one main top level entity that represents what the page is about. Some other top level entities are fine as they are considered WebPage related, e.g. BreadcrumbList. But you don;t want to send mixed messages. e.g. if you mark up 10 products, which is the one the page is about? If you mark up a Product and Article. is the page an Article or about a Product?
I am building an Angular test preparation app (with Laravel 5.1 API). One of the requirements is to allow the user to print a certificate of achievement.
The client wants the person's name and credentials interpolated into the document (e.g., highlighted below). Here is a snapshot of the PDF template they sent:
The way I'm handling PDF viewing is simply by storing the file on S3 and giving them a link to that file.
Interpolating information into a PDF doc doesn't seem trivial and I haven't found much information on programmatically allowing this, but there are tools like DocHub, that allow you do edit while viewing the PDF.
I'm interested in learning:
is doing this programmatically trivial?
are there 3rd party tools I'm unaware of?
would I even be able to send this information along to the S3 link to interpolate in the first place?
Using PDF as a format for editing is usually a bad choice. If you have a form with fixed fields, then it's easy. Create a PDF template with an interactive form. In this form, based on AcroForm technology, you'll define fields with fixed coordinates, and a fixed size. You can then add content to these fields.
One major disadvantage with this approach is the lack of flexibility. Did you notice that I used the word "fixed" three times in the previous paragraph? If text doesn't fit the predefined field, you're out of luck. If the field is overdimensioned, you'll end up with plenty of white space. This approach is great if you can predict what the data will be like. A typical use case is a ticket or a voucher. For instance: the empty form is a really nice page, with only a couple of fields where an automated system can put a name, a date, a time, and a seat number.
This isn't the best approach for the example you show in your screen shot. The position of every line of text, every word, every character is known in advance. If you want to replace a short word with a long word (or vice-versa), then all those positions (of each line, of the complete page, possibly of the complete document) need to be recalculated. That's madness. Only people with very poor design skills come up with such an idea.
A better idea, is to store the template as HTML. See for instance chapter 5 of iText's pdfHTML tutorial, where we have this snippet of HTML:
<html>
<head>
<title>Invitation to SXSW 2018</title>
</head>
<body>
<u><b>Re: Invitation</b></u>
<br>
<p>Dear <name>SXSW visitor</name>,
we hope you had a great SXSW film festival experience last year.
And we would like to invite you to the next edition of SXSW Film
that takes place from March 9 until March 17, 2018.</p>
<p>Sincerely,<br>
The SXSW crew<br>
<date>August 4, 2017</date></p>
</body>
</html>
Actually, it's not really HTML, because the <name> tag and the <date> tag don't exist in HTML. All HTML processors (browsers as well as pdfHTML) ignore those tags and treat their content as if the tag was a <span>:
It doesn't make much sense to have such tags in the context of pure HTML, but it does make a lot of sense in the case of pdfHTML. With pdfHTMLL, you can configure custom tags, and have a result that looks like the PDFs shown below:
Look at the document for "John Doe" and compare it with the document for "Bruno Lowagie". The name "John Doe" is much shorter than my name, hence more words fit on that first line. The text flows nicely (we could also have chosen to justify the text on both sides). This "flow" is impossible to achieve with your approach, because you will never get a PDF template to reflow nicely.
OK, I get it, you probably say, but what about the practical aspects? You talk about a Java / .Net library, but I am working with Laravel and Angular.js. First, let me tell you that I don't think you'll find any good PDF tools for Laravel or Angular.js, because of the nature of PDF and those development environments (in my opinion, those technologies don't play well together). Regardless of my opinion, this shouldn't be much of a problem for you because you work in an Amazon environment. AWS supports Java, and the Java code needed to get pdfHTML working is minimal. Most of the code samples I wrote for the pdfHTML tutorial are shorter than 15 lines. So why not try Java and pdfHTML?
If you're already using Amazon services, why not use an amazon lambda function, in combination with iText7 (java), to generate the pdf on demand?
That way, you are guaranteed that the pdf is correct, and has nice layout every time.
Generating the pdf can either be done by:
converting HTML,
programmatically creating your entire document,
filling and flattening an XFA form.
I think for your use-case, either option 1 or 2 are the most sustainable.
Starting off, I have very little understanding of the PHP or how HTMLPurifier itself works and am completely learning on the go. I've got a fair understanding of HTML and CSS from teaching myself, but I wouldn't call myself anything more than a novice at this point.
I run a myBB forum via hostgator wherein my users want HTML allowed to make fancy tables for their posts. Since we only opened shop a month ago and have a very small userbase so far of people I know and trust, I enabled HTML. About a week ago I used a plugin plus the current library to install HTMLPurifier into my forum. It works great. Thing is, it eats up a majority of the code my users are using to make their posts look good.
I tried to plug this code which I found here into my CSSDefinition.php file between the border-color and border-width codes to try to fix the border-radius issue.
// border-radius
$border_radius =
$this->info['border-top-left-radius'] =
$this->info['border-top-right-radius'] =
$this->info['border-bottom-left-radius'] =
$this->info['border-bottom-right-radius'] = new HTMLPurifier_AttrDef_CSS_Composite(array
(
new HTMLPurifier_AttrDef_CSS_Length('0'),
new HTMLPurifier_AttrDef_CSS_Percentage(true)
)
);
$this->info['border-radius'] = new HTMLPurifier_AttrDef_CSS_Multiple($border_radius);
That did absolutely nothing, I assume because his is out of date. I haven't been able to find any information on adding text-shadow to my whitelist, nor how to allow opacity, either through opacity:#; or rbga(#,#,#,0.5), though I did find a hack for the latter that I couldn't make heads or tails of for what to actually do with the file.
I don't know how to run my Config.php file because looking at the code I can see there is information there, but trying to visit the page through various means gets me nowhere.
I am currently trying to jazz up a SilverStripe site by making the content more engaging. The site is responsive, but all this means currently is that the navigation bar/header snaps to a more mobile friendly style when it hits the mobile break point.
The long and short of it is, my main page.ss is this:
<html>
<head>
<title>$Title</title>
</head>
<body>
$Header
$Layout
$Footer
</body>
</html>
With $Layout rendering a few variations of a basic page. We have a couple of layouts that aim to give our webmaster pages that are a bit more engaging - for example we have an accordion type page that has many accordion section DataObjects, that present the page as an accordion page with the open/shut javascript functionality.
But this is not enough. I want to give the webmaster more flexibility in the CMS to create interesting pages, without me having to create hundreds of different page types.
I'm thinking of creating a module that gets rid of the main $Content field for all pages, and instead inserts a sort of grid system management field. The webmaster can add rows (one DataObject) and then split those rows into sections (another DataObject). The sections will have a content field managed by TinyMCE, just like a page has. Then on the front end I will map these rows and sections to a responsive grid system.
For variations on the sections, I will add classes (a bit like having different page types) that render slightly differently. The sections will have .ss and .css (and possibly .js) to control their own look and feel.
My question is, how have other people approached this problem? Does my idea sound like overkill? Or does it sound like a good idea for a module?
-
For some examples of what I am trying to achieve, this page is a good example:
http://www.wingsforlife.com/en/research/
Content is split up into various sections, which allows for better control when the page is resized. Also throughout the site, content is varied, sometimes it will be in a single column, other times two, which snaps to one column when the window is smaller.
On the home page, if you scroll down, there are 4 links that are presented inside circles, that contain a number and some text: http://www.wingsforlife.com/en/
This is something I can't see being possible inside TinyMCE (which is fair enough as TinyMCE is just a basic content editor, not a web design tool).
Have a look at https://github.com/burnbright/silverstripe-widgetpages for an implementation of using Widgets to compose a webpage. Also https://github.com/g4b0/silverstripe-widget-pages-extension.
this can easily be achieved by replacing the HTMLEditorField that's linked to the Content field in the database by some GridField, managing DataObjects that make up what you might call 'ContentParts'. we've already used this approach in some projects to allow for more rendering flexibility of content elements.
simply tie some DataObjects to your Page class:
private static $has_many = array(
'ContentParts' => 'ContentPart'
);
then, use a GridField to manage them in your getCMSFields:
$gridFieldConfig = GridFieldConfig_RecordEditor::create();
$field_ContentParts = new GridField('ContentParts', 'Content Parts', $this->ContentParts(), $gridFieldConfig);
simplest way to render them in your template is as follows:
<% loop ContentParts %>
<section>...</section>
<% end_loop %>
of course you'll want to have different contentparts, so you might want to create subclasses of ContentPart with their custom fields and use the GridFieldAddNewMultiClass component to add them to your GridField (it's part of the GridFieldExtensions module, to be found here: https://github.com/ajshort/silverstripe-gridfieldextensions)
hth