I have a ModelAdmin which stores images among other things. I can do thumbnails up to a certain size and download them but is there a way to display a larger version of the image while in the CMS admin?
I think if I used the UploadField.ss template and added some custom code in there to display it, it could work however it would then be displayed through the CMS. Does SilverStripe provide an easy way to do this?
You can set the height and width of the upload field preview like that
UploadField::create('Image', 'Bild')
->setPreviewMaxWidth(120)
->setPreviewMaxHeight(120)
->addExtraClass('big-preview');
But the container size seems hardcoded in css so you need to change that too
.big-preview .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview {
height: 120px;
line-height: 120px;
width: 120px;
}
.big-preview .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info {
margin-left: 135px;
}
I don't know if that's the best way to do it, cause it seems a little bit hacky, but it works.
I have a long table which shows rows on several pages. When a page ends, the row is printed half on one page and half on the next page. How can I make sure that the rows is printed completely on the new page?
CSS property: page-break-inside: avoid; on HTML tr element does it.
Tested with:
wkhtmltopdf 0.12.3 provided for Linux (Ubuntu Trusty) 32-bit / 64-bit built on Ubuntu 14.04.2 as provided at:
http://wkhtmltopdf.org/downloads.html#stable
A quick and dirty test may look like:
<tr style="page-break-inside: avoid;">
<!-- A little border to see the result more easily -->
<td style="border: solid 1px blue;">
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
</td>
<td>col2</td>
<td>col3</td>
</tr>
Mozilla Developer Network page-break-inside description
Will be nice to add this CSS with respective classes
#main_div {
position: relative;
width: 672px; /* find your width in px based on the page margins */
}
tr td {
page-break-before: auto;
page-break-inside: avoid !important;
}
But the most important is to give to your container which contains the table (or some parent div) a fixed width in pixels. Should work for most (WebKit) pdf generators and permit them to calculate correctly the heights.
I can confirm that works for me with wkhtmltopdf 0.12.6 (with patched qt) in kubuntu
I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!
Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is
<img src="cid:seal">
I.e. when the html code expects an embedded image instead of one stored elsewhere.
[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].
Details:
I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.
And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.
The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.
I put the basic code stripped of all font styling colors etc. below.
I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.
It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.
Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]
NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e.
Thanks for any help.
<html>
<head>
<meta name="viewport" content="width=980, initial-scale=1">
<title>Test Email</title>
</head>
<body style="width:100%; border:0;margin:0;padding:0;">
<table align="center"
style="width:980px; border-collapse:collapse;
margin-left:auto; margin-right:auto;">
<tr style="border:0; margin:0; padding:0;">
<td style="width:15%; border:0; margin:0; padding:0;">
<img src="cid:seal"
style="width:6em; height:auto;">
</td>
<td style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
Some Titles and stuff
</td>
</tr>
<tr>
<td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
<p> 1st paragraph
....
<p> last paragraph
</td>
</tr>
</table>
With help from Eugene above, I discovered at least one good solution.
<img src="cid:seal" width="300" or "300px" of "15%"> DOES NOT WORK.
But when I ditched the quotes this worked
<img src="cid:seal" width=300 height=300>
It does of course mean setting width in % is still a problem since it requires quotes.
But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]
AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes.
<body style="background-image:url(cid:bkg);
background-repeat:repeat;
width:100%;
generic-family:Sans-serif;
font-family:Verdana;
border:0;margin:1em 0 1em 0;padding:0;">
Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.
I'm working on a new website re-design; so far every browser compatibility issue has been resolved no problem - but there's one that remains in IE7.
The client has a dropdown menu from the header which extends over the content, but the problem occurs when the client has a related video on the page as this is often displayed first; the video [being displayed just below the header] pushes the menu behind.
The dropdown is created in CSS using a high z-index value (1000).
JavaScript is used to hide and show the menu by altering the 'visibility' value.
The video uses jPlayer, given the age of IE7 it doesn't use HTML5 to display the video but instead includes a .swf file.
I have tried altering the z-index of the header, jPlayer, etc to the suggestions on this site but had no luck. I have also tried changing the position from absolute to relative but this broke the dropdown.
I have modified the parameter 'wmode' so that it's property is 'transparent', I've also tried 'opaque'.
The only difference I have made so far is adding hours to the work-log.
The page is question can be found here:
http://www.newforest.gov.uk/healthandleisure/
Thanks!
Have you tried an iframe shim? I had a similar experience with the google earth plugin, and adding the shim to the pieces that need to go on top of the swf elements as:
<iframe class="bgi" frameborder="0" scrolling="no" src="about:blank">
<html><head></head><body></body></html>
</iframe>
where bgi is a class that has
height:100%;
width:100%;
z-index:-1;
Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.