I'm looking for suggestions on how to simplify/optimize a piece of code in one of my view files in my ASP.Net MVC project. The code works, but I'm not sure if I've written it the best way.
Basically, the code is used to display a list of links to documents, with little thumbnails to the left of each link. The main problem, is that there are two different types of documents, and each type has to have it's thumbnail image stored in a different location, this is a project requirement and can't be changed.
I'm currently accomplishing this with the view code shown below.
// Display a link to every document.
foreach (var document in documentList)
{
<a href="#Url.Content("~/Document/DownloadDocument/" +
document.documentid)" target="_blank">
#{
// This will be the root of all the paths.
var path = "~/Document/DisplayImage/";
// If it's a Type 1 document, we need to use a different path.
if (document.documentType == "Type 1") {
path += "Path/To/Image/Folder";
<img id="imageHolder" src="#Url.Content(path)"
onerror="imgError(this);" />
#document.documentname
}
else {
path += "Path/To/Different/Image/Folder";
<img src="#Url.Content(path)" />
#document.documentname
}
}
</a>
<br />
}
Like I said, the code works, but I'm not too happy with how it's written. Does anyone have any suggestions?
When working with MVC, it's best to keep your Views dumb (no logic, simply rendering).
You can accomplish this by using a strongly-typed View and performing all of the logic in the Controller. It looks like you may already be doing this since you have a documentList.
In this case, documentList should be a list of View Model objects that already have the appropriate image path already set on them from the controller.
I would suggest moving the path to your document image into your model. That way you can just display the image from the path in the model and you wouldn't have to put any logic in your view.
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
I have a base .docx for which I need to change the page header / footer image on a case by case basis. I read that python-docx does not yet handle headers/footers but it does handle Pictures.
What I cannot work around is how to replace them.
I found the Pictures in the documents ._package.parts objects as ImagePart, I could even try to identify the image by its partname attribute.
What I could not find in any way is how to replace the image. I tried replacing the ImagePart ._blob and ._image attributes but it makes no difference after saving.
So, what would be the "good" way to replace one Image blob with another one using python-docx? (it is the only change I need to do).
Current code is:
d = Document(docx='basefile.docx')
parts = d._package
for p in parts:
if isinstance(p, docx.parts.image.ImagePart) and p.partname.find('image1.png'):
img = p
break
img._blob = open('newfile.png', 'r').read()
d.save('newfile.docx')
Thanks,
marc
There is no requirement to use python-docx. I found another Python library for messing with docx files called "paradocx" altought it seems a bit abandoned it works for what I need.
python-docx would be preferable as the project seems more healthy so a solution based on it is still desired.
Anyway, here is the paradocx based solution:
from paradocx import Document
from paradocx.headerfooter import HeaderPart
template = 'template.docx'
newimg = open('new_file.png', 'r')
doc = Document.from_file(template)
header = doc.get_parts_by_class(HeaderPart).next()
img = header.related('http://schemas.openxmlformats.org/officeDocument/2006/relationships/image')[0]
img.data = newimg.read()
newimg.close()
doc.save('prueba.docx')
I am using 'Read the Docs' Sphinx theme for my documentation. In the original theme, given below
Read the Docs Sphinx Theme
the content or main layout width is designed to be mobile friendly. However, for my project I would like this to be a bit more wide. I do not know HTML and hence would appreciate if any one could give me some clues to increase the content (layout) width.
Another option is to create a stylesheet in source/_static with just the css you want, e.g.
.wy-nav-content {
max-width: none;
}
or
.wy-nav-content {
max-width: 1200px !important;
}
Make sure the directory is referenced in source/conf.py - I believe by default there's a line to do this, i.e.
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']
Then create a custom layout in source/_templates/layout.html and do something like this to include your stylesheet
{% extends "!layout.html" %}
{% block extrahead %}
<link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
Assuming you called your stylesheet style.css
In case someone is searching for a simpler answer...
combining the ideas from
https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/
and the above suggestions, I found the easiest way of getting a custom window-width is the following:
In conf.py, add a function that adds a custom stylesheet:
def setup(app):
app.add_css_file('my_theme.css')
In conf.py, state/adjust:
html_static_path = ['_static']
Create a _static folder/directory if it doesn't exist.
Create a file called my_theme.css in the _static folder that contains the lines:
.wy-nav-content {
max-width: 1200px !important;
}
The HTML option added in Sphinx 1.8.0b1 (released Sep 2018) simplifies the process. The recommendation in Read The Docs Documentation is adding custom css to the theme via the html_css_files option in conf.py.
html_css_files = [
'custom.css',
]
Put the custom.css in the html static path folder (Default is _static folder).
Content of custom.css:
.wy-nav-content {
max-width: 75% !important;
}
First of all I must say, that during my sphinx quickstart I chose the option of separate folder for my sources and for my build.
It's a 3 steps process:
1. Create a document for your styles:
Where?
In the same directory where my conf.py lives, (in my case source), I created a folder for my custom static files (stylesheets, javascripts). I called it custom.
Inside it I created a subfolder for my stylesheets: source/custom/css.
In this subfolder I'm gonna create my custom styles: source/custom/css/my_theme.css.
2. Telling sphinx about it
Now we have to tell sphinx to spit this document inside build/_static/css, the same directory where is the stylesheet included in the Read The Documents theme. We do that adding the following line to conf.py:
html_static_path = ['custom'] # Directory for static files.
Done. Now, if we build, we will have the RTD styles (theme.css), and our custom my_theme.css in the same directory, build/_static/css.
3. Selecting our custom theme
Now we are gonna tell sphinx to use our custom my_theme.css, instead of the RTD one. We do that adding this line in conf.py:
html_style = 'css/my_theme.css' # Choosing my custom theme.
In our custom stylesheet, the first line should import the styles of theme.css with #import url("theme.css");.
And we are ready to start overwriting styles.
UPDATE: THERE IS AN EVEN SIMPLER WAY.
1. Put your customizations inside source/_static/css/my_theme.css.
In your custom stylesheet, the first line should import the styles of theme.css with #import url("theme.css");.
This way, you don't have to worry about messing up the default styles, if your custom stylesheet doesn't work, delete and start again.
2. Add the following line in conf.py:
html_style = 'css/my_theme.css'
The solutions here are somewhat hackish. If you want to include the style, and have a css override and have it work on RTD you will want something like this.
on_rtd = os.environ.get('READTHEDOCS', None) == 'True'
if not on_rtd: # only import and set the theme if we're building docs locally
import sphinx_rtd_theme
html_theme = 'sphinx_rtd_theme'
html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
html_style = 'css/custom.css'
else:
html_context = {
'css_files': [
'https://media.readthedocs.org/css/sphinx_rtd_theme.css',
'https://media.readthedocs.org/css/readthedocs-doc-embed.css',
'_static/css/custom.css',
],
}
I have tested this myself and it appears to work locally and on RTD. Largely plagiarized from https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/
source\conf.py
html_theme = 'sphinx_rtd_theme'
html_style = 'css/my_theme.css'
source\_static\css\my_theme.css
#import url("theme.css");
.wy-nav-content {
max-width: 90%;
}
That will be 90% width of your monitor.
I found myself repeating this customization on multiple projects I've worked on (based on the great answers here, of course 😃 ).
So I made an extension just for that, the usage is as follows:
pip install sphinx-rtd-size
And in the conf.py:
extensions = [
...
'sphinx_rtd_size',
]
sphinx_rtd_size_width = "90%"
Hoping this might simplify things for future users...
You can checkout the pypi page and the github repository.
For 'classic' Theme, The solution is as simple and as clean as :
# Add/Update "html_theme_options" like this on your conf.py
html_theme_options = {'body_max_width': '70%'}
Adapt the percentage to your taste.
Reference from sphinx: body_max_width (int or str): Maximal width of the document body. This can be an int, which is interpreted as pixels or a valid CSS dimension string such as ‘70em’ or ‘50%’. Use ‘none’ if you don’t want a width limit. Defaults may depend on the theme (often 800px).
To make the ReadTheDocs theme use the entire width of your screen you can modify the theme.css file, removing the max-width: 800px; property from the wy-nav-content class definition, like so:
.wy-nav-content {
padding: 1.618em 3.236em;
height: 100%;
/* max-width: 800px; */
margin: auto;
}
Some Notes
Source of theme.css is here:
https://github.com/rtfd/readthedocs.org/blob/master/media/css/sphinx_rtd_theme.css
On your filesystem it will be in (assuming you've run:pip install sphinx_rtd_theme):
lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css
To find the absolute path of theme.css on Linux/Mac you can run this on the command line (assuming you have set your $PYTHONPATH environment variable):
for p in `echo $PYTHONPATH | tr ":" "\n"`; do
find $p -type f -name 'theme.css' | grep sphinx_rtd_theme
done
The theme.css file will be minified so you can use a tool like http://unminify.com to make it easier to read.
The results:
Before:
After:
I would modify this in the css. You should search for the file theme.css (it is in the read-the-doc sources at "sphinx_rtd_theme/static/css/theme.css").
Make a copy of that file and put it in your sphinx _static dir. In that css file you can make all the layout changes that you need. (You might have to read a bit on css files if you have never worked with that.)
Hope this helps.
I have a page (http://www.gardensandhomesdirect.co.uk/newhomepage)
I want to make the center column (#content-column) 930px for this page only, which will eventually become the homepage.
The CMS used is NetSuite, and is notoriously difficult to work with.
What is the best way to do this? Is it possible with just CSS/HTML commands or JavaScript?
Since it's a CMS you probably cannot add markup easily so I'm thinking some jQuery would be a simple solution here...
$(function () {
var path = location.pathname.substring(1);
if (path) {
var regex = new RegExp('newhomepage$', 'gi');
if (regex.test(path)) $('#content-column').addClass('yourClass');
}
});
This should add "yourClass" to the element just on that page.
Then you can add to your external CSS...
.yourClass {
width: 930px !important;
}
I feel your pain
I have used Netsuite extensively and found )after many hours of hair pulling and expletives) that the best solution (for us) has been to create the home page and any unique landing pages as Hard coded Hosted pages (hosted on Netsuite) and reserve Netsuite's CMS system for item pages where you need the add to cart functionality.
Take it from me in the long run it'll save you hours of frustration :-)
Of course you can use Netsuite tags all over the place as long as you host the pages in your "site" folder
I have no experience with Netsuite so please take this as is..
I would try to add a custom style tag to the document like this:
<style>
#content-column{
width:930px !important;
}
</style>
If you only have access to the HTML of that page, then put an inline style attribute in the center column's HTML. Example:
<div id="content-column" style="width: 930px;">