Exception for fluid images in Lander Theme

I have a setting in my lander masterpage that adjusts the images to the width of the content.

I find that very useful and I do not want to disable it.

The problem beginns when I insert icons, because they are inflated to the width of the content as well, which looks ridiculous, of course.

Is there a way to prevent certain images from that behaviour?

PS: Setting the scale for the image to “100 %” didn’t help.

Cheers, Tim

stacks page?

It is a Blog-Page.

Sorry - did you ask, if it is a stacks page?

Or can I use Stacks to apply different formating to my images within an Blog-Page?

It sounds like you are asking for some CSS help? As always it’s much easier for folks to help out if you provide a URL to a page.

You are probably right.

Here is the link to the page. At the very end of the page you can see the PDF-Icon (which is a transparent png actually) that is scale to fit the width of the page.

https://fantastic-friday.de/Test/files/Kill-Team-Datenblatt-Deutsch.html

The page appears to be a standard blog page?
I assume you are just dragging the image into the blog page?

If you are using RW8, I would put the icons in the resources area.
Then copy the following code into the blog:

<img src=""  Style="width:133px">

Right click the png in the resources and select copy macro:

2018-10-23_13-30-41

Put the cursor between the empty double quotes in the code above (after src=, and paste the macro:

<img src="%resource(PDF-Download-Button.png)%" Style="width:133px">

Select the entire code and mark it as code from the format menu item:

It should work in RW7 but never tried it as RW7 resources had issues. It’s a bit involved but will work.

Awesome! Thank you!

ok - two more code questions. I applied the code to the icon and also made a link out of it.

Question 1: Why does the text link next to the icon appear in the font “courier”?

Question 2: Why is my border of “10” that I applied to the image ignored.

It’s on my live-page now (scroll to the bottom):

Question 2 first. The syntax of the statement you coded for the border is not correct. There is no HTML 5a attribute for the border. You need to add a complete border to the style= attribute where the width was specified separated by a ;. This should include the border width, style and color:

<img src="../resources/PDF-Download-Button.png" style="width:53px;border: 10px solid red;"alt="Kill Team Datenblatt Deutsch downloaden" align="left">

Question 1 next. It appears you have the text in question as a sperate link?


It as been marked as “code” like above? The default for the theme(and most themes) is to use “monospace” for code.
You can try to fix this with custom CSS:

code {
   font-family: "Lucida Grande" , Arial, sans-serif;

}

This will, however, change all code tags.

The other way would be:

  1. type the text in RapidWeaver outside of a code block
  2. Highlight the text
  3. Select the link button at the bottom
  4. In the link dialog box select resources and pick the PDF

2018-10-24_09-42-01

2018-10-24_09-42-49

2 Likes

ok - got it - it seem that I somehow mixed the link into the code of the image.

what I do I enter, when I want the border to be transparent? Or should I add a some transparent pixels to the png?

If all you want is space (transparent) just add either margin or padding instead of a border:


style="width:53px;padding: 10px;"

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.